Tailwind CSS の基本をマスターしよう（後編）

前編では、Tailwind CSS の「ユーティリティファースト」の考え方と基本的な使い方、よく使うユーティリティクラスについて学びました。後編では、さらに応用的な使い方として、レスポンシブデザイン、ホバーやフォーカスなどの状態変化に対応する方法、そして Tailwind CSS をより効果的に使うための HTML タグの活用方法について解説します。

4. レスポンシブ対応も簡単！ブレークポイントの使い方

Tailwind CSS では、レスポンシブデザイン を簡単に実現することができます。ブレークポイント を指定することで、画面サイズに応じて異なるスタイルを適用することができるのです。

デフォルトでは、以下のようなブレークポイントが用意されています。

ブレークポイント	プレフィックス	画面幅
Small	`sm:`	640px 以上
Medium	`md:`	768px 以上
Large	`lg:`	1024px 以上
Extra Large	`xl:`	1280px 以上
2 Extra Large	`2xl:`	1536px 以上

これらのブレークポイントは、ユーティリティクラスの前にプレフィックスとして付けることで、特定の画面サイズ以上でのみスタイルを適用することができます。

例えば、以下のように記述すると、画面幅が 768px 以上の場合は text-lg（文字サイズを少し大きく）、それ未満の場合は text-base（文字サイズを標準に）が適用されます。

html

<p class="text-base md:text-lg">レスポンシブ対応のテキスト</p>

このように、ブレークポイントのプレフィックスを付けるだけで、簡単にレスポンシブ対応を実現できます。

先ほどの index.html の自己紹介セクションの div タグに、以下のようにクラスを追加してみましょう。

html

<div class="bg-gray-100 p-6 rounded-lg shadow-md md:w-1/2 lg:w-1/3">

ここでは、md:w-1/2 と lg:w-1/3 というクラスを追加しました。

md:w-1/2: 画面幅が 768px 以上の場合は、div の幅を親要素の 50% に設定
lg:w-1/3: 画面幅が 1024px 以上の場合は、div の幅を親要素の 33.33% に設定

ブラウザで index.html を表示し、ウィンドウの幅を変えてみてください。画面幅に応じて div の幅が変わるのが確認できるはずです。

5. 疑似クラスでホバーやフォーカス時のスタイルも自由自在

Tailwind CSS では、疑似クラス を使って、要素が特定の状態になったときのスタイルを指定することもできます。よく使う疑似クラスには、以下のようなものがあります。

:hover: 要素にマウスカーソルが乗ったとき
:focus: 要素がフォーカスされたとき（キーボード操作などで選択されたとき）
:active: 要素がアクティブになったとき（マウスでクリックされたときなど）
:disabled: 要素が無効化されているとき

これらの疑似クラスも、ブレークポイントと同様に、ユーティリティクラスの前にプレフィックスとして付けることで適用できます。

例えば、先ほどの index.html のボタンに、以下のようにクラスを追加してみましょう。

html

<button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    詳しく見る
</button>

hover:bg-blue-700 というクラスを追加しました。これは、「マウスカーソルがボタンに乗ったときに、背景色を blue-700 にする」 という意味です。

ブラウザで index.html を表示し、ボタンにマウスカーソルを乗せてみてください。ボタンの背景色が濃い青色に変わるのが確認できるはずです。

さらに、フォーカス時のスタイルも追加してみましょう。

html

<button class="mt-4 bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 text-white font-bold py-2 px-4 rounded">
    詳しく見る
</button>

focus:ring-2 focus:ring-blue-300 というクラスを追加しました。

focus:ring-2: フォーカス時に 2px のリング（枠線）を表示
focus:ring-blue-300: リングの色を blue-300 に設定

キーボードの Tab キーを使ってボタンをフォーカスしてみてください。ボタンの周りに青色の枠線が表示されるのが確認できるはずです。

6. `<div>` 地獄からの脱却！意味のある HTML タグと組み合わせよう

Tailwind CSS は、ユーティリティクラスを組み合わせてスタイルを適用するため、HTML が <div> だらけになってしまうことがあります。これは、「<div> 地獄」 と呼ばれることもあります。

しかし、HTML には、<div> 以外にも様々なタグが用意されています。これらのタグは、それぞれに意味を持っており、適切に使うことで、アクセシビリティの向上 や SEO 対策 にもつながります。

Tailwind CSS を使う場合でも、意味のある HTML タグを積極的に使い、<div> 地獄から脱却しましょう！

例えば、先ほどの自己紹介セクションでは、div タグを使っていましたが、これを <article> タグに変更してみましょう。

html

<article class="bg-gray-100 p-6 rounded-lg shadow-md md:w-1/2 lg:w-1/3">
    <h2 class="text-xl font-semibold mb-4">自己紹介</h2>
    <p class="text-gray-700">こんにちは！私は Tailwind CSS を勉強中の者です。趣味は Web サイト制作です。よろしくお願いします！</p>
    <button class="mt-4 bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 text-white font-bold py-2 px-4 rounded">
        詳しく見る
    </button>
</article>

<article> タグは、それ自体が独立したコンテンツであることを表します。自己紹介は、まさに独立したコンテンツと言えるでしょう。

他にも、以下のようなタグを適切に使い分けることが重要です。

<header>: サイトやページのヘッダー
<nav>: ナビゲーション
<main>: メインコンテンツ
<aside>: サイドバーなどの補足情報
<footer>: サイトやページのフッター
<section>: ページ内のセクション
<h1> 〜 <h6>: 見出し
<p>: 段落
<ul>: 順序なしリスト
<ol>: 順序付きリスト
<li>: リストの項目
<a>: アンカー（リンク）
<button>: ボタン
<img: 画像

これらのタグを適切に使うことで、HTML の構造が明確になり、コードの可読性も向上します。