青訓営 |「CSSレイアウト」

レイアウト（layout）#

コンテンツのサイズと位置を決定するアルゴリズム
要素、コンテナ、兄弟ノード、コンテンツなどの情報に基づいて計算する
CSS 基礎ボックスモデルの紹介 - CSS（カスケーディングスタイルシート） | MDN (mozilla.org)

ドキュメントのレイアウト（lay out）を行うとき、ブラウザのレンダリングエンジンは、標準の一つである CSS 基礎ボックスモデル（CSS basic box model）に基づいて、すべての要素を矩形のボックス（box）として表現します。CSS はこれらのボックスのサイズ、位置、属性（色、背景、ボーダーサイズなど）を決定します。
各ボックスは四つの部分（または領域）で構成され、その効用はそれぞれの境界（Edge）によって定義されます（原文：defined by their respective edges、収容、包含、制限などを意味する可能性があります）。図のように、ボックスの四つの構成領域に対応して、各ボックスには四つの境界があります：コンテンツ境界 Content edge、パディング境界 Padding Edge、ボーダー境界 Border Edge、マージン境界 Margin Edge。

width#

content box の幅を指定します。値は長さ、パーセント、auto などが取れ、パーセントは content box の幅に対して相対的です。

height#

content box の高さを指定します。値は長さ、パーセント、auto などが取れ、パーセントは content box の高さに対して相対的です。weight/height を使用する場合、パーセントを指定する際は content box の幅 / 高さを指定する必要があります。さもなければ効果がありません。

padding#

四つの方向の内側の余白を指定します。そのパーセントはコンテナの幅に対して相対的です。詳細は padding - CSS（カスケーディングスタイルシート） | MDN (mozilla.org)を参照してください。

一つの値を指定した場合、その値はすべての四つの辺の内側の余白に適用されます。
二つの値を指定した場合、最初の値は上辺と下辺の内側の余白に適用され、二つ目の値は左辺と右辺に適用されます。
三つの値を指定した場合、最初の値は上辺に適用され、二つ目の値は右辺と左辺に、三つ目は下辺の内側の余白に適用されます。
四つの値を指定した場合、順に（時計回り）上辺、右辺、下辺、左辺の内側の余白として適用されます。

margin#

四つの方向の外側の余白を指定します。そのパーセントはコンテナの幅に対して相対的です。詳細はmargin - CSS（カスケーディングスタイルシート） | MDN (mozilla.org)を参照してください。

一つの値を指定した場合、その値はすべての四つの辺の外側の余白に適用されます。
二つの値を指定した場合、最初の値は上辺と下辺の外側の余白に適用され、二つ目の値は左辺と右辺に適用されます。
三つの値を指定した場合、最初の値は上辺に適用され、二つ目の値は右辺と左辺に、三つ目は下辺の外側の余白に適用されます。
四つの値を指定した場合、順に（時計回り）上辺、右辺、下辺、左辺の外側の余白として適用されます。
マージンの重複：外側の余白の重複 - CSS（カスケーディングスタイルシート） | MDN (mozilla.org)。隣接する二つの要素間の外側の余白が重複し、垂直方向で境界が折り重なり、最大の境界範囲が残ります。

border#

ボーダーを指定します。border-width は幅を指定し、border-style はタイプ（実線 / 点線）を指定し、border-color はボーダーの色を指定します。通常、三者を組み合わせて短縮形として border と記述します。MDN の説明はborder - CSS（カスケーディングスタイルシート） | MDN (mozilla.org)を参照してください。

ボーダーの巧妙な使い方：三角形を作成する
- まず四つのボーダーに異なる色を設定します。角が斜線で切り取られていることがわかります。
- コンテナの高さと幅が 0 のとき、図のように見ることができます。
- 他のボーダーの色を透明（transport）に設定すると、赤い三角形が作成されることがわかります。

box-sizing#

box-sizing - CSS（カスケーディングスタイルシート） | MDN (mozilla.org)

CSS ボックスモデルのデフォルト定義では、要素に設定されたwidthとheightは、その要素のコンテンツ領域にのみ適用されます。この要素にボーダーborderやpaddingがある場合、画面に描画されるときのボックスの幅と高さは設定されたボーダーと内側の余白の値が加算されます。つまり、要素の幅と高さを調整する際には、その要素のボーダーと内側の余白に常に注意する必要があります。レスポンシブレイアウトを実現する際、この特性は特に厄介です。

