【CSS入門 #02】外部CSSファイルでスタイルを分けよう！

6/24/2025

著者: yasuzaki

カテゴリ: CSS

タグ:

アイキャッチ

今回の目標

前回は、HTMLファイルの中に <style> タグを書いて直接CSSを記述しました。今回はその一歩先、CSSをHTMLファイルから分離して「外部ファイル」として管理する方法を学びます。

なぜ外部CSSを使うの？

  • コードがスッキリする（HTMLとCSSが別になる）
  • 複数のページで共通のスタイルを適用できる
  • 更新や管理がしやすくなる

実際の開発現場でも、CSSはほぼ必ず別ファイルに分けて使います。

フォルダ構成の準備

以下のようにCSSファイルを分けた構成にしましょう。

📁 my-site
├── index.html
└── style.css

CSSファイル（style.css）を作成

まずはCSSファイル style.css を作って、以下の内容を記述します：

h1 {
  color: blue;
  font-size: 32px;
  text-align: center;
}

p {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

HTMLファイル（index.html）でCSSを読み込む

CSSファイルをHTMLに読み込ませるには、<head> 内に以下を追加します：

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

これを含めた全体のコードは以下の通り：

<!DOCTYPE html>
<html>
  <head>
    <title>外部CSSの例</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>こんにちは、CSS！</h1>
    <p>これは外部スタイルシートを使った例です。</p>
  </body>
</html>

ポイント解説

  • <link rel="stylesheet"> … 外部のCSSファイルを読み込むためのタグ
  • href="style.css" … 読み込むCSSファイルのパス
  • CSSは拡張子 .css のテキストファイルで書きます

よくあるミスと注意点

  • CSSファイル名のスペルミス（例：styles.css と書いてるのに style.css を読み込もうとしてる）
  • CSSファイルがHTMLと同じ階層にない → 相対パスを見直す必要あり
  • <link> タグを <body> に書いてしまう → 正しくは <head> 内

まとめ

  • CSSは .css ファイルとして分けて使うのが基本
  • <link> タグでHTMLから読み込む
  • 大規模なサイトや複数ページ対応に必須の知識！

次回予告

次回は「CSSクラス（.class）」を使って、 特定の要素だけにスタイルを当てる方法を学びます！

＜＜ 前の記事：次の記事 ＞＞