このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

CSSのレイアウト方法

記事Aug. 9th,2021
CSSを使用したウェブページのレイアウト方法についての解説。基本のレイアウト方法であるフロー・レイアウトについて
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

CSSのレイアウト方法

CSSによるレイアウト

CSSを使用して描画される文書の要素は様々な方法によってレイアウトされて表示されます。要素がどのようにしてレイアウトされるかはdisplay”プロパティによって決められます。

代表的なレイアウト方法は“フロー・レイアウト”で、要素は指定された書字方向に従い、コードに記述された順番で並べられます。フロー・レイアウトは特にレイアウトの方法が指示されていない場合に使用される既定のレイアウト方法で、ほとんどの要素はこの方法で配置されます。

他のレイアウト方法にはフレキシブル・ボックス・レイアウトやグリッド・レイアウト、マルチカラム・レイアウトがあり、要素を複数の段に分けてレイアウトしたり、格子状にレイアウトしたりすることができます。また、要素はfloat”プロパティによる浮動化やposition”プロパティによる位置指定で通常とは異なる場所に配置することができます。

文書の要素がすべて同じ方法でレイアウトされるとは限りません。要素はその中に自身が参加しているレイアウト方法とは異なるレイアウト方法で子孫要素を配置することができ、一つの文書には複数のレイアウト方法を混在させることができます。

レイアウト方法の一覧

レイアウト方法

レイアウト方法 説明
フロー・レイアウト 既定のレイアウト方法
テーブル・レイアウト
フレキシブル・ボックス・レイアウト
グリッド・レイアウト
ルビ・レイアウト
マルチカラム・レイアウト コンテンツを複数の列に分けて配列する

配置位置の変更

レイアウト方法 説明
位置指定
浮動化

フロー・レイアウト

“フロー・レイアウト”とは?

要素や擬似要素によって生成されたボックスは、display”プロパティposition”プロパティなどによって他のレイアウト方法が指定されていなければ“通常フロー(Normal Flow)”に従って配置されます。通常フローによるレイアウトは“フロー・レイアウト(Flow Layout)”とも呼ばれます。

フロー・レイアウトは1個以上の“ブロック・コンテナ(Block Container)”が入れ子になって構成されます。ブロック・コンテナの中にはブロック・レベル(display: block;)のコンテンツだけを含む“ブロック整形コンテキスト”、もしくはインライン・レベル(display: inline;)のコンテンツだけを含む“インライン整形コンテキスト”のどちらかが内包されます。

通常フローで順番通りに配置されたボックスは“フロー内(In-flow)”にあると言い、浮動化されたボックス(float: none;でない)や絶対位置が指定されたボックス(position: absolute;)など、通常フローで本来配置される位置とは異なる位置へ移動されたボックスは“フロー外(Out-of-flow)”にあると言います。

ブロック整形コンテキスト

浮動化要素(float: none;でない)や絶対位置指定要素(position: absolute;)、ブロック・ボックスでないブロック・コンテナ(display: inline-block;など)、overflow”プロパティの値が“visible”以外であるブロック・ボックスはその中に新たな“ブロック整形コンテキスト(Block Formatting Contexts)”を生成します。

ブロック整形コンテキストに含まれるボックスはブロック方向に順番に並べられます。例えば、書字方向が横書きの場合は上から下へボックスが並べられます。

ブロック整形コンテキストに含まれるボックスはwidth”プロパティなどによってボックスの大きさが指定されていなければボックスはインライン方向の幅いっぱいに領域を占有します。width”プロパティによってボックスの大きさがインライン方向の幅よりも小さい大きさに指定されたとしてもボックスのマージンがインライン方向の余った空間を占有します。

ブロック整形コンテキストのイメージ

ブロック・コンテナの中にブロック・レベルのコンテンツとインライン・レベルのコンテンツが混在している場合には、インライン・レベルのコンテンツを内包するブロック・レベルアノニマス・ボックスが生成され、ブロック・コンテナの中にブロック・レベルのコンテンツのみがあるかのように扱われます。

インライン・レベルのコンテンツを内包するアノニマス・ボックス

インライン整形コンテキスト

インライン整形コンテキスト(Inline Formatting Contexts)”に含まれるボックスやテキストはインライン方向に順番に並べられます。例えば、書字方向が横書きの場合は左から右、もしくは右から左へボックスが並べられます。

インライン・レベルのボックスはそれぞれが行を形成する“行ボックス(Line Box)”に内包されます。

インライン整形コンテキストのイメージ

行ボックスに含まれるインライン・レベルのボックスが行ボックスの長さよりも長い場合は複数のボックスに分割され、複数の行ボックスに分けて配置されます。white-space”プロパティによって折り返しが禁止されている場合やボックスが置換要素である場合などはボックスが分割できないため、ボックスは行ボックスからはみ出します。

インライン・レベルのボックスが複数の行ボックスに跨って分割された場合、分割された箇所にはマージンボーダーパディングは反映されません。

同じインライン整形コンテキストに含まれる行ボックスのインライン方向の長さは基本的にはすべて同じで、包括ブロックのインライン方向の大きさと同じです。ただし、浮動化要素(float: none;でない)がある場合は行ボックスは浮動化要素とは重ならず、その部分の行ボックスが短縮されます。

浮動化要素と行ボックスのイメージ

インライン方向に並ぶボックスが行ボックスを埋めるには足りない場合はtext-align”プロパティに従って行ボックスの左右どちらかの端に寄せるか、余った部分の空白を分配して両端揃えにします。

行ボックスのブロック方向の大きさは、行ボックスに内包するすべてのボックスが収まる大きさになります。つまり、すべての文字の大きさが同じであれば行ボックスの大きさは同じになりますが、文字の大きさが異なるテキストや置換要素などが含まれる場合には行ボックスの大きさが不揃いになります。

インライン・レベルのボックスはvertical-align”プロパティの値に従って行ボックス内でのブロック方向の位置が揃えられます。この時、テキストのベースラインに揃えられたり、ボックスの上端や下端が揃えられたりします。

仕様書

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク