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)”にあると言います。

横書きと縦書き

CSS2によるレイアウトは水平書字モード(横書き)のみが想定されていましたが、CSS3では垂直書字モード(縦書き)によるレイアウトが可能になりました。

水平書字モードと垂直書字モードではテキストが流れる方向だけでなく、フロー・レイアウトでボックス配列される方向も変わります。なので、ボックスが並ぶ方向などを表す時はこれまでのような“水平方向”と“垂直方向”ではなく、“ブロック軸方向”や“インライン軸方向”のように書字モードに合わせた言葉を使用します。

ブロック軸方向はブロック整形コンテキストによってブロック・レベルのボックスが並べられる方向で、水平書字モードでは垂直方向、垂直書字モードでは水平方向です。

インライン軸方向はインライン整形コンテキストによってインライン・レベルのボックスが並べられる方向で、水平書字モードでは水平方向、垂直書字モードでは垂直方向です。

フロー・レイアウトでボックスが配列される方向以外にも、レイアウトについての様々な規則が書字モードによって入れ替わります。

ブロック・レベルのレイアウト

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

ブロック・レベルのボックスはブロック軸方向に順番に並べられていきます。

ブロック・レベルのボックスはインライン軸方向の幅いっぱいに領域を占有します。“width”プロパティによってボックスの大きさが制約された場合でもボックスのマージンがインライン軸方向の余った空間を占有します。

ブロック整形コンテキストにはブロック・レベルのボックスだけが含まれます。

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

インライン・レベルのレイアウト

ブロック・コンテナの中にテキストや“インライン・レベル”のボックスしかない場合には“インライン整形コンテキスト(Inline Formatting Contexts)”が生成されます。インライン整形コンテキストに含まれるボックスやテキストはインライン軸方向に順番に並べられます。

インライン整形コンテキストに含まれるボックスやテキストなどのインライン・レベルのボックスは一つ一つが行を形成する“行ボックス(Line Box)”に内包されます。

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

行ボックスのブロック軸方向の大きさは、行ボックスに含まれるボックスがすべて収まる大きさになります。同じインライン整形コンテキストの行ボックスでもブロック軸方向の大きさはそれぞれ異なる場合があります。文字の大きさがすべて同じであれば行ボックスの大きさはすべて同じになりますが、文字の大きさが異なるテキストや置換要素などが含まれる場合には行ボックスの大きさが不揃いになります。

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

行ボックスに含まれるインライン・レベルのボックスが行ボックス内の使用可能な空間よりも長い場合にはそのボックスは複数に分割され、分割された部分は次の行ボックスに配置されます。“white-space”プロパティによって折り返しが禁止されている場合やボックスが分割することができない置換要素やインライン・ブロック(“display: inline-block;”)である場合には行ボックスからはみ出すことがあります。

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