ボックスモデルを理解できたことで、
CSSで「要素の大きさ」と「余白」は説明できるようになりました。
次に出てくる疑問は、次のようなものです。
・要素を横に並べたい
・特定の位置に固定したい
・なぜ勝手に改行されるのか分からない
これらを制御するのが、
display と position です。
この記事では、
CSSレイアウトの基礎となる
display と position の考え方を整理します。
この記事で学べること
・displayとは何か
・ブロック要素とインライン要素
・positionの基本
・relative / absolute / fixed の違い
・レイアウトで迷わない考え方
displayとは何か
displayは、
要素の表示形式を決めるプロパティです。
「この要素は、
どんな並び方をするか」
を指定します。
HTMLタグには、
初期状態の display が決まっています。
ブロック要素とは
ブロック要素は、
縦に並ぶ要素です。
特徴
・横幅いっぱいに広がる
・前後で改行される
代表例
・div
・p
・h1〜h6
何も指定しなければ、
これらは縦に積み重なります。
インライン要素とは
インライン要素は、
横に並ぶ要素です。
特徴
・内容の幅だけを持つ
・改行されない
代表例
・span
・a
・strong
文章の流れの中で使われます。
なぜ要素が横に並ばないのか
初心者が最初につまずくポイントです。
原因はシンプルで、
ブロック要素は縦に並ぶ仕様だからです。
div を並べても横に並ばないのは、
CSSが正しく動いていないのではなく
「仕様どおり動いている」状態です。
displayで並び方を変える
displayを指定することで、
要素の並び方を変更できます。
よく使われる指定は次のとおりです。
・block
・inline
・inline-block
・none
inline-blockの考え方
inline-blockは、
横に並びつつ、サイズ指定ができる
表示形式です。
・横並びにしたい
・幅や高さも指定したい
といった場合に使われます。
display:none の注意点
display:none を指定すると、
要素は 完全に非表示 になります。
・画面に表示されない
・場所も存在しない
「見えないだけ」ではなく、
存在しない扱いになる点に注意しましょう。
positionとは何か
positionは、
要素の配置方法を決めるプロパティです。
「どこを基準に、
どこへ配置するか」
を指定します。
positionを使わない場合、
要素は通常の流れに従って配置されます。
positionの種類
よく使われる position は、
次の4つです。
・static
・relative
・absolute
・fixed
この違いを理解することが重要です。
static（初期状態）
staticは、
positionの初期値です。
特別な指定はなく、
HTMLの流れ通りに配置されます。
relative（相対位置）
relativeは、
元の位置を基準に動かす 指定です。
ポイント
・元の場所は保持される
・微調整に使われる
後述する absolute の
基準としても重要です。
absolute（絶対位置）
absoluteは、
特定の基準を元に配置する 指定です。
特徴
・通常の流れから外れる
・基準は親要素になることが多い
absoluteを使う場合、
親要素に relative を指定する
というセット運用が基本です。
fixed（画面固定）
fixedは、
画面を基準に固定表示する指定です。
使いどころ
・ヘッダー固定
・追従メニュー
スクロールしても、
位置が変わらないのが特徴です。
なぜpositionが難しく感じるのか
理由は、
基準が分かりにくい からです。
・どこを基準にしているのか
・通常の流れに含まれるか
この2点を意識することで、
positionの理解は一気に楽になります。
display と position の使い分け
考え方を整理します。
・並び方を変えたい
→ display
・位置を調整したい
→ position
まず display、
それでも足りなければ position
という順で考えると混乱しにくくなります。
Flexboxは次のステップ
ここまでの内容は、
Flexboxを理解するための前提知識です。
いきなりFlexboxに進むと、
「なぜそう動くのか」が分からなくなります。
基礎を押さえたうえで進むことが、
遠回りに見えて最短ルートです。
まとめ
display と position は、
CSSレイアウトの基本中の基本です。
・display：並び方を決める
・position：配置基準を決める
・ブロックとインラインの違いを理解する
ここまで理解できれば、
CSSレイアウトの土台は完成です。
次は、
現代CSSレイアウトの主役である Flexbox
に進みます。
次に読むべき記事
▶ 次の記事
4-6 Flexboxの基本
▶ 関連記事
4-4 ボックスモデルを完全に理解する
コメント