【6日でできるHTML入門】CSSファイルの活用

　これまでHTML 内に直接記述してきたCSSを、外部ファイル（CSSファイル）として切り分けて管理する手法について解説します。サイト規模が大きくなるほど、スタイルの一括管理や再利用性が重要になりますので、ぜひマスターしてください。

１．CSSファイルとは何か

1.1. 外部スタイルシートのメリット

メリット説明
一元管理全ページ共通のスタイルを1ヶ所で変更できるため、メンテナンス性が高まる。
再利用同じCSSファイルを複数のHTMLで読み込めるため、記述の重複を防止
読み込み高速化ブラウザがCSSファイルをキャッシュすることで、次回以降のページ表示が高速化
HTMLがすっきり<style>を大量に書く必要がなくなり、HTMLが読みやすくなる。

1.2. 外部スタイルシートの読み込み方法

HTML の <head> 内で <link> タグを使って読み込みます。

<link rel="stylesheet" href="style.css">

２．実際の作成手順

2.1. style.css の作成

　まず、これまで <style>…</style> 内に書いていたCSSを丸ごと 「style.css」 にコピーし、以下のようにファイル先頭を整えます。

/* リセット */
* { margin:0; padding:0; }

/* 全体背景・フォント */
body {
  background:#ccc;
  font-family:sans-serif;
}

/* ページ全体のコンテナ */
#container {
  width:800px;
  margin:auto;
  background:#fff;
  border:3px solid #333;
}

/* ヘッダー */
header {
  height:460px;
  background:url("history-header.png") no-repeat center;
}
#title {
  padding:380px 20px 0;
  color:#fff;
  font-size:32pt;
  font-weight:bold;
}

/* ナビゲーション */
nav ul {
  list-style:none;
  background:#444;
  text-align:center;
}
nav li { display:inline-block; }
nav a {
  display:inline-block;
  padding:10px 15px;
  color:#fff;
  text-decoration:none;
}
nav a:hover { background:#666; }

/* メインコンテンツ */
#main {
  padding:20px;
  line-height:1.6;
}
#main h1 {
  margin-bottom:15px;
  padding:8px 12px;
  background:#0055A4;
  color:#fff;
  border-radius:4px;
  border-left:6px solid #002d72;
  border-right:6px solid #002d72;
  box-shadow:2px 2px 6px #888;
  font-size:20pt;
}
#main p { margin-bottom:15px; }
#main img {
  display:block;
  max-width:100%;
  margin:15px auto;
  border:2px solid #333;
  border-radius:4px;
}
#main ul {
  margin-left:20px;
  list-style:disc;
}

/* フッター */
footer {
  background:#222;
  color:#aaa;
  text-align:center;
  padding:10px;
  font-size:10pt;
}

2.2. HTMLの修正例：index.html

<style> セクションを削除し、<link> を追加します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>💻 コンピュータの歴史</title>
  <!-- 外部CSSを読み込む -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="container">

    <header>
      <div id="title">💻 コンピュータの歴史</div>
    </header>

    <nav>
      <ul>
        <li><a href="index.html">TOPページ</a></li>
        <li><a href="1940s.html">1940年代</a></li>
        <li><a href="1960s.html">1960年代</a></li>
        <li><a href="1980s.html">1980年代</a></li>
        <li><a href="2000s.html">2000年代</a></li>
      </ul>
    </nav>

    <div id="main">
      <h1>サイトの概要</h1>
      <p>
        「コンピュータの歴史」は、電子計算機の誕生から現代の小型デバイスまで、
        70年以上にわたる技術の発展を年代ごとに振り返るサイトです。
        各年代の代表的なマシンや開発者、社会への影響を、写真や解説とともにご紹介します。
      </p>
      <img src="eniac.png" alt="ENIAC 計算機">
      <p>
        1940年代の巨大な真空管式から、1960年代のミニコンピュータ、
        1980年代のパーソナルコンピュータ、2000年代のシングルボードコンピュータまで。
        ぜひナビゲーションメニューから各年代のページへお進みください。
      </p>
      <h1>こんな方におすすめ</h1>
      <ul>
        <li>コンピュータ技術の歩みを学びたい学生・研究者</li>
        <li>懐かしのマシンに興味があるエンジニア</li>
        <li>IT史をわかりやすくまとめて知りたい一般の方</li>
      </ul>
    </div>

    <footer>
      © 2025 Computer History Inc. All rights reserved.
    </footer>

  </div>
</body>
</html>

３．HTMLファイルの共通化

3.1. 各年代ページの対応

1940s.html 以降も同様に <style>…</style> 部分を削除し、<link> を置くだけでOK。

  • 共通部分（ヘッダー～フッター）はすべて同じ
  • <div id="main">…</div> 内だけを各年代ごとに編集する

3.2. <style> と外部CSS の併用

どうしてもページ固有のスタイルが必要な場合は、外部CSS 読み込み後に、

<style>
  /* ページ固有の上書きCSS */
  #main h1 { background:#900; }
</style>

と書くことも可能です。外部CSS→内部<style> の順で適用されます。

まとめ

  • style.css に全体共通のCSSを一括管理
  • HTML には <link> で読み込むだけにしてシンプルに
  • ページ固有スタイルは <style> や別ファイルで必要に応じて追加
  • 大規模サイトほど管理しやすくなり、保守性・再利用性が飛躍的に向上

　これで「HTML と CSS を切り分けて管理する」基本が理解できたはずです。ぜひご自身のプロジェクトでも取り入れてみてください！