HTMLとCSSの設計ルール-コードが「きれい」「読みやすい」「壊れにくい」設計の基本

Web制作をしていると、こんな悩みが出てきます。

• HTMLが div だらけになる
• CSSがどんどん長くなる
• どこにスタイルを書けばいいかわからない
• 修正すると別の場所が崩れる

これは多くの場合、設計ルールが決まっていないことが原因です。

HTMLとCSSは、ただ書くだけではなく
設計して書くことで保守性が大きく変わります。

この記事では

• HTMLとCSSの設計の考え方
• よくある失敗例
• 実務で使える設計ルール
• コーディングが楽になるテクニック

を解説します。

まず前提：HTMLとCSSの役割

HTMLとCSSは役割が違います。

技術	役割
HTML	意味（構造）
CSS	見た目（デザイン）

つまり

HTML → コンテンツの意味
CSS → 表示のデザイン

です。

例

<article class="card">
<h2>タイトル</h2>
<p>本文</p>
</article>

.card{
padding:20px;
background:#fff;
}

この分離が設計の基本になります。

HTML設計の基本ルール

まずHTMLから整理します。

① セマンティックHTMLを使う

意味を持つタグを使います。

<header>
<nav>
<main>
<section>
<article>
<footer>

NG例

<div class="header">
<div class="nav">

正しい例

<header>
<nav>

検索エンジンやスクリーンリーダーが
ページ構造を理解しやすくなります。

② 見出し構造を守る

見出しは文書構造です。

h1
 ├ h2
 │ ├ h3
 │ └ h3
 └ h2

NG例

<h1>タイトル</h1>
<h4>説明</h4>

これは構造が崩れます。

③ sectionには見出しをつける

<section>
<h2>サービス</h2>
</section>

見出しがない section は
意味が曖昧になります。

④ divを使いすぎない

divは最後の手段です。

使う場面

• レイアウト
• CSSフック
• JS操作

CSS設計の基本ルール

次はCSSです。

① セレクタを深くしすぎない

NG例

.header .nav ul li a span{
color:red;
}

これを

.nav-link{
color:red;
}

にします。

浅いCSSは壊れにくいです。

② classベースで設計する

NG

div p span{
}

OK

.card-title{
}

理由

• HTML構造に依存しない
• 再利用できる

③ BEM設計を使う

CSS設計で有名な方法です。

例

.card
.card__title
.card__text
.card--featured

意味

Block
Block__Element
Block--Modifier

例

<div class="card card--featured">
<h2 class="card__title">タイトル</h2>
</div>

メリット

• 可読性が高い
• CSS衝突が少ない

④ コンポーネント設計

UIを部品化します。

例

<button class="btn">

.btn{
padding:10px 20px;
}

このボタンは

• LP
• ブログ
• 管理画面

どこでも使えます。

⑤ CSS変数を使う

カラーやサイズを統一します。

:root{
--main-color:#007aff;
}.button{
background:var(--main-color);
}

変更も簡単になります。HTMLとCSSをつなぐ設計

HTMLとCSSは
コンポーネント単位で考えると整理されます。

例

<article class="card">
<h2 class="card__title">
<p class="card__text">
</article>

.card{}
.card__title{}
.card__text{}

これが

コンポーネント設計

です。

実務テンプレ

基本構造

<header>
<nav>
</nav>
</header><main><section>
<h1>タイトル</h1>
</section><section>
<h2>内容</h2><article class="card"><h3 class="card__title"></h3><p class="card__text"></p></article></section></main><footer>
</footer>

よくあるアンチパターン

div地獄

<div>
<div>
<div>

CSSセレクタ地獄

.header .nav ul li a span

IDセレクタ多用

#header

再利用が難しくなります。

HTMLとCSS設計のチェックリスト

公開前にチェック

• 見出し構造は正しい？
• sectionに見出しある？
• articleは独立コンテンツ？
• CSSセレクタは浅い？
• class設計は整理されている？
• 再利用できるコンポーネント？

まとめ

HTMLとCSS設計のポイント

① HTMLは意味で書く
② CSSはclass中心
③ セレクタは浅く
④ コンポーネント設計
⑤ 再利用できるコード

これだけで

• コードが読みやすい
• バグが減る
• チーム開発が楽
• 保守性が上がる

というメリットがあります。

最後に

Web制作でレベルが上がる瞬間は「設計を考え始めた時」です。

HTMLとCSSはただ書くだけではなく

設計することで真価を発揮します。

お気に入り