この章では、いよいよ実践的なレイアウトに挑戦します。Flexbox と Grid を駆使して、思い通りのレイアウトを実現する方法を学びましょう。また、コンポーネント化の考え方を取り入れて、効率的にレイアウトを構築する方法についても解説します。
1. Flexbox で要素を自由に配置！
Flexbox は、要素を柔軟に配置するためのレイアウト手法です。Tailwind CSS では、Flexbox に関連するユーティリティクラスが豊富に用意されているため、簡単に Flexbox を使ったレイアウトを実現できます。
Flexbox の基本
Flexbox を使うには、まず親要素に flex クラスを指定します。これにより、親要素は Flex コンテナ となり、その子要素は Flex アイテム となります。
html
<div class="flex">
<div>アイテム1</div>
<div>アイテム2</div>
<div>アイテム3</div>
</div>デフォルトでは、Flex アイテムは横並びに配置されます。
方向の指定
flex-row（デフォルト）: 横並び flex-row-reverse: 横並び（逆順） flex-col: 縦並び flex-col-reverse: 縦並び（逆順）
html
<div class="flex flex-col">
<div>アイテム1</div>
<div>アイテム2</div>
<div>アイテム3</div>
</div>アイテムの配置
justify-start（デフォルト）: 左揃え justify-center: 中央揃え justify-end: 右揃え justify-between: 両端揃え justify-around: 均等配置 justify-evenly: 均等配置（両端含む）
html
<div class="flex justify-center">
<div>アイテム1</div>
<div>アイテム2</div>
<div>アイテム3</div>
</div>アイテムの折り返し
flex-wrap（デフォルト）: 折り返さない flex-wrap-reverse: 折り返さない（逆順） flex-wrap: 折り返す flex-wrap-reverse: 折り返す（逆順）
html
<div class="flex flex-wrap">
<div class="w-1/2">アイテム1</div>
<div class="w-1/2">アイテム2</div>
<div class="w-1/2">アイテム3</div>
</div>アイテムの高さ揃え
items-start: 上揃え items-center: 中央揃え items-end: 下揃え items-baseline: ベースライン揃え items-stretch（デフォルト）: 高さを揃える
html
<div class="flex items-center h-32">
<div class="h-16 bg-gray-300">アイテム1</div>
<div class="h-24 bg-gray-400">アイテム2</div>
<div class="h-8 bg-gray-500">アイテム3</div>
</div>その他
gap-4: アイテム間のスペースを 1rem に設定
html
<div class="flex gap-4">
<div>アイテム1</div>
<div>アイテム2</div>
<div>アイテム3</div>
</div>これらは Flexbox の一部の機能です。詳しくは Tailwind CSS の公式ドキュメント（https://tailwindcss.com/docs/flexbox）を参照してください。
2. Grid で複雑なレイアウトも思いのまま！
Grid は、Flexbox よりもさらに複雑なレイアウトを実現するためのレイアウト手法です。Tailwind CSS の Grid 関連のユーティリティクラスを使えば、簡単に Grid レイアウトを構築できます。
Grid の基本
Grid を使うには、まず親要素に grid クラスを指定します。これにより、親要素は Grid コンテナ となり、その子要素は Grid アイテム となります。
html
<div class="grid">
<div>アイテム1</div>
<div>アイテム2</div>
<div>アイテム3</div>
</div>列数の指定
grid-cols-1: 1 列 grid-cols-2: 2 列 grid-cols-3: 3 列 grid-cols-4: 4 列 grid-cols-5: 5 列 grid-cols-6: 6 列 grid-cols-7: 7 列 grid-cols-8: 8 列 grid-cols-9: 9 列 grid-cols-10: 10 列 grid-cols-11: 11 列 grid-cols-12: 12 列 grid-cols-none: 列数を自動調整
html
<div class="grid grid-cols-3">
<div>アイテム1</div>
<div>アイテム2</div>
<div>アイテム3</div>
<div>アイテム4</div>
<div>アイテム5</div>
<div>アイテム6</div>
</div>行数の指定
grid-rows-1: 1 行 grid-rows-2: 2 行 grid-rows-3: 3 行 grid-rows-4: 4 行 grid-rows-5: 5 行 grid-rows-6: 6 行 grid-rows-none: 行数を自動調整
アイテムの配置
col-span-2: アイテムを 2 列分の幅にする col-start-2: アイテムを 2 列目から開始 col-end-4: アイテムを 4 列目で終了
row-span-2: アイテムを 2 行分の高さにする row-start-2: アイテムを 2 行目から開始 row-end-4: アイテムを 4 行目で終了
html
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2 bg-gray-300">アイテム1</div>
<div class="bg-gray-400">アイテム2</div>
<div class="row-span-2 bg-gray-500">アイテム3</div>
<div class="bg-gray-600">アイテム4</div>
<div class="bg-gray-700">アイテム5</div>
</div>その他
gap-4: アイテム間のスペースを 1rem に設定
html
<div class="grid grid-cols-3 gap-4">
<div>アイテム1</div>
<div>アイテム2</div>
<div>アイテム3</div>
</div>これらは Grid の一部の機能です。詳しくは Tailwind CSS の公式ドキュメント（https://tailwindcss.com/docs/grid-layout）を参照してください。
3. コンポーネントを作って再利用性を高めよう
Tailwind CSS を使ってレイアウトを構築する際には、コンポーネント化 の考え方を取り入れると、コードの再利用性が高まり、効率的に開発を進めることができます。
コンポーネントとは、UI の部品 のことです。例えば、ボタン、カード、ナビゲーションバーなどは、すべてコンポーネントと考えることができます。
コンポーネント化のメリットは、以下の通りです。
- 再利用性の向上: 同じコンポーネントを複数の場所で使い回すことができる。
- メンテナンス性の向上: コンポーネントのスタイルを変更する際に、一箇所修正するだけで済む。
- 可読性の向上: コードが整理され、理解しやすくなる。
コンポーネントの作成方法
Tailwind CSS では、特別な記法やツールを使わなくても、HTML と CSS だけで簡単にコンポーネントを作成することができます。
例えば、以下のようなボタンのコンポーネントを考えてみましょう。
html
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
ボタン
</button>このボタンをコンポーネント化するには、まず、ボタンのスタイルを定義する CSS クラスを作成します。
css
/* src/input.css */
.btn {
@apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}次に、HTML でボタンを作成する際に、.btn クラスを適用します。
html
<button class="btn">ボタン</button>これで、ボタンのコンポーネントが完成しました。この .btn クラスを適用するだけで、どこでも同じスタイルのボタンを作成することができます。
さらに、ボタンの色を変えたい場合は、.btn-primary や .btn-secondary などの新しいクラスを作成し、@apply ディレクティブを使って .btn クラスのスタイルを継承しつつ、色だけを変更することもできます。
css
/* src/input.css */
.btn-primary {
@apply btn bg-blue-500 hover:bg-blue-700;
}
.btn-secondary {
@apply btn bg-gray-500 hover:bg-gray-700;
}html
<button class="btn-primary">プライマリーボタン</button>
<button class="btn-secondary">セカンダリーボタン</button>このように、Tailwind CSS と @apply ディレクティブを組み合わせることで、簡単にコンポーネントを作成し、再利用することができます。