EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

Tailwind CSS ボックスモデルとDisplay：padding、margin、サイズ設定

Padding 間隔システム

Paddingは要素のコンテンツとボーダーの間のスペースを制御します。Tailwindはp-0からp-96までの完全な間隔システムを提供しており、デフォルトは4pxの倍数です。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Padding間隔システムデモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 方向指定padding -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">方向指定Padding</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-blue-100 p-4 rounded text-center">
          <div class="bg-blue-500 text-white p-2 rounded">p-4</div>
          <span class="text-sm text-gray-600 mt-2 block">全方向同じ</span>
        </div>
        <div class="bg-green-100 px-6 py-4 rounded text-center">
          <div class="bg-green-500 text-white p-2 rounded">px-6 py-4</div>
          <span class="text-sm text-gray-600 mt-2 block">水平/垂直</span>
        </div>
        <div class="bg-purple-100 pt-4 pb-2 px-4 rounded text-center">
          <div class="bg-purple-500 text-white p-2 rounded">pt-4 pb-2</div>
          <span class="text-sm text-gray-600 mt-2 block">上下が異なる</span>
        </div>
        <div class="bg-orange-100 pl-8 pr-4 py-4 rounded text-center">
          <div class="bg-orange-500 text-white p-2 rounded">pl-8 pr-4</div>
          <span class="text-sm text-gray-600 mt-2 block">左右が異なる</span>
        </div>
      </div>
    </div>

    <!-- よく使うpadding値 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">よく使うPadding値</h3>
      <div class="space-y-4">
        <div class="flex items-center gap-4">
          <div class="bg-gray-200 p-1 w-32 text-center text-sm">p-1 (4px)</div>
          <div class="bg-gray-200 p-2 w-32 text-center text-sm">p-2 (8px)</div>
          <div class="bg-gray-200 p-3 w-32 text-center text-sm">p-3 (12px)</div>
          <div class="bg-gray-200 p-4 w-32 text-center text-sm">p-4 (16px)</div>
        </div>
        <div class="flex items-center gap-4">
          <div class="bg-gray-200 p-5 w-32 text-center text-sm">p-5 (20px)</div>
          <div class="bg-gray-200 p-6 w-32 text-center text-sm">p-6 (24px)</div>
          <div class="bg-gray-200 p-8 w-32 text-center text-sm">p-8 (32px)</div>
          <div class="bg-gray-200 p-10 w-32 text-center text-sm">p-10 (40px)</div>
        </div>
      </div>
    </div>

    <!-- 任意値 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">任意値のPadding</h3>
      <div class="flex gap-4">
        <div class="bg-blue-100 p-[15px] rounded text-center">p-[15px]</div>
        <div class="bg-green-100 p-[2rem] rounded text-center">p-[2rem]</div>
        <div class="bg-purple-100 p-[5%] rounded text-center">p-[5%]</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

Padding方向クラスリファレンス：

クラス CSS プロパティ 説明
p-4 padding: 16px 全方向同じ
px-4 padding-left/right: 16px 水平方向
py-4 padding-top/bottom: 16px 垂直方向
pt-4 padding-top: 16px 上
pr-4 padding-right: 16px 右
pb-4 padding-bottom: 16px 下
pl-4 padding-left: 16px 左

従来のCSSとTailwindの比較 従来の方法では各要素に個別のpadding値を設定する必要がありますが、Tailwindは4px倍数のプリセット間隔システムを使用してデザインの一貫性を保ちます。

Margin 間隔システム

