【CSS】 TailwindCSS で美しいレスポンシブなデザインを実現

この記事では、 TailwindCSS で美しいレスポンシブなデザインを実現する方法を紹介します。

私は業務で、Bootstrap, Material UI（MUI）, 個人開発で FlatUI など、さまざまなCSSデザインを行なっていますが、個人的には TailwindCSS が一番好みです。

TailwindCSS とは
TailwindCSS の特徴
TailwindCSS を CDN で利用
1. TailwindCSS の使い方
2. おわりに

TailwindCSS とは

TailwindCSS は、ユーティリティファーストのCSSフレームワークです。

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leav...

一般的なCSSフレームワークとは異なり、プリセットのスタイルやコンポーネントはほとんどありません。

その代わりにクラス名を使ってデザインを直接指定します。

これにより、非常に柔軟でカスタマイズしやすいデザインが可能になります。

HTML, CSS のクラス指定の知識が必要になるので、ややハードルは高いかもしれません。

TailwindCSS の特徴

TailwindCSS は、小さなユーティリティクラスを使用してデザインを構築します。CSSの重複や無駄を減らし、クリーンでメンテナンスしやすいコードが書けます。

<header class="bg-blue-600 text-white p-4">
        <h1 class="text-2xl">TailwindCSSで作成したレスポンシブデザイン</h1>
</header>

このように、class に TailwindCSS で定義された特定のクラスを当てはめていくだけです。

また、カスタマイズのしやすさも重要な点です。

TailwindCSS は、設定ファイルを使って簡単にカスタマイズできます。テーマやカラーパレットを自由に変更可能なので、お客様の要件に合わせたブランドカラーも簡単に指定できます。

※本記事では詳細は触れませんが、設定には tailwind.config.js という設定ファイルを使用します。 npm でインストールした際に有効で、本記事の CDN では使用できません。ご了承ください。

そして、本記事の肝であるレスポンシブデザインも重要なポイントですね。

メディアクエリを利用して、簡単にレスポンシブデザインを作成できます。

デバイスごとに異なるスタイルを指定するのも簡単です。

次の章で、サンプルコードを紹介しているので参考にしてみてください。

TailwindCSS を CDN で利用

最も簡単な方法は、CDNを使用してTailwindCSSを導入することでしょう。

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">

以下のHTMLコードを使用して、TailwindCSSをプロジェクトに追加できます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TailwindCSS の導入例</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
    <header class="bg-blue-600 text-white p-4">
        <h1 class="text-2xl">TailwindCSSで作成したレスポンシブデザイン</h1>
    </header>
    <main class="p-4">
        <section class="my-8">
            <h2 class="text-xl font-bold mb-4">特徴</h2>
            <ul class="list-disc list-inside">
                <li>ユーティリティファーストアプローチ</li>
                <li>カスタマイズのしやすさ</li>
                <li>レスポンシブデザイン</li>
            </ul>
        </section>
        <section class="my-8">
            <h2 class="text-xl font-bold mb-4">デモ</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div class="bg-white p-4 rounded shadow">
                    <h3 class="text-lg font-bold mb-2">カード1</h3>
                    <p>これはデモ用のカードです。</p>
                </div>
                <div class="bg-white p-4 rounded shadow">
                    <h3 class="text-lg font-bold mb-2">カード2</h3>
                    <p>これはデモ用のカードです。</p>
                </div>
                <div class="bg-white p-4 rounded shadow">
                    <h3 class="text-lg font-bold mb-2">カード3</h3>
                    <p>これはデモ用のカードです。</p>
                </div>
            </div>
        </section>
    </main>
    <footer class="bg-blue-600 text-white p-4 text-center">
        <p>© 2024 サンプルだよ</p>
    </footer>
</body>
</html>

TailwindCSS の使い方

上記のHTMLコードでは、TailwindCSSのユーティリティクラスを使用して、簡単にスタイルを適用しています。

以下に、いくつかのポイントを解説します。

ヘッダーのスタイル: bg-blue-600 クラスを使用して背景色を設定し、text-white クラスでテキストを白にしています。p-4 クラスでパディングを追加しています。
メインコンテンツのスタイル: p-4 クラスを使用して全体にパディングを追加しています。
セクションのスタイル: my-8 クラスで上下にマージンを追加しています。
リストのスタイル: list-disc クラスでリストのスタイルを設定し、list-inside クラスでリストマーカーをテキストの内側に配置しています。
グリッドレイアウト: grid クラスと grid-cols-1 クラスで1列のグリッドレイアウトを設定し、メディアクエリを使用して、md:grid-cols-2 で中サイズのデバイスで2列に、lg:grid-cols-3 で大サイズのデバイスで3列に変更しています。