🎶
TailwindCSSについて自分なりのチートシートを作る。#2 Responsive Design 編
初めに
TailwindCSSを使うときに、思うように動かせなかったりすることが多いなと個人的に感じていて、なので一度全体的にまとめておこうと思いこの記事を書いています。
以下のサイトで動作確認済みです。もし、誤りを確認した場合はご指摘いただけますと幸いです。
第一弾目は、疑似クラスについてまとめました。
本記事では、第二弾目としてレスポンシブデザインについてまとめていきたいと思います。
主要なブレークポイント
Tailwind CSSには、デフォルトで以下のブレークポイントが用意されています。これらはmin-width（指定された幅以上）で適用されます。以下の表にまとめていきたいと思います。
| プレフィックス | 最小幅 (min-width) | 適用されるデバイスの目安 |
|---|---|---|
| (なし) | 0px | スマートフォン（縦向き）など |
sm: |
640px | スマートフォン（横向き）、小型タブレット |
md: |
768px | タブレット（縦向き）など |
lg: |
1024px | ノートPC、大型タブレット |
xl: |
1280px | デスクトップPCなど |
2xl: |
1536px | 大画面モニターなど |
具体例
<div class="text-center sm:text-left md:text-right lg:text-center xl:text-left">
このテキストは画面サイズで位置が変わります。
</div>
- 0pxから639pxまで: テキストは中央揃え (text-center)
- 640pxから767pxまで (sm:): テキストは左揃え (sm:text-left)
- 768pxから1023pxまで (md:): テキストは右揃え (md:text-right)
- 1024pxから1279pxまで (lg:): テキストは中央揃え (lg:text-center)
- 1280pxから1535pxまで (xl:): テキストは左揃え (xl:text-left)
- 1536px以上 (2xl:): テキストは左揃え（xl:text-leftが継続）
よく使うレスポンシブプロパティ
1. テキスト配置
<p class="text-center sm:text-left md:text-right">テキスト</p>
| クラス | 説明 |
|---|---|
text-left |
左揃え |
text-center |
中央揃え |
text-right |
右揃え |
2. 表示／非表示切り替え
<div class="block md:hidden">モバイルのみ表示</div>
| クラス | 意味 |
|---|---|
hidden |
非表示 |
block |
ブロック表示 |
md:hidden |
md以上で非表示 |
sm:block |
sm以上で表示 |
3. 幅・高さの変更
<div class="w-full md:w-1/2">半分の幅</div>
| クラス | 意味 |
|---|---|
w-full |
幅100% |
md:w-1/2 |
md以上で50% |
h-32 |
高さ固定 |
lg:h-auto |
lg以上で自動高さに変更 |
4. グリッド／フレックスの切り替え
<div class="grid md:flex">画面サイズでレイアウト変更</div>
| クラス | 意味 |
|---|---|
grid |
グリッドレイアウト |
flex |
フレックスボックス |
md:flex-row |
md以上で横並び |
sm:flex-col |
sm以上で縦並び |
✨グリッドレイアウト フレックスボックスの違いってなーに？
Flexbox を使う場面：
- ナビゲーションメニューの作成
- 要素の中央揃え
- 一方向の並び替え
- 要素間のスペース配分
グリッドレイアウト を使う場面：
- Webページ全体のレイアウト
- 複雑な二次元レイアウト
- 正確な位置指定が必要な場合
- カードグリッドやギャラリー
5. マージン・パディング調整
<div class="p-2 md:p-6">余白変化</div>
| クラス | 意味 |
|---|---|
p-2 |
全体のパディング（小） |
md:p-6 |
md以上でパディングを大きく |
mt-4 |
上マージン（小） |
lg:mb-8 |
下マージンを大きく |
6. 文字サイズ調整
<p class="text-sm md:text-lg lg:text-xl">文字サイズ変化</p>
| クラス | 意味 |
|---|---|
text-sm |
小さめ文字 |
text-lg |
大きめ文字 |
text-xl |
さらに大きめ |
第三弾目について
第三弾目は、ダークモードについてまとめました。
Discussion