box-sizing プロパティはこれらの挙動を調整するために使用できます：

content-box はデフォルト値です。要素の幅を 100px に設定すると、その要素のコンテンツ領域は 100px の幅を持ち、ボーダーと内側の余白の幅は最終的に描画される要素の幅に加算されます。
border-box はブラウザに対して、設定したボーダーと内側の余白の値が幅に含まれることを伝えます。つまり、要素の幅を 100px に設定すると、この 100px はボーダーと内側の余白を含み、コンテンツ領域の実際の幅は幅から（ボーダー + 内側の余白）の値を引いたものになります。ほとんどの場合、これにより要素の幅と高さを設定しやすくなります。

overflow#

overflow - CSS（カスケーディングスタイルシート） | MDN (mozilla.org)

CSS プロパティ overflow は、要素の内容がブロックフォーマットコンテキストに収まらない場合に何をするかを定義します。これはoverflow-xとoverflow-yのショートハンドプロパティです。

これを auto に設定すると、内容が多すぎる場合にスクロールバーが表示され、それ以外の場合は表示されません。また、overflowを効果的にするためには、ブロックレベルのコンテナに指定された高さ（heightまたはmax-height）が必要です。または、white-spaceをnowrapに設定する必要があります。

ブロックレベル要素#

ブロックレベル要素 - HTML（ハイパーテキストマークアップ言語） | MDN (mozilla.org)

ブロックレベル要素は、その親要素（コンテナ）の水平スペース全体を占有し、垂直スペースはその内容の高さに等しく、通常、ブラウザはブロックレベル要素の前後に新しい行を開始します。

一般的なものには body、article、div、main、section、h1-h6、p、ul、li があります。
display: block

インライン要素#

インライン要素 - HTML（ハイパーテキストマークアップ言語） | MDN (mozilla.org)

インライン要素は、その対応するタグの境界が含むスペースのみを占有します。
インライン要素は他のインライン要素と一緒に配置され、ボックスモデルの width、height プロパティを使用しません。

一般的なものには span、em、strong、cite、section、code などがあります。
display: inline

display プロパティについては、その説明はdisplay - CSS（カスケーディングスタイルシート） | MDN (mozilla.org)にあります：

display プロパティは、要素の内部および外部の表示タイプ display types を設定できます。要素の外部表示タイプ outer display types は、その要素がフローレイアウトでどのように表示されるかを決定します（ブロックレベルまたはインライン要素）；要素の内部表示タイプ inner display types は、その子要素のレイアウトを制御できます（例えば：フローレイアウト、グリッドまたはフレックス）。

block ブロックレベルボックス
inline インラインボックス
inline-block 自身はインラインであり、インラインボックス内に配置でき、幅と高さを設定でき、全体として複数行に分割されることはありません。
none レイアウト時に完全に無視されます。

通常のフロー（Normal Flow）#

ルート要素、浮動要素、絶対位置の要素は通常のフローから外れ、他の要素は通常のフロー内にあります（in-flow）。通常のフロー内のボックスは、特定のレイアウトコンテキストに参加します。
行レベルのレイアウトコンテキスト、ブロックレベルのレイアウトコンテキスト、テーブルレイアウトコンテキスト、フレックスレイアウトコンテキスト、グリッドレイアウトコンテキスト……

インラインフォーマットコンテキスト（Inline formatting context）#

インラインフォーマットコンテキスト（Inline formatting context） - CSS（カスケーディングスタイルシート） | MDN

インラインフォーマットコンテキストは、ウェブページのレンダリング結果の一部です。その中で、各インラインボックス（inline boxes）は一つずつ並び、その並び順は書き方のモード（writing-mode）の設定によって決まります：

水平書き方モードの場合、各ボックスは左から水平に並びます。

垂直書き方モードの場合、各ボックスは上から水平に並びます。

下の例では、黒い境界を持つ二つの (<div>) 要素がブロックフォーマットコンテキスト（block formatting context）を構成し、その中の各単語はインラインフォーマットコンテキストに参加します。水平書き方モードでは各ボックスが水平に並び、垂直書き方モードでは各ボックスが垂直に並びます。