Marginは要素と他の要素の間のスペースを制御します。構文はPaddingと同様で、自動中央揃えのサポートも追加されています。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Margin間隔システムデモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 基本的なmargin -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">基本的なMargin</h3>
      <div class="bg-gray-200 p-4">
        <div class="bg-blue-500 text-white p-4 m-4 rounded">m-4 全方向同じ</div>
        <div class="bg-green-500 text-white p-4 mx-8 my-4 rounded">mx-8 my-4</div>
        <div class="bg-purple-500 text-white p-4 mt-8 mb-2 ml-4 mr-6 rounded">
          mt-8 mb-2 ml-4 mr-6
        </div>
      </div>
    </div>

    <!-- 自動中央揃え -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">mx-auto 中央揃え</h3>
      <div class="bg-gray-200 p-4">
        <div class="bg-blue-500 text-white p-4 w-64 mx-auto rounded text-center">
          mx-auto 中央揃え
        </div>
      </div>
    </div>

    <!-- 負のmargin -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">負のMargin</h3>
      <div class="bg-gray-200 p-8">
        <div class="bg-red-500 text-white p-4 -mt-4 -ml-4 rounded">
          -mt-4 -ml-4 負のmargin
        </div>
      </div>
    </div>

    <!-- margin と padding の比較 -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-white rounded-lg shadow p-6">
        <h3 class="font-semibold mb-4">Padding（内側の間隔）</h3>
        <div class="border-2 border-dashed border-blue-300">
          <div class="bg-blue-100 p-6">
            <div class="bg-blue-500 text-white p-4 rounded text-center">
              コンテンツ領域
            </div>
          </div>
        </div>
      </div>
      
      <div class="bg-white rounded-lg shadow p-6">
        <h3 class="font-semibold mb-4">Margin（外側の間隔）</h3>
        <div class="border-2 border-dashed border-green-300 p-6">
          <div class="bg-green-500 text-white p-4 rounded text-center m-4">
            コンテンツ領域
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

従来のCSSとTailwindの比較 従来の方法では各要素に個別のmargin値を設定する必要がありますが、Tailwindはmx-autoで中央揃え、-mt-4で負のmarginをより直感的な構文で実現できます。

💡 ヒント： 負のmarginは-プレフィックスを使用します（例：-m-4や-mt-2）。オーバーラップレイアウトや要素位置の調整によく使われます。

Width/Height サイズ設定システム

Tailwindは豊富なサイズ設定クラスを提供しており、プリセットサイズと任意値の両方を含み、レスポンシブデザインにも対応しています。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Width/Heightサイズ設定システムデモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 固定幅 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">固定幅</h3>
      <div class="space-y-2">
        <div class="bg-blue-200 w-16 h-8 rounded">w-16</div>
        <div class="bg-blue-300 w-32 h-8 rounded">w-32</div>
        <div class="bg-blue-400 w-48 h-8 rounded text-white">w-48</div>
        <div class="bg-blue-500 w-64 h-8 rounded text-white">w-64</div>
        <div class="bg-blue-600 w-96 h-8 rounded text-white">w-96</div>
      </div>
    </div>

    <!-- パーセント幅 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">パーセント幅</h3>
      <div class="space-y-2">
        <div class="bg-green-200 w-1/2 h-8 rounded">w-1/2 (50%)</div>
        <div class="bg-green-300 w-1/3 h-8 rounded">w-1/3 (33.33%)</div>
        <div class="bg-green-400 w-2/3 h-8 rounded text-white">w-2/3 (66.67%)</div>
        <div class="bg-green-500 w-1/4 h-8 rounded text-white">w-1/4 (25%)</div>
        <div class="bg-green-600 w-3/4 h-8 rounded text-white">w-3/4 (75%)</div>
      </div>
    </div>

    <!-- 特殊な幅 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">特殊な幅</h3>
      <div class="space-y-2">
        <div class="bg-purple-200 w-full h-8 rounded">w-full (100%)</div>
        <div class="bg-purple-300 w-screen h-8 rounded">w-screen (100vw)</div>
        <div class="bg-purple-400 w-min h-8 rounded text-white">w-min</div>
        <div class="bg-purple-500 w-max h-8 rounded text-white">w-max</div>
        <div class="bg-purple-600 w-fit h-8 rounded text-white">w-fit</div>
      </div>
    </div>

    <!-- 最小/最大幅 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">最小/最大幅</h3>
      <div class="space-y-2">
        <div class="bg-orange-200 min-w-[200px] w-32 h-8 rounded">
          min-w-[200px] w-32
        </div>
        <div class="bg-orange-300 max-w-xs h-8 rounded">
          max-w-xs
        </div>
      </div>
    </div>

    <!-- 高さの例 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">高さ</h3>
      <div class="flex gap-4 items-end">
        <div class="bg-blue-500 w-16 h-16 rounded"></div>
        <div class="bg-blue-500 w-16 h-24 rounded"></div>
        <div class="bg-blue-500 w-16 h-32 rounded"></div>
        <div class="bg-blue-500 w-16 h-48 rounded"></div>
        <div class="bg-blue-500 w-16 h-64 rounded"></div>
      </div>
      <div class="mt-4 bg-gray-200 h-screen rounded">
        h-screen (100vh)
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

