発行:

スタイリング (Tailwind CSS)

Webページのデザインを整える「スタイリング」の方法を学びましょう。
現代のモダンなWeb開発（React, Next.jsなど）では、 Tailwind CSS というフレームワークを利用するのが主流になっています。

Tailwind CSS とは？

Tailwind CSS は、 「ユーティリティファースト」 という思想で作られたCSSフレームワークです。
class="text-red-500" や class="p-4" のような、細かい役割を持つ小さなクラス（ユーティリティクラス）を組み合わせてデザインを作っていきます。

従来のCSSとの違い

従来は CSS ファイル (style.cssなど) を作り、そこにデザイン定義を書いていましたが、Tailwind では HTML (JSX) に直接クラスを書きます。

従来のCSS（イメージ）
/* style.css */
.btn {
  background-color: blue;
  color: white;
  padding: 10px 20px;
}

<!-- HTML -->
<button class="btn">Click me</button>

Tailwind_CSS
// HTML (JSX) に直接書く
<button className="bg-blue-500 text-white py-2 px-4">
  Click me
</button>

直感的でわかりやすく、コンポーネント指向のライブラリ（React等）と非常に相性が良いのが特徴です。

Tailwind を使ってみよう

実際に手を動かして、スタイルを適用してみましょう。
練習用のコンポーネントを作成します。

ボタンコンポーネントの作成

src ディレクトリ配下の適当な場所に、以下のコードを記述したコンポーネントファイル（例: SpecialButton.tsx）を作成します。

src/components/SpecialButton.tsx
export default function SpecialButton() {
  return (
    <button className="bg-blue-600 text-white font-bold py-3 px-6 rounded-lg shadow-md hover:bg-blue-700 transition duration-300">
      Click Me!
    </button>
  );
}

使われているクラスの解説：

  • bg-blue-600: 背景を青色(600番の濃さ)にする
  • text-white: 文字色を白にする
  • font-bold: 文字を太くする
  • py-3 px-6: 内側の余白（パディング）を設定。yは縦方向、xは横方向。
  • rounded-lg: 角を丸くする
  • shadow-md: 影をつける
  • hover:bg-blue-700: マウスが乗った時(Hover時)に背景を少し濃くする
  • transition duration-300: 変化をアニメーションさせる

ページで表示確認

作成したコンポーネントを、任意のページ（App.tsx や page.tsx など）で読み込んで表示してみましょう。

import SpecialButton from "./components/SpecialButton";

export default function Page() {
  return (
    <div className="p-10">
      <h1 className="mb-4 text-2xl">Tailwind CSS Sample</h1>
      <SpecialButton />
    </div>
  );
}

画面を確認して、ボタンのデザインが適用されていれば成功です。
マウスを乗せた時に色がふわっと変わるアニメーションも確認してみてください。

まとめ

  • Tailwind CSS : クラス名を組み合わせるだけでデザインができる。
  • ユーティリティクラス : bg-red-500 のような単機能のクラス。
  • コンポーネント指向 : デザインをコンポーネント内に閉じ込められるため、管理がしやすい。

CSSのためにファイルを行ったり来たりする必要がなく、サクサクと開発が進められるのがTailwindの魅力です。