前回は「【入門７：CSS/margin】マージンの基本と応用を徹底マスターしよう」でマージンの基本と応用を見てきました。今回はマージン同様に重要なpositionを見ていきます。
positionというと……なんかの位置を指定するプロパティってことかな？
多分そうですね。僕も位置に関するCSSだと思います
CSSのpositionは要素を配置するときの基準を設定するプロパティです。positionプロパティだけを使っても位置指定はできませんが、他のCSSプロパティを組み合わせることによって表示位置の調整ができます。
positionを使いこなすことができれば、画面内の好きな位置に要素を表示できます。今回はpositionの基本のほか、プロパティを組み合わせて表示位置を指定する方法についても解説します。
positionの基本
CSSのpositionは、要素を表示するときの基準を指定するプロパティです。たとえば、サイトのヘッダメニューを上部に固定表示したり、右下に”TOPへ戻るボタン”を固定表示したりと、さまざまなデザインができますよ
ほうほう。 なかなかいいじゃないか
positionの記述ルールと種類
positionプロパティの値は5種類あり、それぞれ以下のように記述します。
.youso1 { position : static; }
.youso2 { position : relative; }
.youso3 { position : absolute; }
.youso4 { position : fixed; }
.youso5 { position : sticky; }①：static
staticは通常配置です。positionがstaticに設定されているときは表示位置の指定ができません。
②：relative
relativeは要素を相対的に配置したいときに使います。
③：absolute
absoluteは要素を絶対位置で指定できます。親要素からの距離を数値で指定します。
④：fixed
fixedは画面の左上を基準として絶対位置を指定できます。メニューを固定表示するときなどに使います。
⑤：sticky
stickyもメニューの固定表示などに使います。stickyはスクロールに応じて要素の配置条件が変わります。
positionを使った位置指定
では、positionプロパティを使った位置指定の仕方を説明しますね
positionプロパティを使うときは、top、right、bottom、leftという4つのプロパティを併用します。positionプロパティで表示方式を決定し、topなどの4つのプロパティによって位置を決定します。
位置指定のプロパティは以下のように記述します。
.youso1 {
position : absolute;
top : 70px;
left : 80px;
}この例では上から70ピクセル、左から80ピクセルの位置に要素が表示されます。もう1つ別の例を見てみましょう。
.youso2 {
position : fixed;
bottom : 0;
right : 0;
}この例では下から0ピクセル、右から0ピクセルの位置に要素が表示されます。fixedを指定しているため、画面の右下に固定表示されます。
ここまでがpositionプロパティの基本です。positionプロパティには絶対位置や相対位置などの複雑な動きがあるので、それぞれをさらに詳しく解説しますね
positionの詳しい使い方
①：staticの配置を詳しく知る
staticを指定した要素は通常表示されます。位置指定は出来ません。HTMLで記載した順番通りの位置に表示されます
要素のposition初期値はstaticに設定されているため、positionを設定しなければ自動的にstaticでの配置です。
staticは初期値なので、わざわざposition:staticを指定する機会は多くありません。staticを使うのは、position:absoluteなどが設定された要素のスタイルを上書きする場合です。
②：relativeの配置を詳しく知る
relativeは要素を相対的に配置します。その要素をstaticで表示したときの位置が基準になります。まずは例を見てみましょう。
HTMLタグ
<div class=”oya”>
<span class=”ko1”>サンプルです★</span>
<span class=”ko2”>relativeです☆</span>
</div>CSS
.ko2 { position : relative; top : 7px; left : 7px;}この例では2つ目の子要素に対してrelativeを指定しています。relativeを理解するためには、一度relativeを指定しなかったときのことを考えます。
relativeを指定しなければpositionは初期値であるstaticになりますよね。画面では以下のように表示されるはずです。
サンプルです★relativeです☆
spanタグがインライン要素なので改行せずに続けて表示されます。このとき表示されている位置が、relativeを設定したときの基準になります。
つまり、relativeを指定すると★マークの位置から下方向に7ピクセル、右方向に7ピクセル移動した位置に「relativeです☆」が表示されます。
③：absoluteの配置を詳しく知る
absoluteは要素を絶対位置で表示します。親要素がないときや親要素がstaticのときは、ウィンドウの左上が基準です
HTMLタグ
<div>
<div class=”ko”>absoluteです☆</div>
</div>CSS
.ko { position : absolute; top : 7px; left : 7px; }この例では、ウィンドウの左上を基準として、下方向に7ピクセル、右方向に7ピクセルの位置に「absoluteです☆」が表示されます。
absoluteの表示にはもう1つ別のパターンがあります。親要素にstatic以外のpositionが指定されているときは、親要素の左上が基準となります。例を見てみましょう。
HTMLタグ
<div class=”oya”>
<div class=”ko”>absoluteです☆</div>
</div>CSS
.oya { position : relative; }
.ko { position : absolute; top : 7px; left : 7px; }親要素にrelativeを指定しているので、親要素の左上から7ピクセルの位置に「absoluteです☆」が表示されます。
absoluteを使うときのポイントは親要素へのrelative指定を忘れないことです。
absoluteを使うときはrelativeをセットで使うことを覚えておきましょう。
親要素にrelativeの指定がない場合、表示基準がなくなってしまい、レイアウトが崩れてしまいます。
④：fixedの配置を詳しく知る
fixedは要素を絶対位置で表示します。ウィンドウ左上が基準となり、スクロールしても表示位置が固定されたままになります。例を見てみましょう
HTMLタグ
<div>
<div>文章1</div>
</div>
<div>
<div>文章2</div>
<div class=”ko”>fixedです☆</div>
</div>CSS
.ko { position : fixed; top : 7px; left : 7px; }この例では要素にfixedを指定しています。文章1や文章2の配置とは関係なく、必ずウィンドウの上から7ピクセル、左から7ピクセルの位置に「fixedです☆」が表示されます。
fixedでの重なり対策
fixedは要素を絶対位置で表示するため、複数のfixedを持った要素が重なってしまうことがあります。
通常のHTML要素であれば、HTMLを書いた順番に並べられます。それぞれの要素が高さの値を持っていて、要素同士が重なることはありません。しかし、position:fixedを指定した要素は、フロート状態（浮いている状態）となり、HTMLの順番を無視して表示されます。
⑤：stickyの配置を詳しく知る
stickyはpositionプロパティの中でも複雑な挙動をする値です。画面がスクロールされるとfixedのように振る舞い、スクロールされていないときはrelativeのように振る舞います
StickyContainerとStickyItem
stickyを理解するためにはStickyContainerとStickyItemの関係について知っておく必要があります。
要素にposition:stickyを指定すると、その要素がStickyItemになります。そして、StickyItemを含む親要素が自動的にStickyContainerになります。
StickyItemはStickyContainerの中でフロート状態になります。StickyContainerが表示されているときに画面をスクロールすると、StickyItemは指定位置に留まり続けます。スクロールを続けてStickyContainerが表示されなくなるとStickyItemも非表示になります。
わかりにくい部分なので、実際のコードを見てみましょうか
stickyのコード例
HTMLタグ
<body>
<div>
<h2>見出し</h2>
<p>文章A</p>
</div>
<div class="oya">
<div class=”ko”>stickyです☆</div>
<p>文章B</p>
</div>
<div>
<p>文章C</p>
</div>
</body>CSS
p { height : 700px; background-color : #F8F8F8; }
.ko { position : sticky; top : 0; background-color : #F9BB2B; }この例を実際に動かしてみるとstickyの挙動がわかります。見出しや文章Aが表示されているときは「stickyです☆」が表示されません。スクロールしてoya要素が見えたとき「stickyです☆」が表示されます。
oya要素が終わるまでの間はスクロールしても「stickyです☆」が表示され続けます。oya要素のtop:0の位置に張り付いています。
さらにスクロールしてoya要素が画面外になると「stickyです☆」も表示されなくなります。このように、親要素が見えている間だけposition:fixedのように固定表示されるのがstickyの仕様です。
stickyの使用例
stickyはしばしばヘッダメニューの固定に使われます。ヘッダメニューを固定するときは先ほどのコード例とは違った形になりますので、ヘッダメニュー固定の例も紹介しておきます。
HTMLタグ
<body>
<div class=”zentai_box”>
<div class=”menu”>ヘッダメニュー</div>
<h2>見出し</h2>
<p>コンテンツ</p>
</div>
</body>CSS
.menu { position : sticky; top : 0; }ヘッダメニューを固定するときはサイトコンテンツを1つのボックスで囲みます。その直後にヘッダメニューを配置し、position:stickyを設定します。
親要素が表示されている間、スクロールでついてくるのがstickyの挙動でしたね。この例ではコンテンツの最初から最後までが親要素に囲われているため、常にヘッダメニューが画面上部に留まります。
コンテンツを親要素で囲むと、position:fixedと同じ感覚でstickyを使うことが可能です。
また、top:0の部分をbottom:0に変えると画面下に留まるメニューが作れます。stickyを使えばフッタメニューやサイドメニューなど、あらゆる固定表示に対応できます。
stickyが動かないときの対処法
子供要素にstickyを指定したのに上手く動作しないことがあります
原因として考えられるのは、sticky要素が親要素の中で唯一のアイテムであることです。
以下のように、親要素とposition:stickyの要素だけで構成されているとstickyは動作しません。
<div class="oya">
<div class=”ko”>stickyです☆</div>
</div>stickyはあくまでも親要素の中でのフロート状態です。親要素のエリアサイズと子要素のエリアサイズが同じであるため、フロートする範囲がないとみなされます。
stickyが動かないときは親要素エリアサイズと子要素エリアサイズが同じになっていないかを確認してみましょう。
これは実際に書いて表示例を見てみないとわからなさそうだねー
そうですね。 僕も復習をかねて実際に書いてみます
そうですね。CSSは実際に書いて身につくのでぜひ実践してみてください
CSSの学習：positionまとめ
今回はCSSのpositionプロパティの使い方についてみていきました
今回も頑張りましたね
また、賢くなったー
positionには複雑な仕様もありますが、理解できるととても便利なプロパティです。positionが上手く動かないときは、absoluteとrelativeをセットで使うなどの基本的なルールを見直しましょう。
また、position:stickyはCSSバージョン3で新しく追加された値です。ブラウザによって対応が異なる場合もあるので、stickyを使うときはブラウザ対応の状況もチェックしてみてください。
次回は「入門９：【CSS/display】の使い方・注意点をすぐに理解したい人へ」を解説しますよ
よーし、次いってみよー