Tailwind CSSユーティリティクラス基礎【クラスの使い方・レスポンシブ対応方法】

｜ 11188 PV ｜ 2023.10.02

favorite_border

賛否両論ありつつ人気のCSSフレームワークTailwild CSS。
もう手放せないくらい良い理由、合わなかった理由……など色々な記事も公開されていますが、結局、自分で使ってみないと「自分にとって使いやすいか」はわかりません。

簡単なレイアウトを、ユーティリティクラスのみでコーディングして試してみましょう。公式ドキュメントを使ったクラスの探し方、レスポンシブ対応にする方法も解説します。
仕事によって使える必要があったりするので、基礎を押さえておいて損はないですよ！

Tailwind CSSでの余白設定

padding
margin

Tailwind CSSでのFlexレイアウト作成

コンテンツ幅を設定する「コンテナ」
displayプロパティの指定
widthプロパティとグリッド分割
flexレイアウト向けのCSSクラス

Tailwind CSSを使ったレスポンシブ対応

Tailwind CSSのブレイクポイントとクラス
作ったレイアウトのレスポンシブ化

Tailwind CSSでの余白設定

前回の記事で、Tailwild CSSのCDN版を導入に使ったPlay CDNのサンプルコード。こちらではbodyにp-5クラスが指定されていました。
クラス名やブラウザ表示から「paddingのpかな」とお察しの方も多いと思います。

せっかくですから、Webページのコーディングに欠かせないpaddingとmarginを設定するTailwind CSSのユーティリティクラスから見ていきましょう。

padding

Tailwind CSSのDocumentsで、padding設定のためのクラスを見ていきましょう。
左側メニュー部分の、見出しがSpacingとなっているブロックに「padding」があります。

https://tailwindcss.com/docs/padding

開いてみると、上部に使用可能なClass名と適用されるスタイル指定が書かれています。
その下に Basic usage（基本的な使い方）として、以下のようにクラスの規則性と使い方が書かれています。

Add padding to a single side
Control the padding on one side of an element using the p{t|r|b|l}-{size} utilities.

これは、paddingを追加する位置と大きさを組み合わせたクラスが使える、という意味です。

sizeを意味する数字は、数の小さいものでは0.5刻みで設定されています。数が大きくなってくると、72,80,96……と刻み方も大きくなるので、その点だけ注意してください。なお、sizeの数 1 あたり0.25rem（0.5につき0.125reｍ）ずつ増えるのはpadding、margin共通です。

sizeで使う数字、それぞれ何remになるかは暗記する必要はありません。
クラス名からどうpaddingを設定したいのかざっと把握ができ、必要に応じてTailwind CSSのDocumentsで調べられれば大丈夫です。

paddingを調整してみよう

では、Play CDNのページからコピペしてきたHTMLを変更してみましょう。

bodyにpaddingが付けられていると、全幅で背景色や背景画像を設定したいときに不便。
なので、見出しを囲う形でdivタグを作り、そちらにpaddingを設定します。横方向は今まで通りのpaddingを付けるためpx-5、縦方向は倍の余白を設定するpy-10クラスを指定します。

<body>
  <div class="px-5 py-10">
    <h1 class="text-3xl font-bold underline text-orange-500">
      Hello world!
    </h1>
  </div>

</body>

ブラウザで表示を確認。
変更前よりも、H1の文字上の余白（空いているスペース）が広くなっていたら、成功です。

margin

もう一つの余白設定プロパティ、marginも見てみましょう。
marginを設定するためのクラスも、paddingと同じ仕組みでクラス名が決められています。

https://tailwindcss.com/docs/margin

ただし、marginプロパティの値には、paddingプロパティでは使わない以下2つがあります。

auto
ネガティブ（-1remなど）

値がautoの場合

marginの値でautoを使いたい場合はsizeの位置にautoと書けばOKです。
中央配置にしたい時のmx-autoクラスは、特に使う機会が多いかなと思います。

ネガティブな値を使う時

marginの特徴として、ネガティブ（マイナス）の数値を設定できるという事があります。
親要素からはみ出させた配置を作る、要素を重ねたいときなどに使いますよね。

Tailwind CSSのクラスで、ネガティブな値を指定したい時は、クラス名の最初に-（半角のマイナス/ダッシュ）を付けます。

末尾につくsizeの数字は、通常のmarginと同じものが使えます。
例えば-mx-2クラスを指定した場合は、左右マージンが0.5remずつマイナスされる（親要素よりも大きくなる）ことになります。

まずは無料の14講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする

Tailwind CSSでのFlexレイアウト作成

レイアウトを作りやすく、コーディングで使われる機会が多いCSS Flexbox。
これもTailwind CSSを使うと、ユーティリティクラスの組み合わせで作ることが出来ます。

よくあるページレイアウトを、Tailwind CSSのクラスだけで作ってみましょう。
下図の配置を、Flexboxで作ります。

