クラス名の読み方

p-4 mt-8 text-blue-500 rounded-xl——初めて見ると呪文ですが、規則は3つだけです。これが分かると、覚える量が激減して、知らないクラスも意味が推測できるようになります。

規則1：クラス名は「何を・どれだけ」の2部構成

ほとんどのクラスは、この形をしています。

p-4
│ └── どれだけ（値）
└──── 何を（プロパティ）

「何を」の部分は、CSSのプロパティ名の頭文字や略語です。

方向を絞りたいときは、接頭辞に1文字足します。 ここは規則的なので、覚えるのは一度だけです。

つまりpx-4 py-2は「左右に1rem、上下に0.5rem」。素のCSSのpadding: 0.5rem 1rem;と同じです。このxとyは出番が非常に多いので、ここだけは早めに手になじませてください。

規則2：数字は「px」ではなく「刻みの番号」

いちばん最初につまずくのがここです。p-4は4pxではありません。

数字は「何番目の刻みか」を表しています。初期設定では1刻み＝0.25rem（16px設定なら4px相当）なので、こうなります。

覚え方は「4倍するとpxになる」。p-4＝16px、p-6＝24px、p-8＝32px。これだけで暗算できます。

数字ではない特別な値

長さ系には、数字以外の便利な値もあります。

規則3：色は「名前＋濃さ」

色は色名-濃さの形です。

bg-blue-500
│  │    └── 濃さ（50〜950）
│  └─────── 色名
└────────── 何に使うか（背景色）

濃さは50がいちばん薄く、950がいちばん濃いという並びです。

実務でいちばん使うのは50〜100（背景）と600〜700（文字）です。500はロゴやアクセントに使い、文字色に500を使うと薄くて読みにくいことが多いので注意してください。

<!-- 薄い背景に濃い文字＝読みやすい定番の組み合わせ -->
<p class="bg-blue-50 text-blue-800 p-4">お知らせ</p>

色名はslate gray red orange amber yellow lime green emerald teal cyan sky blue indigo violet purple fuchsia pink rose。全部覚える必要はなく、使う3〜4色だけ決めておけば足ります。

文字サイズは番号ではなく名前

数字の刻みとは違い、文字サイズは服のサイズのような名前です。

baseが標準の16pxで、そこからsm→xsと小さく、lg→xl→2xlと大きくなります。2xl以降は数字で増えるので、大きい見出しはtext-3xlやtext-4xlを使います。

決まった値で足りないとき

どうしても既定の刻みに無い値が必要なときは、角かっこで任意の値を書けます。

<div class="p-[13px] text-[#ff8a3d] w-[420px]">
  任意の値
</div>

便利ですが、多用すると規則の恩恵が消えます（余白がばらつく元に戻ってしまう）。使うのは「デザインデータで指定された固有の値」など、理由があるときだけにしてください。

読めるかテストしてみる

規則が入ったか確かめてみましょう。次のクラス列は、素のCSSで何をしているでしょうか。

<button class="px-6 py-3 bg-orange-500 text-white text-lg font-bold rounded-full">
  送信する
</button>

答えはこうです。

button {
  padding: 0.75rem 1.5rem;   /* py-3 px-6 → 12px 24px */
  background-color: #f97316; /* bg-orange-500 */
  color: #fff;               /* text-white */
  font-size: 1.125rem;       /* text-lg */
  font-weight: 700;          /* font-bold */
  border-radius: 9999px;     /* rounded-full */
}

上から順に読み下すだけです。1クラス1宣言なので、翻訳作業に近い読み方ができます。

このレッスンのまとめ

1. クラス名は「何を-どれだけ」の2部構成。方向はx y t b l rで絞る
2. 数字はpxではなく刻みの番号。p-4＝16px、4倍するとpx
3. 刻みしか選べないことが、サイト全体の余白をそろえる仕組みになっている
4. 色は「色名-濃さ」。濃さは50が薄く950が濃い。文字は600〜700、背景は50〜100が定番
5. text-はサイズと色の二役。続く語で判断する
6. 足りなければp-[13px]と角かっこで書けるが、多用は規則の恩恵を消す

次は、この規則を使ってFlexboxとGridのレイアウトを組みます。CSSで書いたことと1対1で並べていきます。