【HTML/CSS入門】なぜデザインが崩れる？美しいWebサイトを作るための3つの鉄則

更新日: 2026年1月19日

私がWeb制作を始めたばかりの頃、最も恐ろしかったもの。それは「レイアウト崩れ」でした。

ある日、気合を入れてランディングページを作っていたのですが、<div> タグを10個くらい入れ子にした結果、どの閉じタグがどの開始タグに対応しているのか分からなくなり、画面表示がぐちゃぐちゃに...。 修正しようにも、CSSファイルは !important だらけで、一箇所直すと別の場所が壊れる「モグラ叩き」状態。 結局、全てを消して一から書き直す羽目になりました。

「HTML/CSSなんて簡単」と思われがちですが、実は「設計」なしに書き始めると、必ず破綻するようにできているのです。 今日は、当時の私のような悲劇を生まないために、プロが実践している「壊れないサイト」を作るための3つの鉄則を解説します。

鉄則1：HTMLは「骨格」であると心得る (セマンティックHTML)

初心者が最も陥りやすい過ちが、レイアウトのためだけに <div> タグを多用してしまうことです。 これをやると、後でコードを見返した時に「これ何だっけ？」と絶望することになります。

HTMLは、Webページの「意味」を定義する言語です。どこがヘッダーで、どこがナビゲーションで、どこが主要なコンテンツなのかを、タグ自体で表現するべきです。

<!-- 良くない例：すべてがdiv (地獄の始まり) -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="main">
  <div class="article">...</div>
</div>
<div class="footer">...</div>

<!-- 良い例：タグが意味を持っている -->
<header>...</header>
<nav>...</nav>
<main>
  <article>...</article>
</main>
<footer>...</footer>

<header>, <nav>, <main>, <footer> などの セマンティックHTML を使うことで、コードの見通しが劇的に良くなります。 「あ、ここはヘッダーだな」と一瞬で分かるだけで、修正時のストレスは半分以下になります。まずは、骨格を正しく組むこと。 これがデザインの第一歩です。

鉄則2：CSSは「再利用可能な部品」として作る (クラス設計)

次にありがちなのが、場当たり的にスタイルを当ててしまうことです。 「このボタンを赤くしたいから id="red-button"」「あっちのボタンは青くしたいから id="blue-button"」... これを繰り返すと、CSSファイルは肥大化し、修正不能なゴミ屋敷になります。

プロのCSS設計は、「部品（コンポーネント）」を作るように考えます。 例えば、「ボタン」という部品の基本的な形を .btn というクラスで定義し、色などのバリエーションを別のクラスで追加するのです。

/* CSS */
/* 基本的なボタンスタイル（部品の原型）*/
.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
}

/* 色のバリエーション */
.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

/* HTML */
<a href="#" class="btn btn-primary">決定</a>
<a href="#" class="btn btn-secondary">キャンセル</a>

こうしておけば、「ボタンの角を丸くしたい」と思った時、.btn クラスを一行修正するだけで、サイト内の何百個あるボタン全てが一瞬で修正されます。 この快感を知ると、もう二度と適当なID指定には戻れなくなります。

鉄則3：「空間」を支配する (Box ModelとFlexbox)

最後に、デザインの印象を大きく左右するのが「余白」と「配置」です。 これを自在に操るために、絶対に理解すべき2つの概念があります。それが「ボックスモデル」と「Flexbox」です。

• ボックスモデル: 全てのHTML要素は、content（中身）、padding（内側の余白）、border（境界線）、margin（外側の余白）から成る「箱」であるという考え方です。要素間の距離が思った通りにならない時、原因はほぼ間違いなくこの4つのどれかです。
• Flexbox: 要素を横一列に並べたり、中央揃えにしたりといった「配置」を、驚くほど簡単にしてくれるレイアウトモデルです。

例えば、ナビゲーションメニューをきれいに横並びにするのは、昔は float を使って大変な苦労をしていました（崩れるのが日常茶飯事でした）。 しかしFlexboxを使えば、たった数行のCSSで実現できます。

/* HTML */
<nav class="global-nav">
  <a href="#">ホーム</a>
  <a href="#">製品情報</a>
  <a href="#">会社概要</a>
  <a href="#">お問い合わせ</a>
</nav>

/* CSS */
.global-nav {
  display: flex; /* これだけで子が横並びになる */
  justify-content: space-around; /* 子を均等間隔で配置 */
  background-color: #333;
  padding: 1em;
}

すべての要素を「箱」として捉え、Flexboxでその「箱」の並べ方を定義する。 この2つの概念をマスターするだけで、あなたのレイアウト能力は飛躍的に向上します。

まとめ

美しいデザインは、魔法ではありません。論理的な設計の積み重ねです。

• 鉄則1: HTMLで、ページの論理的な「骨格」を正しく組む。
• 鉄則2: CSSで、再利用可能な「部品」を設計する。
• 鉄則3: ボックスモデルとFlexboxで、「空間（配置と余白）」を支配する。

たくさんのCSSプロパティを覚える前に、まずはこの3つの鉄則を意識してコードを書く習慣をつけてみてください。 あなたの書くコードは、もっと美しく、もっと意のままになるはずです。

次のステップへ

美しいサイトを設計することは、Webサイト運営の重要な要素です。 サイトを公開した後にやるべきことの全体像については、以下のチェックリストで網羅的に解説しています。ぜひ、あなたのサイト運営の羅針盤として活用してください。

→ 【保存版】Webサイトを公開した後に「絶対に」やるべき10のSEOチェックリスト