Tailwind CSS レイアウトクラス

Tailwind CSS は豊富なレイアウト関連クラスを提供しており、開発者は非常に柔軟な方法でページのあらゆる側面を制御できます。

次に、重要なレイアウト関連クラスをいくつか詳しく説明します。

1、アスペクト比 (Aspect Ratio)

アスペクト比クラスは、要素のアスペクト比を設定するのに役立ち、レスポンシブデザインで要素が伸びたり縮んだりするのを防ぎます。

主なクラス：

2、コンテナ (Container)

コンテナクラスは、コンテナ要素をさまざまな画面サイズにレスポンシブに適応させることができ、コンテンツの最大幅を設定するためによく使用されます。

主なクラス：

• container：要素をレスポンシブコンテナにします。
• mx-auto：コンテナを水平方向に中央揃えにします。

これらのクラスを使用すると、レスポンシブな最大幅を持つコンテナを作成できます。これはレイアウトを作成する際に非常に便利で、特に可読性を高めるためにコンテンツの幅を制限したい場合に役立ちます。

これらの例では、最初の<div>は常に幅100%を占め、2番目の<div>は大画面（lg）以上の画面サイズでは、その最大幅は1024pxに制限されます。mx-autoクラスは、コンテナを水平方向に中央揃えするために使用されます。

3、カラムレイアウト (Columns)

Columns クラスは、複数列レイアウトを実装するために使用されます。

列数と列の間隔を制御できます。

主なクラス：

• columns-{n}：列数を設定します。
• space-x-{size}：列間の間隔を設定します。

4、ページ分割

以下のクラスは、開発者が文書のページ分割と段組みレイアウトをより適切に制御し、印刷出力の可読性と美観を向上させるのに役立ちます。

主なクラス：

• break-after-{value}：ページ分割後の動作を制御します。
• break-before-{value}：ページ分割前の動作を制御します。
• break-inside-{value}：要素内部のページ分割動作を制御します。

上記のクラスは、印刷または段組みレイアウトにおけるコンテンツのページ分割または段組み動作を制御するために使用されます：

• break-after-autoブラウザが要素の後にページ分割または段組みを行うかどうかを決定できるようにします。
• break-after-avoidは、ブラウザに要素の後でのページ分割または段組みを可能な限り避けるように指示します。

上記のクラスは、印刷または段組みレイアウトにおけるコンテンツのページ分割または段組み動作を制御するために使用されます。

• break-before-autoブラウザが要素の前にページ分割または段組みを行うかどうかを決定できるようにします。
• break-before-avoidは、ブラウザに要素の前でのページ分割または段組みを可能な限り避けるように指示します。

上記のクラスは、印刷または段組みレイアウトにおいて、要素の内部でページ分割または段組みを許可するかどうかを制御するために使用されます。

• break-inside-autoブラウザが要素の内部でページ分割または段組みを行うかどうかを決定できるようにします。
• break-inside-avoidは、ブラウザに要素の内部でのページ分割または段組みを可能な限り避けるように指示します。

この例では、<div>要素は2列レイアウト（columns-2）に設定されており、4つの<p>段落が含まれています。2番目の<p>段落にはbreak-after-columnクラス。これにより、その段落の後に段組み（カラム）を強制しますが、改ページは許可されません。つまり、コンテンツが十分に多い場合、2番目の段落の後ろのコンテンツは、同じ列の次の行に続けるのではなく、新しい列から始まります。他の段落には特別な段組みの指示がないため、コンテンツに応じて自然に流れます。

5、テキストの改行

以下は、Tailwind CSS において、要素の断片が複数行・複数列・複数ページでどのようにレンダリングされるかを制御するためのユーティリティクラスと、対応する CSS プロパティです。

上記のクラスは、複数列レイアウトや改ページ時における要素の装飾（枠線や背景など）の表示を制御するために使用されます。

• box-decoration-clone各ボックスの断片に完全な装飾を表示させます。
• box-decoration-sliceボックスが分割される箇所で装飾を「切断」し、視覚的に連続した装飾を保ちます。

これらのユーティリティクラスは、開発者が複雑なレイアウトにおける要素の視覚効果をより適切に制御するのに役立ちます。

6、ボックスサイズ

Tailwind CSS は、要素のボックスモデル（box-sizing）を制御するための2つのユーティリティクラスを提供しています。

• box-border：パディングとボーダーを含めて要素の全体のサイズを計算します。
• box-content：パディングとボーダーを含めずに要素のサイズを計算します。

1、box-border

CSSプロパティ:

box-sizing: border-box;

box-border ユーティリティクラスを使用して、要素の box-sizing プロパティを border-box に設定します。つまり、要素に高さや幅を指定すると、ブラウザは要素のボーダーとパディングを含めて計算します。

要素のサイズが 100px × 100px で、2px のボーダーと 4px のパディングがある場合、要素の合計レンダリングサイズは 112px × 112px になります。

2、box-content

CSSプロパティ:

box-sizing: content-box;

box-content ユーティリティクラスを使用して、要素の box-sizing プロパティを content-box に設定します。つまり、ブラウザは要素に指定された幅または高さに加えて、ボーダーとパディングを追加します。

要素のサイズが 100px × 100px で、2px のボーダーと 4px のパディングがある場合、要素の実際のレンダリングサイズは 112px × 112px となり、内部のコンテンツ領域は 100px × 100px になります。

display プロパティ

display プロパティは、要素の表示タイプを制御し、要素がページ上でどのように表示されるかを決定します。

table、table-row、table-cell、table-caption、table-column、table-column-group、table-header-group、table-row-group、table-footer-group のユーティリティクラスを使用して、それぞれ対応するテーブル要素のように動作する要素を作成します。

フロート

float-*要素のフロート位置を制御します。通常、テキストを回り込ませるために使用します。

主なクラス:

フロートの解除

Tailwind CSS において、要素のフロート解除を制御するためのユーティリティクラスと、対応する CSS プロパティ：

isolate

これらのユーティリティクラスにより、開発者は要素の重ね合わせコンテキストの動作を制御し、要素とその子孫が重ね合わせの順序にどのように関与するかに影響を与えることができます。

isolate クラスは、要素の重ね合わせ順序が外部の要素の影響を受けない隔離された環境を作成するのに役立ちます。一方、isolation-auto は、ブラウザがデフォルトのルールに従って重ね合わせコンテキストを処理できるようにします。

isolate および isolation-auto ユーティリティクラスを使用して、要素が明示的に新しい重ね合わせコンテキストを作成するかどうかを制御します。

object-fit

以下は、置換要素のコンテンツの拡大・縮小方法を制御するためのユーティリティクラスと、対応する CSS プロパティです。

object-cover を使用して、要素のコンテンツをコンテナを覆うようにサイズ調整します: