✅ CSSユーティリティクラスとは？
ユーティリティクラス（Utility Class） とは、
「小さなスタイルを持った再利用可能なCSSクラス」のことです。
例えば、文字を中央揃えにするクラスを作る場合：
.text-center {
text-align: center;
}👉 この .text-center をHTMLの要素に適用すると、その要素の文字が中央揃えになります。
<p class="text-center">中央揃えのテキスト</p>特徴
- 1つのクラスに小さなスタイルだけを定義する
- 必要に応じてHTMLで組み合わせて使う
- 「使い回しが効く」「無駄なCSSを減らせる」
📌 ユーティリティクラスのメリット
1. 再利用性が高い
同じスタイルを何度も書かずに済む。
例：複数のボタンを中央揃えにしたいときも .text-center を付けるだけ。
2. コードがシンプル
従来のCSSでは、要素ごとにクラスを作って管理していた。
.header-title { text-align: center; }
.footer-note { text-align: center; }👉 ユーティリティクラスなら1つでOK！
<h1 class="text-center">タイトル</h1>
<p class="text-center">フッターテキスト</p>3. 保守性が向上
- スタイルの重複が減る
- 修正が1箇所で済む
- デザイン変更にも柔軟に対応
📌 ユーティリティクラスのデメリット
- HTMLにクラスが増えすぎて「読みづらくなる」ことがある
- デザイナーやチーム全員でルールを決めないと、バラバラになりがち
👉 適切に使わないと「HTMLがクラスだらけ」になるので注意！
📌 実用的なユーティリティクラスの例
文字系
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-bold { font-weight: bold; }余白系
.m-0 { margin: 0; }
.mt-10 { margin-top: 10px; }
.p-20 { padding: 20px; }色系
.bg-blue { background: #3498db; }
.text-red { color: #e74c3c; }👉 これらを組み合わせると、直感的にスタイルを適用できるようになります。
📌 実際のHTMLでの使い方
<button class="bg-blue text-white p-20 text-center">
ユーティリティクラスのボタン
</button>👉 背景が青、文字が白、余白20px、中央揃えのボタンになります。
📌 ユーティリティクラスとフレームワーク
近年は「ユーティリティクラス」がベースのフレームワークが人気です。
代表例：
- Tailwind CSS → クラスの組み合わせだけでデザイン可能
- Bootstrap →
.text-centerや.mt-3など多くのユーティリティが組み込み済み
👉 学習の際は、自作ユーティリティクラスを作ってみると理解が深まります。
🎯 ユーティリティクラス設計のポイント
- シンプルな命名規則（例：
.mt-10で margin-top:10px） - 使いすぎ注意（必要最低限に絞る）
- 共通化できるものはまとめる
- チームで命名ルールを統一する
📌 まとめ
- CSSユーティリティクラス = 小さなスタイルを持つ再利用可能なクラス
- メリット → 再利用性、シンプル、保守性アップ
- デメリット → HTMLがクラスだらけになりがち
- 実務では Tailwind CSSやBootstrap のようなフレームワークも活用されている
👉 初心者はまず、文字揃え・余白・色 のユーティリティクラスから作ってみるのがおすすめです！