6日でできる 新HTML入門｜CSSファイルの使い方

6日でできる 新HTML入門｜CSSファイルの使い方

CSSを外部ファイルに分けると、HTMLはすっきり、デザイン管理はもっと簡単になる。共通スタイルをまとめて、効率よくWebサイトを整えよう。

これまでの学習では、HTMLファイルの中にstyleタグを書き、その中にCSSを記述する方法を使ってきました。この方法は、HTMLとCSSを1つのファイルで確認できるため、学習のはじめにはとても分かりやすい書き方です。

しかし、ページ数が増えてくると、同じCSSを何度も書くことになります。たとえば、TOPページ、1940年代ページ、1960年代ページ、1980年代ページ、2000年代ページの5つがあるサイトで、各ページに同じheader、nav、footerのCSSを書いていると、少し色を変えたいだけでも5つのHTMLファイルを修正しなければなりません。

そこで便利なのが、CSSを外部ファイルとして分けて管理する方法です。HTMLファイルからCSSの記述を切り離し、history-style.cssのようなCSS専用ファイルにまとめます。そして、HTML側ではlinkタグを使って、そのCSSファイルを読み込みます。

CSSファイルを使うと、共通デザインを1つのファイルで管理できるため、修正や再利用がしやすくなります。HTMLの中身もすっきりし、文書構造とデザインを分けて考えられるようになります。

ここでは、これまでHTML内に書いていたCSSを外部CSSファイルへ移動し、HTMLからlinkタグで読み込む方法を解説します。複数ページのWebサイトを管理しやすくするための大切な考え方なので、しっかり身につけていきましょう。

CSSファイルとは何か

CSSファイルとは、CSSだけを書いた外部ファイルのことです。HTMLファイルの中にstyleタグでCSSを書くのではなく、別のファイルにCSSをまとめて保存します。

たとえば、次のようなファイルを用意します。

body {
  background-color: #CCCCCC;
  font-family: sans-serif;
}

h1 {
  color: #0055A4;
}

このCSSをhistory-style.cssのようなファイル名で保存し、HTML側から読み込みます。

HTML側では、headタグの中にlinkタグを書きます。

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

rel="stylesheet"は、読み込むファイルがスタイルシートであることを表します。href="history-style.css"は、読み込むCSSファイルの場所と名前を表します。

CSSファイルを使うメリット

CSSファイルを使う一番大きな利点は、同じデザインを複数ページで共有できることです。ナビゲーションの色や本文の余白を変更したいときも、CSSファイルを修正するだけで、読み込んでいるすべてのページに反映できます。

図1：HTMLとCSSを別ファイルに分けて管理する

この図から分かること

CSSファイルを使うと、HTMLとCSSを別々のファイルとして管理できます。HTMLはページの構造を担当し、CSSは色、余白、配置、文字サイズなどの見た目を担当します。linkタグでCSSファイルを読み込むことで、1つのCSSを複数のHTMLページに適用できます。

外部CSSファイルを読み込むlinkタグ

外部CSSファイルをHTMLに読み込むには、headタグの中にlinkタグを書きます。

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

linkタグは、HTMLファイルと外部ファイルを関連付けるためのタグです。CSSファイルを読み込む場合は、rel属性にstylesheetを指定します。href属性には、読み込むCSSファイル名を指定します。

linkタグの主な属性

CSSファイルがHTMLファイルと同じフォルダーにある場合は、href="history-style.css"のようにファイル名だけを書きます。

たとえば、次のような構成です。

project-folder
  ├── Lesson28-1.html
  ├── history-style.css
  ├── computer-history-header.png
  └── eniac-computer.png

この場合、Lesson28-1.htmlからhistory-style.cssを読み込むには、次のように書きます。

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

もしCSSファイルをcssフォルダーに入れる場合は、href="css/history-style.css"のようにフォルダー名も含めて指定します。

CSSファイルを作成する

まず、これまでHTML内のstyleタグに書いていたCSSを、CSSファイルに移します。ここでは、コンピュータの歴史サイト用のCSSとして、history-style.cssを作成します。

CSSファイルには、styleタグは書きません。CSSの指定だけを書きます。

ファイル名： history-style.css

/* すべての要素の余白をリセット */
* {
  margin: 0;
  padding: 0;
}

/* ページ全体 */
body {
  background-color: #CCCCCC;
  font-family: sans-serif;
}

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

/* ヘッダー */
header {
  height: 430px;
  background: url("computer-history-header.png") no-repeat center;
  background-size: cover;
}

#title {
  padding: 350px 20px 0;
  color: #FFFFFF;
  font-size: 32pt;
  font-weight: bold;
  text-shadow: 2px 2px 6px #000000;
}

/* ナビゲーション */
nav ul {
  list-style: none;
  background-color: #444444;
  text-align: center;
}

nav li {
  display: inline-block;
}

nav a {
  display: inline-block;
  padding: 10px 15px;
  color: #FFFFFF;
  text-decoration: none;
  font-weight: bold;
}

nav a:hover {
  background-color: #666666;
}

