🐥

Tailwind CSS：レスポンシブ対応

2024/12/16に公開

CSS

Tailwind CSS

tech

この記事は、プログラミング初心者である筆者が、学習の過程でつまずいた経験をもとに備忘録としてまとめたものです。今回はレスポンシブ対応についてまとめました。

レスポンシブ対応とは

レスポンシブ対応とは、同じコードを使ってPC、スマートフォン、タブレットなど、さまざまなデバイスで表示できるようにする仕組みです。ブラウザの幅に応じてレイアウトやデザインが自動的に調整されます。以前は、PC用とスマートフォン用で別々のコードを作成することが一般的でした。しかし、2018年にGoogleが「モバイルファーストインデックス」を導入したことで、スマートフォンなどモバイルデバイスに対応したデザインがより重要視されるようになり、レスポンシブデザインが主流となりました。

tailwindcssレスポンシブ対応:5段階のブレークポイント

以下のように5段階のブレークポイント（画面幅）を基準に、表示を変化させることができます。

上記の表は、tailwindcss公式ページから引用

・sm (Small): スマートフォンサイズ (min-width: 640px)
・md (Medium): タブレットやiPadの横幅 (min-width: 768px)
・lg (Large): ノートパソコンの画面幅 (min-width: 1024px)
・xl (Extra Large): 大型モニター (min-width: 1280px)
・2xl (Double Extra Large): 特大モニター (min-width: 1536px)

CSSのメディアクエリーとの違い

従来のCSSでは、メディアクエリーを使用することで、画面幅に応じたデザインを自由に設定できます。特に、min-width（指定した幅以上）やmax-width（指定した幅以下）の条件を使い分けることで、細かな調整が可能です。
一方、Tailwind CSSでは、ブレークポイントがデフォルトでmin-widthに固定されています。つまり、指定した画面幅「以上」の場合にのみスタイルが適用される仕組みです。そのため、max-widthを条件としたスタイル変更を行いたい場合は、カスタマイズが必要になります。細かな条件分岐が必要な場合には従来のメディアクエリーを併用することも検討する必要があるでしょう。
【CSS】

/* 画面幅が640px以上の場合に適用 */
@media (min-width: 640px) {
  .example {
    font-size: 16px;
  }
}

/* 画面幅が640px以下の場合に適用 */
@media (max-width: 640px) {
  .example {
    font-size: 12px;
  }
}

tailwindcssでは、レスポンシブデザインを簡単に実現するため、min-widthが基準になっています。つまり、「指定された画面幅以上（例: 640px以上）でデザインが変化する」という仕組みに固定されています。
【tailwindcss】

<div class="text-sm md:text-lg">
  <!-- デフォルト: text-sm -->
  <!-- 画面幅が768px以上: text-lg -->
</div>

md:text-lgは 768px以上（min-width: 768px）で適用されるという意味です。

Flexboxとレスポンシブ

Flexboxは、レスポンシブデザインを実現するために便利なCSSのレイアウトツールです。特に、要素を横並びにしたり、画面サイズに応じてレイアウトを動的に変更するのに適しています。
例①：

<div class="md:flex justify-center mb-16">
  <div class="text-center border border-red-300 py-4 flex-grow">アイテム</div>
  <div class="text-center border border-red-300 py-4 flex-grow">アイテム</div>
</div>

表示例：
スマートフォンサイズ（768px未満）

[アイテム]
[アイテム]

タブレットサイズ以上（768px以上）

[アイテム] [アイテム]

【レスポンシブの動作】
1.画面幅が768px未満（スマートフォンサイズ）
・md:flexが無効なので、デフォルトの状態（縦並び）になります。
・各要素はブロック要素の性質により、画面幅いっぱいに広がります。
2.画面幅が768px以上（タブレットサイズ以上）
・md:flexが有効になり、Flexboxが適用されます。
・子要素が横並びになります。
・flex-growにより、子要素は均等に幅を分け合います。

例②：

<div class="md:flex justify-center mb-16">
  <div class="text-center border border-red-300 py-4 flex-grow md:w-5/12">アイテム</div>
  <div class="text-center border border-red-300 py-4 flex-grow md:w-7/12">アイテム</div>
</div>

画面幅が768px未満（スマートフォンサイズ）

[アイテム]
[アイテム]

画面幅が768px以上（タブレットサイズ以上）

[  アイテム  ][       アイテム       ]

【レスポンシブの動作】
1.画面幅が768px未満（スマートフォンサイズ）
・md:flexが適用されないため、要素は縦並びになります。
・各要素はデフォルトでフル幅になります。
2.画面幅が768px以上（タブレットサイズ以上）
・md:flexにより、Flexboxが適用されて要素が横並びになります。
・各要素の幅は、それぞれ 5/12 と 7/12 に調整されます。

まとめ

tailwindcssを使うと、sm から 2xl までの5段階のブレークポイントを活用し、簡単にレスポンシブ対応を行うことができます。指定した幅「以上」でデザインを切り替える仕組みがデフォルトになっており、従来のCSSで必要だったメディアクエリーを省略できます。
また、Flexboxと組み合わせることで、スマートフォンでは縦並び、タブレット以上では横並びにするなど、動的なレイアウト変更も簡単に実現できます（例えば、各要素の幅を5:7に分けるなど）。

参考

レスポンシブ対応とは

tailwindcssレスポンシブ対応:5段階のブレークポイント

CSSのメディアクエリーとの違い

Flexboxとレスポンシブ

まとめ

Discussion