よく使うサイズ設定リファレンス：

クラス サイズ ピクセル
w-1 0.25rem 4px
w-4 1rem 16px
w-8 2rem 32px
w-16 4rem 64px
w-32 8rem 128px
w-64 16rem 256px
w-96 24rem 384px

従来のCSSとTailwindの比較 従来の方法では各要素に個別のwidthとheight値を設定する必要がありますが、Tailwindはremベースのプリセットシステムを使用し、フォントサイズの変更に自動的に対応します。

Box Sizing

Box Sizingは要素の寸法計算方法を制御し、設定した幅と高さにpaddingとborderを含めるかどうかに影響します。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Box Sizingデモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- box-border デモ -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">box-border（デフォルト）</h3>
      <p class="text-gray-600 mb-4">paddingとborderが設定した幅と高さに含まれます</p>
      <div class="bg-gray-200 p-4">
        <div class="box-border w-64 p-8 border-4 border-blue-500 bg-blue-100 rounded">
          <p class="text-center">w-64 + p-8 + border-4</p>
          <p class="text-center text-sm text-gray-600">合計幅 = 256px</p>
        </div>
      </div>
    </div>

    <!-- box-content デモ -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">box-content</h3>
      <p class="text-gray-600 mb-4">paddingとborderが設定した幅と高さの外側に追加されます</p>
      <div class="bg-gray-200 p-4">
        <div class="box-content w-64 p-8 border-4 border-green-500 bg-green-100 rounded">
          <p class="text-center">w-64 + p-8 + border-4</p>
          <p class="text-center text-sm text-gray-600">合計幅 = 256 + 64 + 8 = 328px</p>
        </div>
      </div>
    </div>

    <!-- 比較 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">比較</h3>
      <div class="grid grid-cols-2 gap-8">
        <div>
          <p class="text-center font-medium mb-2">box-border</p>
          <div class="bg-gray-200 p-4">
            <div class="box-border w-full h-32 p-4 border-4 border-blue-500 bg-blue-200 rounded flex items-center justify-center">
              より小さいコンテンツ領域
            </div>
          </div>
        </div>
        <div>
          <p class="text-center font-medium mb-2">box-content</p>
          <div class="bg-gray-200 p-4">
            <div class="box-content w-full h-32 p-4 border-4 border-green-500 bg-green-200 rounded flex items-center justify-center">
              より大きいコンテンツ領域
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

従来のCSSとTailwindの比較 従来の方法ではbox-sizing: border-boxプロパティを使用する必要がありますが、Tailwindはbox-borderとbox-contentという2つの簡潔なクラス名を提供しています。

💡 ヒント： Tailwindはデフォルトでbox-border（CSSリセットから継承）を使用します。これはモダンウェブ開発の推奨プラクティスです。

Display プロパティ

