概要
MDNのCSS レイアウト入門を参考に、CSSレイアウトの基本のテクニックの概要を自分なりにまとめました。それぞれの項目について詳しく知りたい場合は、各項目の冒頭に記載してあるリンク(MDNのCSS レイアウトの各章)を参照してください。
「CSSレイアウト」とは
ビューポートや互いを基準にしてボックスを適切な場所に配置する方法
例えば、「赤い四角を画面の右半分に、青い四角を画面の左半分に配置する」「画像の右側に文章を配置し、それを1セットとして縦並びに配置する」などがCSSレイアウトということになります。四角を赤くしたり、画像や文字のサイズを整えるのは、「レイアウト」の範囲外です。
通常フロー
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Normal_Flow
ブラウザがデフォルトでHTML
ページをレイアウトする方法です。
特にスタイルを設定していない状態を指します。
See the Pen KKpKaaZ by mmkcoins (@mmkcoins) on CodePen.
display
プロパティ
https://developer.mozilla.org/ja/docs/Web/CSS/display
要素が通常フローでどのように振る舞うかを変更するプロパティです(block
, inline
など)。
またはdisplay
値によってオンにされるレイアウト方法全体を指します(flex
など)。
任意の要素に設定できます。
- ブロック要素(
block
): 縦並び - インライン要素(
inline
): 横並び
See the Pen mdJdRmV by mmkcoins (@mmkcoins) on CodePen.
フレックスボックス
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Flexbox
Flexible Box Layout Module
の略です。
子項目にflex
プロパティ(向き、要素の大きさなど)を追加できます。
See the Pen eYNYgRL by mmkcoins (@mmkcoins) on CodePen.
グリッド
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Grids
行と列に物を並べる(2次元)用に設計されています。
子項目にプロパティを設定しなくても自動で配置されます。開始ラインや終了ラインを設定することで柔軟に配置できます。
See the Pen eYNYgjb by mmkcoins (@mmkcoins) on CodePen.
フロート
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Floats
設定すると、要素が左または右に移動し、通常フローから除かれます。
また、フロート項目を囲んでいるコンテンツが周囲に浮き(回り込み)ます。
See the Pen zYGYNVg by mmkcoins (@mmkcoins) on CodePen.
位置指定(position
プロパティ)
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Positioning
通常フローの時に要素が配置されていた場所から、別の場所に移動できます。
静的位置指定 (Static Positioning)
デフォルトです。特別な位置指定がありません。
相対位置指定 (Relative Positioning)
通常フロー内の位置に相対的に移動できます。
絶対位置指定 (Absolute Positioning)
ページの通常のレイアウトフローから完全に外れます。
<html>
の端に相対的な位置に固定できます。
固定位置指定 (Fixed Positioning)
ブラウザのビューポート基準で要素を固定します。
粘着位置指定 (Sticky Positioning)
ビューポートからオフセットにぶつかるまではstatic
の、それ以降はfixed
の挙動をします。
割と最近できたプロパティです。
See the Pen RwPwpbp by mmkcoins (@mmkcoins) on CodePen.
表レイアウト
表をスタイルするための機能です。
display: table-cell;
のような書き方をすると表レイアウトになります。
表以外のレイアウトにも使えるようです(表レイアウトでページレイアウトを行っていた時代もあった、らしい)。
See the Pen rNVNyaE by mmkcoins (@mmkcoins) on CodePen.
段組みレイアウト
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout
新聞のように複数列にレイアウトする方法です。