TailwindCSSについて自分なりのチートシートを作る。#7 Display編

初めに

TailwindCSSを使うときに、思うように動かせなかったりすることが多いなと個人的に感じていて、なので一度全体的にまとめておこうと思いこの記事を書いています。

第一弾目は、疑似クラスについてまとめました。
第二弾目は、レスポンシブデザインについてまとめました。
第三弾目は、ダークモードの実装についてまとめました。
第四弾目は、コンテナについてまとめました。
第五弾目は、Columnsについてまとめました。
第六弾目は、ボックスについてまとめていきたいと思います。

第七弾目はdisplayについてまとめようと思います。

1. block

blockは、要素をブロック要素として表示する Tailwind CSS のレイアウト方法です
以下は簡単な具体例です。

<div class="block bg-blue-200 p-4">
  この要素はブロック要素として表示されます。
</div>

<span class="block bg-green-200 p-4 mt-2">
  このspan要素もブロック要素として表示されます。
</span>

実行結果

具体的な実装例

<a href="#" class="block p-4 bg-red-500 text-white rounded">
  ブロック要素のリンク
</a>

実行結果

2. inline

inlineは、文字のように横に並ぶふるまいを持たせるための Tailwind CSS のレイアウト方法です

<p>
  通常のテキスト
  <span class="inline bg-yellow-200 px-1">このspan要素はインライン表示です。</span>
  テキスト
</p>
<p>
  この商品の価格は <span class="inline text-red-600 font-bold">1,000円</span> です。
</p>

実行結果

3. inline-block

inline-blockは、要素を「横に並べつつ、サイズ（幅・高さ）も自由に指定できる」ようにする Tailwind CSS のレイアウト方法です

<div>
  <span class="inline-block bg-blue-100 text-blue-700 text-sm px-3 py-1 rounded mr-2">
    JavaScript
  </span>
  <span class="inline-block bg-green-100 text-green-700 text-sm px-3 py-1 rounded mr-2">
    CSS
  </span>
  <span class="inline-block bg-yellow-100 text-yellow-700 text-sm px-3 py-1 rounded">
    TailwindCSS
  </span>
</div>

実行結果

4. flex

Tailwind CSS で flex を使うと、子要素を横（または縦）に並べて、自由にレイアウトできるようになる便利な仕組みです。以下は、簡単な具体例です。

<div class="flex justify-center gap-4">
  <button class="bg-blue-500 text-white px-4 py-2 rounded">OK</button>
  <button class="bg-gray-300 text-black px-4 py-2 rounded">Cancel</button>
</div>

実行結果

よく使う Tailwind クラス（Flex 編）

クラス名	何をするか
flex	子要素を横に並べる（デフォルト）
flex-row	横並びにする（デフォルト）
flex-col	縦並びにする
justify-start	左寄せ
justify-center	真ん中に揃える
justify-end	右寄せ
justify-between	両端に配置
items-center	高さ方向で中央揃え
gap-4	子要素の間にスペース（4 = 1rem）

5. grid

Tailwind CSS のgridは、要素をタテ・ヨコのマス目（グリッド）状に並べることができるレイアウト方法です。以下は簡単な具体例です。

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 p-4">
  <div class="bg-white p-6 rounded shadow">カード1</div>
  <div class="bg-white p-6 rounded shadow">カード2</div>
  <div class="bg-white p-6 rounded shadow">カード3</div>
  <div class="bg-white p-6 rounded shadow">カード4</div>
  <div class="bg-white p-6 rounded shadow">カード5</div>
  <div class="bg-white p-6 rounded shadow">カード6</div>
  <div class="bg-white p-6 rounded shadow">カード7</div>
  <div class="bg-white p-6 rounded shadow">カード8</div>
</div>

実行結果

よく使う Tailwind クラス（grid 編）

クラス名	意味
grid	グリッドレイアウトを使う
grid-cols-3	横に3列に並べる
grid-rows-2	縦に2行に並べる（必要に応じて）
gap-4	セル同士の間隔を空ける（全体）
row-gap-4 / col-gap-4	行・列ごとの間隔指定

Tailwind CSS の flex と grid の違いまとめ

比較ポイント	flex	grid
基本的な役割	要素を1行（または1列）に並べる	2次元（行 × 列）で要素を配置する
レイアウト方向	横並び（flex-row）や縦並び（flex-col）が基本	横と縦の両方の制御が可能
並べ方の自由度	要素を一方向に並べる	複数行・複数列のマス目に自由に配置可能
隙間の調整	gap で隙間調整できるが、方向は1軸メイン	行・列の間隔を別々に細かく調整可能
得意なレイアウト例	ナビゲーションバーやボタンの横並び	ギャラリー、カード一覧、ダッシュボード

6. テーブル関連 (table, table-row, table-cellなど)

HTML の <table> 要素と同じように、要素をテーブル形式のボックスとして扱います。要素を「表」レイアウトにしたいときに使います。HTML の <table>タグを使わずに柔軟に表レイアウトを作りたいときに有効です。以下は簡単な具体例です。

<div class="table w-full border border-gray-400">
  <div class="table-row bg-gray-100 font-bold">
    <div class="table-cell border px-4 py-2">商品名</div>
    <div class="table-cell border px-4 py-2">価格</div>
    <div class="table-cell border px-4 py-2">在庫状況</div>
  </div>
  <div class="table-row">
    <div class="table-cell border px-4 py-2">商品A</div>
    <div class="table-cell border px-4 py-2">1,000円</div>
    <div class="table-cell border px-4 py-2">在庫あり</div>
  </div>
  <div class="table-row">
    <div class="table-cell border px-4 py-2">商品B</div>
    <div class="table-cell border px-4 py-2">1,500円</div>
    <div class="table-cell border px-4 py-2">在庫なし</div>
  </div>
  <div class="table-row">
    <div class="table-cell border px-4 py-2">商品C</div>
    <div class="table-cell border px-4 py-2">800円</div>
    <div class="table-cell border px-4 py-2">在庫あり</div>
  </div>
</div>

実行結果

よく使う Tailwind クラス(テーブル関連編)

クラス名	役割	具体例
table	表全体のレイアウト	<div class="table">
table-row	行（row）	<div class="table-row">
table-cell	セル（列、cell）	<div class="table-cell">

7. hidden

hidden、その要素が画面上に一切表示しないようにできるレイアウト方法です。以下は簡単な具体例です。

<div class="hidden md:block">
  これは画面幅が768px以上のときだけ表示されます。
</div>