解説では、以下のUnsplashのフリー画像を使用させていただいています。
お手持ちの画像があれば、そちらを使われても構いません。

素材	URL：https://unsplash.com/ja/%E5%86%99%E7%9C%9F/p6KMIFzWwy8 DL Size：中間（1920 × 1280）
素材	URL：https://unsplash.com/ja/%E5%86%99%E7%9C%9F/fhuPrCwAzaw DL Size：中間（1920 × 1439）

コンテンツ幅を設定する「コンテナ」

Tailwind CSSのcontainerクラス

多くのWebページにはコンテンツ幅が設定されているかと思います。
ページコンテンツ、特はテキストは横長になりすぎると読みにくいですしね。フレームワークを使わずに自分でCSSを書く場合も、「container」「contants-wrapper」などのクラスを作って最大幅を定義されている方が多いでしょう。

Tailwind CSSでもコンテンツ幅を制限するためのcontainerクラスが用意されています。Layoutのグループに、そのものズバリContainerという項目があります。
表示領域に合わせて最大幅はかわり、最大1565pxまでになるよう設定されています。

https://tailwindcss.com/docs/container

注意点として、Tailwind CSSのcontainerクラスは、max-widthのみが指定された状態である事が挙げられます。Bootstrapなどのように中央配置や、左右paddingは設定されていません。

ちょっと言葉だけだと分かりにくいですね。
H1を囲っているdivのpx-5クラスをなくし、containerクラスを指定してみましょう。

<body>
  <div class="container py-10">
    <h1 class="text-3xl font-bold underline text-orange-500">
      Hello world!
    </h1>
  </div>

こんな感じになります。
配置も左右paddingも無いので、あまり綺麗ではありません。

先程なくしたpx-5クラス、中央配置のためのmx-autoクラスを加えます。

<body>
  <div class="container mx-auto px-5 py-10">
    <h1 class="text-3xl font-bold underline text-orange-500">
      Hello world!
    </h1>
  </div>

これでやっと、コンテンツ幅を設定したようなレイアウトになりました。

ちなみに、左右paddingを加えたのは表示幅によって左端ピッタリまでコンテンツが来てしまうことがあるため。キワまで文字が来ると見にくいので、最低限の余白を入れています。

作ってみよう

では、コーディングレイアウト図のコンテンツ幅部分を作ってみましょう。

ページ全体に背景色を入れ、コンテンツ幅は背景色を白に設定します。

背景色指定に使うクラスは、Backgroundグループ > Background Colorで確認できます。
上画像の色でなくとも構いませんので、お好きな色のclassを使ってみてください。

https://tailwindcss.com/docs/background-color

色々書き方はあると思いますが、シンプルに以下のように書いてみました。
paddingのサイズはお好みで調整してください。

<body class="bg-zinc-400">
  <div class="container mx-auto px-5 py-10">
    <h1 class="text-3xl font-bold underline text-orange-500">
      Hello world!
    </h1>
  </div>
  <div class="container bg-white mx-auto px-5 py-20">
    test
  </div>

</body>

中身を入れるための、白背景部分が出来ました。

displayプロパティの指定

作った.container.bg-whiteのdivに中身を入れていきます。

上段と下段、それぞれ横並びレイアウトを作るためにflexコンテナを用意します。
CSSで display:flex を指定したいので、そのためのユーティリティクラスを探しましょう。

検索する、もしくはLayout > Displayを開いて確認します。

https://tailwindcss.com/docs/display

flexクラスを適用すれば良いことがわかります。

作ってみよう

上段用と下段用のflexコンテナを追加します。

<div class="container bg-white mx-auto px-5 py-20">
    <div class="flex">

    </div>
    <div class="flex">

    </div>
</div>

divタグを使っていますが、コンテンツに応じてarticleやsectionタグでもOK。
空divが加わっただけですので、まだ表示に変化はありません。

widthプロパティとグリッド分割

上段下段それぞれの中身（Flexアイテム）を作っていきます。
flexアイテムの横幅・コンテナに占める割合は、width関連のユーティリティクラスを使うと設定ができます。グリッドデザインのコーディングに便利なクラスも用意されていますよ。

Tailwind CSSのDocuments、Sizingグループの一番上にwidthがあります。

https://tailwindcss.com/docs/width

上の方には、paddingなどと同じようなクラス名とスタイルの対応が書かれていますね。

下の方へスクロールダウンしてみましょう。
w-1/2やw-2/3など、marginやpaddingとは少し違うクラス名が出てくるはずです。

Tailwind CSSで幅を定義するクラスには、大きく3つの形式があります。

FlexboxやCSS Gridでレイアウトを作る時はfractionを使う事が多いでしょう。
分割数（分母）の最大12を使うと、Webデザインでよく使われる12分割グリッドシステムのコーディングも楽にできます。

ちなみにw-1/6とw-2/12のように、同じ結果になるクラスもあります。このあたりの使い分けは、ページもしくはセクション全体で分母を揃えたいか、簡潔に書きたいか、お好み次第かなと思います。

