整形コンテキストの紹介

この記事では整形コンテキストの概念を紹介します。ブロック整形コンテキスト、インライン整形コンテキスト、フレックス整形コンテキストなど、いくつかの種類があります。どのように動作するのか、これらの動作をどのように利用できるのかについても紹介します。

ページ上のすべてのものが整形コンテキスト、またはコンテンツを特定の方法でレイアウトする際に定義されている領域の一部です。ブロック整形コンテキスト (BFC) は、子要素をブロックレイアウトの規則に則って配置し、フレックス整形コンテキストは、子要素をフレックスアイテムとして配置するなどです。それぞれの整形コンテキストは、そのコンテキストにあるときにどのようにレイアウトを行うかの特定の規則を持っています。

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

ブロックレイアウト規則を使用する文書の中で一番外側の要素は、最初の、あるいは初期ブロック整形コンテキストを確立します。これは、 <html> 要素のブロック内のすべての要素が、ブロックおよびインラインレイアウトの規則に従って、通常のフローに従ってレイアウトされることを意味します。ブロック整形コンテキスト (BFC) に参加する要素は、 CSS ボックスモデルによって概説された規則を使用します。これは、要素のマージン、境界、パディングが同じコンテキスト内の他のブロックとどのように相互作用するかを定義します。

新しいブロック整形コンテキストの生成

<html> 要素がブロック整形コンテキストを生成できる唯一の要素ではありません。どのブロックレベルの要素でも、特定の CSS プロパティを適用することで BFC を生成することができます。

新しい BFC は以下のような場面で生成されます。

  • float を使用して浮動状態になった要素
  • 絶対位置指定の要素 (position: fixed または position: sticky を含む)
  • display: inline-block の要素
  • 表のセル、または display: table-cell が指定された要素で、 display: table-* プロパティを使用して生成された無名の表のセルを含む
  • テーブルのキャプション、または display: table-caption が付いた要素
  • overflow が visible 以外の値であるブロック要素
  • display: flow-root または display: flow-root list-item の要素
  • contain: layout, content, strict のいずれかの要素
  • フレックスアイテム
  • グリッドアイテム
  • 段組みコンテナー
  • column-span が all に設定された要素

これは、新しい BFC がメインレイアウトの中でミニレイアウトとなり、一番外側の文書のように動作するので便利です。 BFC はその中にすべてを含み、 float と clear は同じ整形コンテキスト内の項目にのみ適用され、マージンは同じ整形コンテキスト内の要素間でのみ相殺されます。

BFC が生成される例

新しい BFC を生成する効果を見るために、いくつかの例を見てみましょう。

下の例では、境界が適用された <div> の中に浮動要素があります。その <div> の内容は、その浮動要素の横に並んでいます。その浮動要素の内容は、その横にある内容よりも高さが高いため、 <div> の境界線がその浮動要素を通過するようになりました。フロー内とフローの外のガイドで説明されているように、浮動要素はフローから外れているので、 <div> の背景と境界には内容だけが含まれ、浮動要素は含まれません。

新しい BFC を生成すると浮動要素が収まります。これまでよく使われてきた方法は、 overflow: auto または初期値である overflow: visible 以外の値を設定することでした。

overflow: auto を設定することで、浮動要素を含む新しい BFC を生成しました。 <div> はレイアウト内のミニレイアウトになりました。すべての子要素はその中に収まります。

overflow を使って新しい BFC を生成する場合の問題点は、 overflow プロパティは、あふれた内容をどのように処理したいかをブラウザーに伝えるためのものだということです。このプロパティを純粋に BFC を作成するために使用した場合、意図せずにスクロールバーが現れたり、影がクリッピングされたりすることに気づくこともあるでしょう。さらに、 overflow を使用した理由が明らかにならないこともあるかもしれないので、将来の開発者からは理解しやすくない可能性があります。このような場合は、コードにコメントをつけて説明するのが良いでしょう。

display: flow-root を使用した明示的な BFC の生成

包含ブロックに display: flow-root (または display: flow-root list-item) を使用すると、問題を起こす副作用が発生することなく新しい BFC を生成することができます。

display: flow-root を <div> に指定すると、コンテナー内のすべてのものがそのコンテナーのブロック整形コンテキストに参加し、浮動要素が要素の底から飛び出すことはなくなります。

flow-root キーワードの名前は、新しいコンテキストがどのように作成され、そのフローレイアウト機能がどのように機能するかを考えると、本質的には (<html> にように) 新しいルート要素のような役割を果たすものを生成しているという事実を示しています。

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

インライン整形コンテキストは、他の整形コンテキストの中に存在する、段落のコンテキストと考えることができます。段落は、テキスト上で <strong>, <a>, <span> などの要素が使われた場合のようなインライン整形コンテキストを作成します。

ボックスモデルは、インライン整形コンテキストに参加している項目には完全には適用されません。横書きモードの行では、水平方向のパディング、境界、マージンが要素に適用され、テキストを左右に押しのけます。ただし、要素の上下のマージンは適用されません。水平のパディングや境界は適用されますが、インライン整形コンテキストでは、ラインボックスがパディングや境界によって押し広げられることはないため、上下の内容が重なる可能性があります。

その他の整形コンテキスト

このガイドはフローレイアウトを対象としているため、他のありうる整形コンテキストについては言及していません。そのため、どのような種類の整形コンテキストを作成しても、その整形コンテキスト内の要素の動作が変わることを理解しておくと便利です。この動作は常に仕様書に記述されており、ここ、 MDN にも記述されています。

まとめ

このガイドでは、ブロックおよびインライン整形コンテキストにおける詳細と、ブロック整形コンテキスト (BFC) を生成することの重要な目的を見てきました。次のガイドでは、通常フローがどのように様々な所持方向に対応するかを見ていきます。

関連情報