/* メインコンテンツ */
#main {
  padding: 20px;
  line-height: 1.6;
}

#main h1 {
  margin-bottom: 15px;
  padding: 8px 12px;
  background-color: #0055A4;
  color: #FFFFFF;
  border-radius: 4px;
  border-left: solid 6px #002D72;
  border-right: solid 6px #002D72;
  box-shadow: 2px 2px 6px #888888;
  font-size: 20pt;
}

#main p {
  margin-bottom: 15px;
}

#main img {
  display: block;
  max-width: 100%;
  margin: 15px auto;
  border: solid 2px #333333;
  border-radius: 4px;
}

#main ul {
  margin-left: 24px;
  list-style: disc;
}

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

このCSSファイルには、ページ全体の背景、コンテナ、ヘッダー、ナビゲーション、メインコンテンツ、フッターのデザインをまとめています。

HTML内のstyleタグに書いていた内容をそのまま移す場合でも、CSSファイルではstyleタグ自体は不要です。CSSファイルには、セレクター、プロパティ、値だけを書きます。

CSSファイルに書く内容

CSSファイルでは、コメントを使って領域ごとに区切ると読みやすくなります。たとえば、ヘッダー、ナビゲーション、メインコンテンツ、フッターのようにコメントを書いておくと、あとから修正する場所を探しやすくなります。

HTMLからstyleタグを削除する

CSSファイルを作ったら、次にHTMLファイルを修正します。これまでheadタグの中に書いていたstyleタグを削除し、代わりにlinkタグを追加します。

修正前の考え方

<head>
  <meta charset="UTF-8">
  <title>コンピュータの歴史</title>
  <style>
    body {
      background-color: #CCCCCC;
    }
  </style>
</head>

修正後の考え方

<head>
  <meta charset="UTF-8">
  <title>コンピュータの歴史</title>
  <link rel="stylesheet" href="history-style.css">
</head>

このようにすると、HTMLファイル内から長いCSSを取り除けます。HTMLにはページ構造だけが残るため、見通しがよくなります。

図2：styleタグを削除してlinkタグで読み込む

この図から分かること

HTML内に長いstyleタグを書いていると、HTMLの構造が読み取りにくくなります。CSSを外部ファイルに移し、linkタグで読み込む形にすると、HTMLはページ構造に集中でき、CSSは見た目の管理に集中できます。

CSSファイルを読み込むHTMLを作る

次の例では、HTML内のstyleタグを使わず、外部CSSファイルhistory-style.cssを読み込んでいます。

ファイル名： Lesson28-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>コンピュータの歴史</title>
  <link rel="stylesheet" href="history-style.css">
</head>
<body>
  <div id="container">
    <header>
      <div id="title">コンピュータの歴史</div>
    </header>

    <nav>
      <ul>
        <li><a href="Lesson28-1.html">TOPページ</a></li>
        <li><a href="Lesson28-2.html">1940年代</a></li>
        <li><a href="Lesson28-3.html">1960年代</a></li>
        <li><a href="Lesson28-4.html">1980年代</a></li>
        <li><a href="Lesson28-5.html">2000年代</a></li>
      </ul>
    </nav>

    <div id="main">
      <h1>サイトの概要</h1>
      <p>
        コンピュータの歴史は、初期の電子計算機から現代のスマートフォンまで、
        技術の発展を年代ごとに紹介する学習サイトです。
        各年代の代表的な機器や社会への影響を、写真と文章で分かりやすく整理します。
      </p>

      <img src="eniac-computer.png" alt="初期の電子計算機">

      <p>
        1940年代の巨大な計算機、1960年代のミニコンピュータ、1980年代のパーソナルコンピュータ、
        2000年代のスマートフォンまで、コンピュータは形も使われ方も大きく変化してきました。
      </p>

      <h1>このサイトで学べること</h1>
      <ul>
        <li>コンピュータが発展してきた大まかな流れ</li>
        <li>各年代を代表する機器の特徴</li>
        <li>社会や生活に与えた影響</li>
      </ul>
    </div>

    <footer>
      © 2026 Computer Archive. All rights reserved.
    </footer>
  </div>
</body>
</html>

ブラウザの表示例

このHTMLでは、headタグ内にlinkタグを書いています。

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

これにより、Lesson28-1.htmlはhistory-style.cssの内容を読み込んで表示されます。HTMLファイル内にはCSSの長い記述がないため、header、nav、div id="main"、footerといったページ構造を読み取りやすくなっています。

外部CSSファイルを使う場合でも、HTMLのclass名やid名はCSS側と一致している必要があります。たとえば、CSSで#containerと指定しているなら、HTML側にもdiv id="container"が必要です。CSSで#mainと指定しているなら、HTML側にもdiv id="main"が必要です。

外部CSSを使うときのファイル構成

外部CSSを使う場合は、HTMLファイル、CSSファイル、画像ファイルの配置を意識する必要があります。ファイル名や保存場所がずれていると、CSSや画像が読み込まれません。

今回の例では、次のようなファイル構成にします。