行レベルのボックスのみを含むコンテナは IFC を作成し、IFC 内のタイポグラフィルールは次のようになります。
- ボックスは一行内に水平に配置され、一行に収まらない場合は改行されます。
- text-align は一行内のボックスの水平揃えを決定します。
- vertical-align は行内のボックスの垂直揃えを決定します。
- 浮動要素を避けます。
段落は実際には一連の行ボックスの集合であり、これらの行ボックスはブロックの方向に配置されます。
インラインボックス（inline box）が複数行に分割されると、マージン、ボーダー、パディングの設定は断裂部分では効果を発揮しません。次の例には、(<span>) 要素が含まれており、一連の単語を包み、二行を占めています。断裂部分で<span>のボーダーも断裂していることがわかります。

ブロックフォーマットコンテキスト（Block Formatting Context）#

ブロックフォーマットコンテキスト | MDN

ブロックフォーマットコンテキスト（BFC）
ボックスは上から下に配置されます。
BFC 内の垂直マージンは合併されます（前述のマージンの重複を参照、外側の余白の重複）。
BFC 内のボックスのマージンは外部と合併しません。
BFC は浮動要素と重なりません。

フレックスボックス#

フレックスレイアウトの基本概念 | MDN

新しいレイアウトコンテキスト
子ボックスの制御が可能です：
- 配置の流れ（flex-direction）
  - デフォルト（row）：左から右へ →
  - row-reverse：右から左へ←
  - column：上から下へ ↓
  - column-reverse：下から上へ↑
- 配置の順序
- ボックスの高さと幅
- 水平および垂直方向の揃え（厳密には、主軸と交差軸方向の揃え、justify-contentと align-itemsを参照）
- 折り返しを許可するかどうか（wrap 、nowrap 、wrap-reverse）
- その他、フレックス要素のプロパティ（flex-grow、flex-shrink、flex-basis）などがあります。
フレックスの子項目は BFC を作成します。

主軸と交差軸の揃えについて再度説明します。デフォルトの左から右に配置（row）の場合、主軸は水平軸、交差軸は垂直軸です。主軸（justify-content）の揃え方には以下のようなものがあります（初期値は flex-start）：

flex-start 主軸の開始位置で揃えます。
flex-end 主軸の終了位置で揃えます。
center 主軸で中央揃えします。
space-between 主軸の両端で揃え、中間にスペースを挿入します。
space-around 主軸の両側にもスペースを追加し、要素の占有サイズは変わりません。
space-evenly 両端と中央のスペースのサイズが同じです。

交差軸の揃え方は以下の通りです（初期値は stretch）：

flex-start：交差軸の開始位置で揃えます。
flex-end：交差軸の終了位置で揃えます。
center：交差軸で中央揃えします。
stretch：交差軸で要素を引き伸ばしてコンテナに合わせます。
baseline：両端と中央のスペースのサイズが同じです。

フレックス内の特定の要素に特別な設定をしたい場合は、align-self プロパティを設定できます。図のように。

orderを使用して、レイアウト時の要素の順序を設定できます。

ウェブページが伸びたり縮んだりすると、フレックスコンテナ内の内容はどのように変わるのでしょうか？

flex-grow を設定することで、余分なスペースがあるときに拡張能力を制御し、flex-shrink を設定することで、余分なスペースが不足しているときに収縮を制御できます。
flex-growプロパティは、スペースを比率で配分できます。最初の要素のflex-grow値が 2、他の要素の値が 1 の場合、最初の要素は 2/4 を占め、他の二つの要素はそれぞれ 1/4 を占めます。
flex-shrinkは、flex-growプロパティと同様に、異なる値を与えることでフレックス要素の収縮の程度を制御できます。flex-shrinkプロパティに大きな数値を与えると、小さな数値を与えた同級要素よりも収縮の程度が大きくなります。
flex-basisは、伸縮がないときの基準の長さです。

フレックスレイアウトについて、以前 codepen でデモプロジェクトを見たことがあります。各プロパティの対応する効果を理解するために、ぜひ自分で試してみてください：Flexbox playground (codepen.io)

グリッドレイアウト#

Grid - 用語集 | MDN (mozilla.org)