Displayプロパティは要素の描画方法を制御し、レイアウトの基礎となります。Tailwindは完全なDisplayユーティリティクラスセットを提供しています。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Display プロパティデモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- block と inline -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">block vs inline</h3>
      <div class="bg-gray-200 p-4 space-y-2">
        <span class="block bg-blue-200 p-2">span - block（行全体を占有）</span>
        <span class="block bg-blue-300 p-2">span - block（行全体を占有）</span>
      </div>
      <div class="bg-gray-200 p-4 mt-4">
        <span class="inline bg-green-200 p-2">span - inline</span>
        <span class="inline bg-green-300 p-2">span - inline</span>
        <span class="inline bg-green-400 p-2">span - inline</span>
      </div>
    </div>

    <!-- inline-block -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">inline-block</h3>
      <div class="bg-gray-200 p-4">
        <span class="inline-block bg-purple-200 p-4 m-2 rounded">inline-block</span>
        <span class="inline-block bg-purple-300 p-4 m-2 rounded">inline-block</span>
        <span class="inline-block bg-purple-400 p-4 m-2 rounded text-white">inline-block</span>
        <p class="text-sm text-gray-600 mt-2">inlineとblockの両方の特徴を組み合わせています</p>
      </div>
    </div>

    <!-- hidden -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">hidden（要素を非表示）</h3>
      <div class="bg-gray-200 p-4">
        <p>このテキストは表示されます</p>
        <p class="hidden">このテキストは非表示です（display: none）</p>
        <p>このテキストも表示されます</p>
      </div>
      <p class="text-sm text-gray-600 mt-4">
        ポイント：hiddenやレスポンシブプレフィックスを使って要素の表示を制御できます
      </p>
    </div>

    <!-- flex と grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-white rounded-lg shadow p-6">
        <h3 class="font-semibold mb-4">flex</h3>
        <div class="flex gap-2">
          <div class="bg-blue-200 p-4 rounded flex-1 text-center">1</div>
          <div class="bg-blue-300 p-4 rounded flex-1 text-center">2</div>
          <div class="bg-blue-400 p-4 rounded flex-1 text-center text-white">3</div>
        </div>
      </div>

      <div class="bg-white rounded-lg shadow p-6">
        <h3 class="font-semibold mb-4">grid</h3>
        <div class="grid grid-cols-3 gap-2">
          <div class="bg-green-200 p-4 rounded text-center">1</div>
          <div class="bg-green-300 p-4 rounded text-center">2</div>
          <div class="bg-green-400 p-4 rounded text-center text-white">3</div>
          <div class="bg-green-500 p-4 rounded text-center text-white">4</div>
          <div class="bg-green-600 p-4 rounded text-center text-white">5</div>
          <div class="bg-green-700 p-4 rounded text-center text-white">6</div>
        </div>
      </div>
    </div>

    <!-- レスポンシブdisplay -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">レスポンシブ表示/非表示</h3>
      <div class="bg-gray-200 p-4">
        <p class="block md:hidden text-center text-red-500 font-medium">
          スモールスクリーンのみ表示（block md:hidden）
        </p>
        <p class="hidden md:block lg:hidden text-center text-blue-500 font-medium">
          ミディアムスクリーンのみ表示（hidden md:block lg:hidden）
        </p>
        <p class="hidden lg:block text-center text-green-500 font-medium">
          ラージスクリーンのみ表示（hidden lg:block）
        </p>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

Displayクラスリファレンス：

クラス CSS 値 説明
block display: block ブロック要素
inline-block display: inline-block インラインブロック要素
inline display: inline インライン要素
flex display: flex Flexレイアウト
inline-flex display: inline-flex インラインFlexレイアウト
grid display: grid Gridレイアウト
inline-grid display: inline-grid インラインGridレイアウト
hidden display: none 要素を非表示

従来のCSSとTailwindの比較 従来の方法ではCSSでdisplayプロパティを設定する必要がありますが、Tailwindはblock、flex、gridなどのセマンティックなクラス名を使用し、コードの可読性が高くなります。

⚠️ 注意： hiddenは要素を完全に削除します（display: none）。要素のスペースを保持したい場合はinvisible（visibility: hidden）を使用してください。

❓ よくある質問

Q Tailwindの間隔システムの単位は何ですか？
A Tailwindはデフォルトで4pxを基本単位としています。p-1 = 4px、p-2 = 8px、p-4 = 16pxのようになります。設定で間隔スケールをカスタマイズすることもできます。
Q なぜmx-autoで水平中央揃えができるのですか？
A mx-autoは左右のmarginをautoに設定します。要素に固定幅がある場合、ブラウザが自動的に両側に等しいmarginを計算し、水平中央揃えを実現します。要素はブロックレベルである必要があります。
Q w-fullとw-screenの違いは何ですか？
A w-full = 親要素の幅の100%、w-screen = 100vw（ビューポート幅）です。ビューポート幅は画面全体にまたがる必要がある要素に使用されます。
Q box-contentはいつ使うべきですか？
A paddingとborderを設定した幅と高さの外側に描画したい場合に使用します。ほとんどの場合、デフォルトのbox-borderの方が予測可能な結果になります。

📖 まとめ

📝 課題

  1. ⭐ p-6でpadding、m-4でmargin、w-80で幅、mx-autoで水平中央揃えのカードコンポーネントを作成してみましょう

  2. ⭐⭐ display: gridとdisplay: flexを組み合わせて、モバイルでは1列、デスクトップでは2列のレスポンシブグリッドレイアウトを作成してみましょう

  3. ⭐⭐⭐ 固定幅のサイドバー（w-64）と適応型のメインコンテンツ領域（flex-1）を持つ完全なページレイアウトを作成し、box-borderで正しいサイズ計算を確保してみましょう

100%