Tailwind CSSでレスポンシブなコーディングをする

今回の目標

ここまでFlexboxでざっくりとレイアウトを作ってきました。 ですが、このままではスマホで見たときに壊滅的に見にくいですね。

スマホ幅の時は縦並び、PC幅の時はここまで作ってきた横並び配置になるようにします。

Tailwind CSSのブレイクポイントとクラス

最初にTailwind CSSのDocumentsで、レスポンシブにする方法とメディアクエリのブレイクポイントを確認しましょう。

Core Concepts グループにある Responsive Design の項目を開きます。 色々書いてありますが、要点は赤で囲った2箇所。

https://tailwindcss.com/docs/responsive-design

◆1：メディアクエリのブレイクポイント

上部にある表のような部分は、Tailwind CSSでデフォルトとして設定されている、CSSメディアクエリのブレイクポイントがまとめられています。左端のBreakpoint prefixは、ブレイクポイントを示すときに使うTailwind CSS独自の名称です。

Tailwind CSSも多くのCSSフレームワークと同じく、モバイルファーストのブレイクポイントシステムが採用されていることがわかります。

◆2：ブレイクポイント毎にCSSを切り替える方法

◆2の赤線部分では、ブレイクポイントに応じてCSSを切り替える方法が説明されています。

やり方は、至ってシンプル。 クラス名の最初に、mdなどのブレイクポイント名と半角コロン（:）を付けるだけ。 デモコードの場合、以下のように読んでいきます。

実際にCSSで書き起こすと、こうですね（※セレクタは仮）。

img{
  width: 4rem;
}
@media (min-width: 768px) {
  img{
    width: 8rem;
  }
}
@media (min-width: 1024px) {
  img{
    width: 12rem;
  }
}

Tailwind CSSのユーティリティクラスは、全て、この最初にブレイクポイント名とコロンを付ける方法で「ブラウザ幅が～以上なら適用するスタイル」として設定できます。ブレイクポイント名とコロンの部分は“responsive modifiers（レスポンシブ修飾子）”と呼ぶこともあります。

ブレイクポイント名がないユーティリティクラスは、ブラウザ幅に関係なく適用されます。 モバイルファーストコーディングで、タブレット幅・PCモニター幅で変更が必要なスタイルにのみ、ブレイクポイント名とコロンを付けたユーティリティクラスを追加していくと良いでしょう。

作ったレイアウトをレスポンシブ化しよう

ブレイクポイントでの切り替え方がわかりました。 レスポンシブになるよう、クラス属性の指定を変えていきましょう。

1) 768px以上でdisplay:flex;を適用する

スマホ幅では縦並びになるよう、display:flex;が適用されないようにします。 上段を囲うdiv、下段を囲うdiv、それぞれに指定しているflexクラスをmd:flexクラスに変えてみましょう。

<div class="container bg-white mx-auto px-5 py-20">
    <div class="md:flex gap-x-10">
        <!-- 中身部分 省略 -->
    </div>
    <div class="md:flex gap-10 mt-20">
        <!-- 中身部分 省略 -->
    </div>
</div>

ブラウザで表示を確認。

縦並びにはなっていますが、widthを指定しているクラスがあるので幅が狭いですね。 上段は画像を上にと子要素の並び順も違うため、まだまだ調整が必要です。

2) 上段：Flex子要素の設定

width設定のクラスにもプレフィックスを付けて、スマホ幅では幅が制限されないようにします。 タブレット幅くらいになれば横並びでも苦ではなくなるので、md:を使います。

<div class="md:flex gap-x-10">
    <div class="md:w-3/5">
        <h2>
            ここに見出しがはいります。
        </h2>
        <p>
            ここは説明の文章が入ります。<br>
            sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS
        </p>
    </div>
    <div class="md:w-2/5">
        <img src="img/vince-lee-p6KMIFzWwy8-unsplash.jpg" alt="">
    </div>
</div>

次に、子要素を並べる順番。 CSSのorderプロパティを設定できる、ユーティリティクラスを調べます。

Flexbox & Gridのグループにありましたね。

https://tailwindcss.com/docs/order

「class="order2 md:order-1"」のような書き方も出来ますが、ちょっとややこしい。
HTMLでFlexアイテム（div）の順番ごと変えると、スマホ幅では何も指定しなくても良いのでスッキリします。

<div class="md:flex gap-x-10">
    <div class="md:w-2/5">
        <img src="img/vince-lee-p6KMIFzWwy8-unsplash.jpg" alt="">
    </div>
    <div class="md:w-3/5 md:order-first">
        <h2>
            ここに見出しがはいります。
        </h2>
        <p>
            ここは説明の文章が入ります。<br>
            sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS
        </p>
    </div>
</div>

3) 下段：Flex子要素のレイアウト

下段では、横並びにしているアイテムが4つあります。 768pxから、タブレット縦・大きめスマホ横持ちくらいの幅だと4つ並ぶのは狭そうです。

ですので、以下のようにwidthを2段階に設定します。

• md（768px）なら２つずつ横並びになるようw-1/2
• xl（1280px）なら４つ横並びになるようw-1/4

また、Gapが効くよう display : flex はそのまま、Flex Directionで子要素の並び方を変えてみましょう。

<div class="flex flex-col md:flex-row gap-10 mt-20">
    <div class="md:w-1/2 xl:w-1/4">
        <!-- 以下略 -->

スマホ幅の表示は整いましたが、タブレット幅で4つ並んでしまっています。 これは、flexアイテムの折り返し（flex-wrap）が無効で、縮小されているためです。

ただし、折り返しを有効にすると、gapの間隔分があるので50％幅のアイテム２つは並びません。

自分でCSSを書く場合は、Flexアイテム要素の幅をwidth: calc( 50% - 1.25rem );のように指定すれば良いところ。 ですが、とりあえずTailwind CSSで用意されているユーティリティクラスのみで何とかしましょう。

<div class="flex flex-col md:flex-row md:flex-wrap md:-mx-5 gap-y-10 mt-20">
    <div class="md:w-1/2 md:px-5 xl:w-1/4">
        <!-- 以下略 -->

TB幅での表示

PC幅での表示

ちょっと面倒くさい書き方をしましたが、形になりました。 こうして使ってみると、Tailwind CSSの特徴や、メリット・デメリットも体感できますね。