作ってみよう

上段と下段、それぞれのFlexアイテムの幅を設定しながら、中身を入れていきましょう。
widthで設定する幅は以下のようにします。

まず上段。
画像や、h2タグ・pタグ内のテキストはお好きに設定してください。

<div class="flex">
    <div class="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="w-2/5">
        <img src="img/vince-lee-p6KMIFzWwy8-unsplash.jpg" alt="">
    </div>
</div>

次に下段。
ここは1/4サイズのアイテムを1つ作って、コピペで増やしちゃいましょう。

<div class="flex">
    <div class="w-1/4">
        <img src="img/grooveland-designs-fhuPrCwAzaw-unsplash.jpg" alt="">
        <h3>Sample Tomato</h3>
        <p>
            sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS
        </p>
    </div>
    <!-- div.w-1/4をあと3つ貼り付け -->
</div>

このあたりで一回、ブラウザで見てみましょう。
余白も一切なく、横並びにしたアイテムも、上下段も、ピッタリくっついています。

見出し（hタグ）の標準スタイルがリセットされているなど色々難点はありますが……まずは大枠のレイアウトを整えてみましょう。

flexレイアウト向けのCSSクラス

Tailwind CSSのドキュメントでは、FlexboxもしくはCSS Gridでのレイアウト・子要素の配置に使用するCSSプロパティのクラスはFlexbox & Gridグループにまとめられています。

Flexアイテム間の間隔を簡単に設定してしまいましょう。
Gapのページを開きます。

https://tailwindcss.com/docs/gap

クラス名のルールは、概ねpaddingやmarginと同じですね。
横方向にだけすき間を作りたい時はgap-x-10のように間に「ｘ」を、縦方向にだけすき間を作りたい時は「ｙ」を入れれば良いようです。

上段、下段、それぞれを囲う<div class="flex">のclass属性に、Gap指定のためのユーティリティクラスを加えてみましょう。
下段の方には、margin-topを指定できるmt-20クラスも入れておきます。

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

はい、一気に見やすくなりました。

そのほかのクラスも見てみましょう

Flexbox & Gridの見出し以下にある、その他のリンク項目も見てみましょう。

例えば、一番上にはFlex Basisがあります。
今回は子要素の大きさをw-1/4などwidthプロパティのクラスで設定しましたが、Flex Basisを設定するbasis-1/4を使っても良いですね。

その下は子要素を並べる方法を設定するためのFlex Direction、更に下の方まで見ていくと揃え位置を決める「Align Items」や「Place Content」などもあります。
ほぼCSSプロパティ名と同じなので、加えたいスタイル指定があれば探せるでしょう。

探すのが面倒なら検索すれば良いわけですが、時々知らなかったCSSを発見したりと、こうしたドキュメントをふわっと眺めるのは勉強にもなります。

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独自の名称です。

ブレイクポイント名	有効になるブラウザ幅	CSSの記述
sm	640px以上	@media (min-width: 640px) { ... }
md	768px以上	@media (min-width: 768px) { ... }
lg	1024px以上	@media (min-width: 1024px) { ... }
xl	1280px以上	@media (min-width: 1280px) { ... }
2xl	1536px以上	@media (min-width: 1536px) { ... }

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>

ブラウザで表示を確認。

縦並びにはなっていますが、w-x/xクラスのせいで幅が狭いですね。
上段は画像を上にと順番も違うので、まだまだ調整が必要です。

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段階に設定します。
また、Gapが効くように、display : flex のまま、Flex Directionを変えてみましょう。

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

<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の特徴や、メリット・デメリットも体感できますね。

次の記事では、見出しなどのテキスト部分や、デザイン装飾的なCSSの設定方法を見ていきます。

まずは無料で14講座から始めましょう！

ハイクオリティな14講座/98レッスンが受け放題。
募集人数には制限があります。サインアップはお早めに。

無料申し込み期限
5月5日まで

募集人数

100名 (残りわずか)

Tailwind CSS超入門 - 何が良い? 導入は難し...

Tailwind CSSでのスタイリング方法、独自クラス（...

Tailwind CSSユーティリティクラス基礎【クラスの使い方・レスポンシブ対応方法】

Tailwind CSSでの余白設定

padding

paddingを調整してみよう

margin

値がautoの場合

ネガティブな値を使う時

Tailwind CSSでのFlexレイアウト作成

コンテンツ幅を設定する「コンテナ」

Tailwind CSSのcontainerクラス

作ってみよう

displayプロパティの指定

作ってみよう

widthプロパティとグリッド分割

作ってみよう

flexレイアウト向けのCSSクラス

そのほかのクラスも見てみましょう

Tailwind CSSを使ったレスポンシブ対応

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

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

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

作ったレイアウトのレスポンシブ化

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

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

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

まずは無料で14講座から始めましょう！

こちらもオススメ

Skillhubの購読にはFacebookが便利です

Skillhub [スキルハブ]