HTMLのテキスト要素、「なんとなく」で書いていませんか？ 迷わないクラス命名と設計の極意

こんにちは！Web制作の世界へようこそ。
HTMLを書き始めたばかりの頃って、`

`タグや`

`タグを並べていると、「あれ、これ全部同じ見た目なのに、どうやって管理すればいいんだろう？」なんて悩み、一度はぶつかりますよね。

「見出しは大きくしたいけど、全部にバラバラにスタイルを書くのは面倒だし、かといって何も考えずに書くと後で修正が地獄になる……」

そんな悩みを持つあなたへ。今日は、プロの現場でも使われている「テキスト要素の整理整頓術」を、お買い物に例えて優しく解説していきますね。

—

なぜ「クラス名」が必要なの？（お買い物の例え）

例えば、スーパーで買い物をするときを想像してみてください。
「あの、赤いパッケージの、中身が詰まっていて、甘い匂いがするやつ……」と店員さんに聞いても、なかなか通じませんよね。でも「いちご」と言えば、一発で伝わります。

HTMLも同じです。
「この`

`タグ、文字サイズ16pxで、色はグレーにして……」と毎回詳しく説明するのではなく、「これは『説明文』用のクラスだよ」と名前（クラス名）をつけてあげれば、CSSがパッと判断してくれるようになるんです。

—

方法1：BEM（ベム）で「役割」を明確にする

BEMは、「ブロック（塊）__要素（中身）–状態」というルールで名前をつける手法です。これを使うと、コードがまるで「整理された棚」のようにスッキリします。

例えば、記事の「見出し」を作るなら、こんな感じです。

ここがポイント！
`article`という単語が入っているおかげで、「これは記事の中で使うスタイルなんだな」と後から見たときにすぐ分かりますよね。名前をつけるときは「何のためのものか？」を意識するのがコツです。

—

方法2：Utility-first（ユーティリティ・ファースト）で「道具」を揃える

最近のトレンドである「Utility-first」は、大工さんの道具箱をイメージしてください。
「文字を大きくする道具」「色をグレーにする道具」「余白を作る道具」をあらかじめ用意しておき、必要なときに組み合わせて使う方法です。

大きな見出し

小さな注釈テキスト

ここがポイント！
この方法のいいところは、CSSを何度も書き直す必要がないこと。「この文字、もうちょっと小さくしたいな」と思ったら、`text-small`に付け替えるだけで完了です。まるでレゴブロックを組み立てるみたいで楽しいですよね！

—

迷ったときは、こう考えてみよう

「BEMがいいの？ それともUtility？」と迷うこともあるかもしれません。でも、最初は「自分が後で見たときに分かりやすいか？」だけで十分です。

1. 意味を持たせる（BEM風）：`product-title`（商品タイトル）など、何のためのタグか名前をつける。
2. 見た目をパーツ化する（Utility風）：`mt-20`（上に20pxの余白）など、具体的な見た目のパーツを作る。

この2つをうまく混ぜても大丈夫。大切なのは、「自分なりのルールを決めて、それを守り続けること」です。

—

最後に：完璧を目指さなくて大丈夫

最初から完璧な設計ができるプロなんていません。最初は名前のつけ方に悩んで、「これであってるのかな？」と不安になることもあるでしょう。でも、それはあなたが「より良くしよう」と真剣に考えている証拠です。

まずは`

`タグに一つだけ、自分だけのクラス名をつけてみてください。
「`my-text`」でも「`comment`」でも、何でもいいんです。その小さな一歩が、将来、何百行ものコードを管理する大きな力になりますよ。

分からないことがあれば、いつでもまた聞きに来てくださいね。あなたのWeb制作ライフが、今日から少しだけ楽しくなりますように！