Tailwind CSS Place Content で Flexbox & Grid レイアウトをマスターしよう

Tailwind CSS の Flexbox & Grid における Place Content の解説

Tailwind CSS では、place-content というクラス名の後に、ダッシュ (-) を区切りに、配置に関するオプションを指定することで、Place Content を利用できます。

オプション

Place Content には、以下のオプションがあります。

水平方向

• start: アイテムをコンテナの左端に配置します。
• center: アイテムをコンテナの水平方向中央に配置します。
• end: アイテムをコンテナの右端に配置します。
• stretch: アイテムをコンテナの幅いっぱいに引き伸ばします。

複数のオプションを組み合わせて、水平方向と垂直方向の配置を同時に指定できます。

例：

<div class="flex place-content-center">
  <div>アイテム</div>
</div>

このコードは、flex クラスで Flexbox レイアウトを適用し、place-content-center クラスでアイテムを水平方向と垂直方向中央に配置します。

その他のオプション

• evenly: アイテムをコンテナ内に等間隔に配置します。
• around: アイテムをコンテナ内に等間隔に配置し、両端にも余白を追加します。

例

<div class="grid place-content-center">
  <div>アイテム1</div>
  <div>アイテム2</div>
  <div>アイテム3</div>
</div>

このコードは、grid クラスで Grid レイアウトを適用し、place-content-center クラスでアイテムを水平方向と垂直方向中央に配置します。

Tailwind CSS の Place Content は、Flexbox レイアウトと Grid レイアウトにおけるアイテムの配置を簡単に制御できる便利なプロパティです。様々なオプションを組み合わせて、思い通りのレイアウトを作成することができます。

Tailwind CSS Place Content サンプルコード

Flexbox レイアウト

• 左端に配置

<div class="flex place-content-start">
  <div>アイテム</div>
</div>

• 中央に配置

<div class="flex place-content-center">
  <div>アイテム</div>
</div>

• 右端に配置

<div class="flex place-content-end">
  <div>アイテム</div>
</div>

• 幅いっぱいに引き伸ばす

<div class="flex place-content-stretch">
  <div>アイテム</div>
</div>

垂直方向

• 上端に配置

<div class="flex flex-col place-content-start">
  <div>アイテム</div>
</div>

<div class="flex flex-col place-content-center">
  <div>アイテム</div>
</div>

• 下端に配置

<div class="flex flex-col place-content-end">
  <div>アイテム</div>
</div>

<div class="flex flex-col place-content-stretch">
  <div>アイテム</div>
</div>

水平方向と垂直方向

• 左上

<div class="flex place-content-start">
  <div>アイテム</div>
</div>

• 中央

<div class="flex place-content-center">
  <div>アイテム</div>
</div>

• 右下

<div class="flex place-content-end">
  <div>アイテム</div>
</div>

• 等間隔

<div class="flex place-content-evenly">
  <div>アイテム1</div>
  <div>アイテム2</div>
  <div>アイテム3</div>
</div>

• 両端に余白

<div class="flex place-content-around">
  <div>アイテム1</div>
  <div>アイテム2</div>
  <div>アイテム3</div>
</div>

Grid レイアウト

<div class="grid place-content-start">
  <div>アイテム</div>
</div>

<div class="grid place-content-center">
  <div>アイテム</div>
</div>

<div class="grid place-content-end">
  <div>アイテム</div>
</div>

<div class="grid place-content-stretch">
  <div>アイテム</div>
</div>

<div class="grid place-items-start">
  <div>アイテム</div>
</div>

<div class="grid place-items-center">
  <div>アイテム</div>
</div>

<div class="grid place-items-end">
  <div>アイテム</div>
</div>

• 高さ

Tailwind CSS Place Content 以外の方法

Flexbox レイアウト

• justify-content と align-items プロパティ

justify-content プロパティは、アイテムの水平方向の配置を制御し、align-items プロパティは垂直方向の配置を制御します。

<div class="flex justify-content-center align-items-center">
  <div>アイテム</div>
</div>

このコードは、flex クラスで Flexbox レイアウトを適用し、justify-content-center クラスでアイテムを水平方向中央に配置し、align-items-center クラスで垂直方向中央に配置します。

• margin プロパティ

margin プロパティを使って、アイテムの周りに余白を設定することで、間接的に配置を制御できます。

<div class="flex">
  <div class="mx-auto">
    <div>アイテム</div>
  </div>
</div>

このコードは、flex クラスで Flexbox レイアウトを適用し、mx-auto クラスでアイテム左右に自動的に余白を設定し、中央に配置します。

Grid レイアウト

• grid-template-columns と grid-template-rows プロパティ

grid-template-columns プロパティは、グリッドレイアウトの列の幅を指定し、grid-template-rows プロパティは行の高さを指定します。

<div class="grid grid-cols-1 grid-rows-1">
  <div>アイテム</div>
</div>

このコードは、grid クラスで Grid レイアウトを適用し、grid-cols-1 クラスで1列レイアウト、grid-rows-1 クラスで1行レイアウトを指定し、アイテムを中央に配置します。

• place-items プロパティ

place-items プロパティは、justify-content と align-items プロパティをまとめて設定できます。

<div class="grid place-items-center">
  <div>アイテム</div>
</div>

このコードは、grid クラスで Grid レイアウトを適用し、place-items-center クラスでアイテムを水平方向と垂直方向中央に配置します。

Place Content は、Flexbox レイアウトと Grid レイアウトでアイテムを配置する便利な方法ですが、他にもいくつかの方法があります。それぞれの方法のメリットとデメリットを理解して、状況に応じて使い分けることが重要です。