目次
CSS設計とは何か？まず一文で
CSS設計とは、あとから追加・修正しても崩れにくいスタイルを書くための考え方です。
見た目を整えることがゴールではありません。
- 直しやすい
- 影響範囲が読める
- スマホでも崩れない
こういう状態を作るのがCSS設計です。
なぜCSS設計が必要なのか
最初は問題ありません。
でも、CSSが増えてくると必ずこうなります。
.box1 { margin-top: 20px; }
.box2 { margin-top: 25px; }
.box3 { margin-top: 22px; }何が違うのか分かりません。
私も昔、.content2や.area3が大量発生したことがあります。
修正しようとしたら、どこに効いているのか分からず、スマホ表示が崩れました。
原因はスキルではなく、設計不足でした。
CSS設計がないと起こる代表的なトラブル
- 修正したら別ページが崩れる
- !importantが増殖する
- 横スクロール問題が発生する
- スマホだけレイアウトが壊れる
- 同じスタイルが何度も書かれる
これ、ほぼ設計の問題です。
CSS設計の基本は「役割を分ける」こと
まず意識するのはこの3つです。
- レイアウト
- 見た目（装飾）
- 状態
これを混ぜないこと。
レイアウトと装飾を分ける
悪い例
.card {
width: 300px;
background: #fff;
padding: 20px;
}幅も背景もまとめてしまっています。
改善例
.card {
background: #fff;
padding: 20px;
}
.l-column-300 {
width: 300px;
}部品と配置を分離します。
これだけで再利用性が上がります。
クラス名は見た目ではなく役割で付ける
悪い例
.red-text { color: red; }
.big-title { font-size: 28px; }デザイン変更で破綻します。
良い例
.error-text { color: red; }
.page-title { font-size: 28px; }意味ベースで命名します。
上書き前提のCSSは危険
ありがちな例
.text {
font-size: 14px;
}
.top-page .text {
font-size: 16px;
}この書き方が増えると、
依存関係が複雑になります。
結果、
- どこが効いているか分からない
- 修正が怖い
という状態になります。
なぜ依存が増えると危険なのか
CSSは「カスケード（連鎖）」する言語です。
後から書いたものが優先されます。
設計が曖昧だと、
- どのセレクタが勝つのか
- どこまで影響するのか
分からなくなります。
DevToolsで設計崩れを見抜く方法
- 右クリック → 検証
- Stylesタブを見る
- 同じプロパティが何回も打ち消されていないか確認
打ち消し線だらけなら、設計が破綻しています。
小さく分けて組み合わせる設計
CSS設計のコツは、責任を小さくすることです。
.mt-20 { margin-top: 20px; }
.text-center { text-align: center; }
.bg-white { background: #fff; }小さな部品を組み合わせます。
これにより、
- 再利用できる
- 横スクロール原因を特定しやすい
- スマホ崩れを局所化できる
というメリットがあります。
横スクロール問題と設計の関係
よくあるケース。
.container div {
width: 1200px;
}この指定が全体に効いてしまい、
スマホで横スクロールが出ます。
設計が曖昧だと、
影響範囲も曖昧になります。
クラス単位で制御する設計が必要です。
コンポーネント単位で考える
CSSは「部品単位」で考えると整理しやすくなります。
例：カード
<div class="card">
<h2 class="card-title">タイトル</h2>
<p class="card-text">本文</p>
</div>カードはカード単位で完結させます。
ページに依存させません。
初心者が最低限守るべき設計ルール
✔ クラス名は役割で付ける
✔ レイアウトと装飾を分ける
✔ 上書き前提のCSSを書かない
✔ 同じスタイルを何度も書かない
✔ DevToolsで影響範囲を確認する
これだけで十分スタートできます。
よくある誤解
「完璧な設計を最初に作らないといけない」
違います。
最初はシンプルでいいです。
意識することが大事です。
まとめ：CSS設計は考え方が9割
CSS設計は難しい理論ではありません。
- 役割を分ける
- 依存を減らす
- 再利用を意識する
この3つを守るだけで、
- 修正が楽になる
- スマホ崩れが減る
- 横スクロール問題を防げる
CSSは「書く技術」よりも
「設計する意識」が大事です。
まずは今日書くCSSから、
役割を意識してみてください。