display：grid は要素をブロックレベルのグリッドコンテナにします。
grid-template 関連のプロパティを使用して、コンテナをグリッドに分割できます。
- grid-template-rows はグリッド行の次元に基づいて、グリッドラインの名前とグリッドトラックのサイズを定義します。
- grid-template-columns はグリッド列の次元に基づいて、グリッドラインの名前とグリッドトラックのサイズを定義します。
- minmax(min, max)を定義できます。これはサイズ範囲を定義するためのプロパティで、min 値以上、max 値以下である必要があります。max 値が min 値より小さい場合、その値は min 値として扱われます。最大値はグリッドトラックの係数値frとして設定できますが、最小値は設定できません。
- 上記のグリッドトラックのサイズの弾力係数を定義するために、単位frを使用することもできます。frを定義した各グリッドトラックは、残りの利用可能なスペースを比例配分します。外側がminmax()で表されている場合、それは自動最小値（すなわちminmax(auto, <flex>)）になります。
- 要素を複数行 / 列にまたがせたいですか？
  - グリッドライン
  - グリッドエリア
  - grid-template-columns-start/grid-template-columns-end などを使用し、grid-area として簡略化できます。

授業で書いた小さなデモを参考にしてください：Grid (codepen.io)、直感的な例でもあります。

まず、コンテナを 4 行 2 列のグリッドに設定します。

#container {
  width: 300px;
  height: 500px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
}

次に、A という要素を設定し、最初のグリッド行線から第 3 のグリッド行線まで、つまり二行を占め、列も同様に二列を占めるようにします。

.a {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 3;
  grid-column-end: 3;
}

簡略化すると：

.a {
  grid-area:1/1/3/3;
}

図のように、A は二行二列を占めています。

さらに変更を加え、a を 2-4 行 / 列に変更し、第 2、3 行 / 列を占め、b を 1-3 行 / 列に変更し、第 1、2 行 / 列を占めるようにします。

.a {
  grid-area:2/2/4/4;
}
.b {
  grid-area:1/1/3/3;
}

浮動（float）#

初期には、画像とテキストの回り込みに float を利用していましたが、今は理解しておくだけで大丈夫です。詳細はfloat - CSS（カスケーディングスタイルシート） | MDN (mozilla.org)を参照してください。

浮動はテキストとインライン要素がそれを回り込むことを許可します。浮動プロパティを持つ要素は、ウェブページの通常の流れ（ドキュメントフロー）から除外されます。
要素が浮動すると、通常のドキュメントフローから外れ、左または右に平行移動し、コンテナの境界に達するか、別の浮動要素に達するまで移動します。
浮動を使用した後、次の要素を任意の浮動要素の下に強制的に移動させたい場合は、clearプロパティを使用する必要があります。

position 定位#

positionプロパティは、文書内の要素の位置決め方法を指定するために使用されます。top、right、bottom、およびleftプロパティは、その要素の最終位置を決定します。

position には以下のような位置決めタイプがあります：

static：デフォルト値、非位置決め要素
relative：自身の元の位置からオフセットし、文書フローから外れない
absolute：絶対位置決め、非 static の祖先要素に対して位置決め
fixed：ビューポートに対して絶対位置決め

相対位置（relative）#

position

通常のフロー内でレイアウトします。
自身が本来いるべき場所に対してオフセットします（top、left、bottom、right）。
フロー内の他の要素は、オフセットされていないかのようにそのままレイアウトされます。

絶対位置（absolute）#

position

通常のフローから外れます。
最近の非 static の祖先に対して位置決めされます。
- 例えば、アイコンにバッジを作成する場合、アイコンを positionに設定し、その後 position を absolute に設定してオフセットすることで実現できます。
フロー内の要素のレイアウトには影響を与えません。

提案と感想#

MDN と World Wide Web Consortium (W3C) CSS 仕様を十分に活用してください。

好奇心を持ち、ブラウザの開発者ツールを活用してください。

継続的に学び、CSS の新機能はまだまだ登場しています。

これは自分の CSS 学習の整理でもあり、上記のレイアウトについては、主に多く使い、多く調べ、実践の中で成長することです。多く使うことで自然に覚え、普段興味のあるフロントエンドプロジェクトも学び、優れたプロジェクトがどのようにレイアウトされているかを見ていくことが重要です。