computer-history-site
  ├── Lesson28-1.html
  ├── history-style.css
  ├── computer-history-header.png
  └── eniac-computer.png

HTMLファイルとCSSファイルが同じフォルダーにあるため、linkタグではhref="history-style.css"と書きます。

CSSファイル内では、headerの背景画像としてcomputer-history-header.pngを指定しています。

header {
  background: url("computer-history-header.png") no-repeat center;
}

この画像ファイルもhistory-style.cssと同じフォルダーにあるため、url("computer-history-header.png")と書けば読み込めます。

ファイルの場所と書き方

外部CSSを使うときに表示が崩れた場合は、まずファイル名と保存場所を確認しましょう。特に、画像ファイル名のスペル、拡張子、フォルダー名は間違いやすい部分です。

複数ページでCSSファイルを共有する

CSSファイルを外部化する大きな目的は、複数ページで同じスタイルを共有することです。

たとえば、次のような5つのHTMLファイルがあるとします。

Lesson28-1.html
Lesson28-2.html
Lesson28-3.html
Lesson28-4.html
Lesson28-5.html

それぞれのHTMLファイルのhead内に、同じlinkタグを書きます。

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

これだけで、5つのページすべてに同じCSSを適用できます。ナビゲーションの背景色を変更したい場合も、history-style.cssのnav ulを修正するだけで、すべてのページに反映されます。

複数ページで共通化しやすい部分

共通デザインはCSSファイルにまとめ、ページごとの本文だけHTMLで変えるようにすると、サイト全体の統一感を保ちやすくなります。

ページ固有のCSSを追加する方法

基本的には、共通CSSをhistory-style.cssにまとめます。ただし、ページによって一部だけ見た目を変えたい場合もあります。

そのような場合は、外部CSSを読み込んだあとにstyleタグを書いて、ページ固有のCSSを追加できます。

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

<style>
  #main h1 {
    background-color: #8B0000;
  }
</style>

この場合、先にhistory-style.cssが読み込まれ、そのあとにstyleタグのCSSが読み込まれます。同じ#main h1に対する指定であれば、あとから書いたstyleタグの指定が優先されます。

外部CSSと内部CSSの使い分け

ページ固有の指定が多くなりすぎると、CSSの管理が複雑になります。基本は外部CSSにまとめ、どうしても必要な部分だけをページ内で上書きする、と考えると整理しやすくなります。

図3：1つのCSSファイルを複数ページで共有する

この図から分かること

外部CSSファイルを使うと、1つのCSSファイルを複数のHTMLページで共有できます。各HTMLファイルはlinkタグで同じCSSを読み込むだけです。CSSを1か所で管理できるため、サイト全体の色や余白、メニューの見た目をまとめて変更しやすくなります。

外部CSSが反映されないときの確認ポイント

CSSファイルを作ったのに見た目が変わらない場合は、いくつかの原因が考えられます。慌てずに、次のポイントを確認しましょう。

確認すること

CSSファイル名を変更した場合は、HTML側のhrefも同じ名前に変更する必要があります。また、CSS内で画像を指定している場合は、画像の場所がHTMLから見た場所ではなく、CSSファイルから見た場所になる点にも注意します。

たとえば、history-style.cssとcomputer-history-header.pngが同じフォルダーにあるなら、CSSではurl("computer-history-header.png")と書きます。CSSファイルから見てimagesフォルダーの中に画像があるなら、url("images/computer-history-header.png")と書きます。

CSSファイルを使うときに意識したいこと

CSSファイルを使うと、HTMLとCSSの役割を分けて管理できます。HTMLにはページの構造を書き、CSSファイルには見た目の指定を書きます。この分け方に慣れると、Webサイト全体の管理がしやすくなります。

複数ページのサイトでは、header、nav、footer、見出し、本文、画像などの共通デザインを外部CSSにまとめておくと便利です。デザインを変更したいときも、CSSファイルを1つ修正するだけで済みます。

また、CSSファイルを読み込むlinkタグは、headタグの中に書きます。HTMLの本文部分であるbodyではなく、ページ情報を扱うheadの中に書く点を覚えておきましょう。

styleタグを完全に使ってはいけないわけではありません。共通デザインは外部CSSにまとめ、ページ固有の調整だけをstyleタグで追加することもできます。ただし、ページごとの上書きが増えすぎると管理しづらくなるため、基本は外部CSS中心で考えるとよいでしょう。

使用タグとCSSの整理

この学習で登場した主なタグとCSSを整理します。

linkタグは、外部CSSを読み込むために使います。rel属性にはstylesheet、href属性にはCSSファイル名を指定します。

styleタグは、HTML内にCSSを書くためのタグです。外部CSSを使う場合は、共通CSSをCSSファイルにまとめ、必要な場合だけstyleタグでページ固有の指定を追加するとよいでしょう。

CSSファイルを活用できるようになると、ページ数が増えてもデザインを管理しやすくなります。HTMLとCSSを分けて考えることは、Webサイト制作を効率よく進めるための大切な基本です。