本文へスキップ
Web整備室
HTML / CSS 入門 HTML CSS 外部CSS

CSSを別ファイルに分けてみよう

更新日：2026-08-02

前のページでは、

css

フォルダを作成しました。

今回は、その css フォルダを使って、

CSSを別ファイルへ分ける

ことを学んでいきます。

実際のWeb制作では、CSSをHTMLの中へ直接書くことは少なく、多くの場合は別ファイルで管理します。

今回使用するファイル構成

この回では、次のファイルを使用します。

html-practice/
├── index.html
├── profile.html
├── css/
│   └── style.css
└── images/
    └── image.jpg

現在の状態

現在は、index.html の中に、

<style>
...
</style>

を書いていました。

例えば、

<style>

  body {
    background-color: #f3f4f6;
  }

</style>

のような状態です。

CSSファイルを作成する

まず、

  • html-practice
  • css

フォルダの中に、

style.css

というファイルを作成してください。

最終的には以下のようになります。

  • html-practice
  • index.html
  • profile.html
  • css
    • style.css
  • images

style.css にCSSを書く

次に、HTML内の <style> の内容を、

css/style.css

へ移動します。

例えば、以下のように書きます。

body {
  background-color: #f3f4f6;
  text-align: center;
  padding-top: 40px;
}

.image {
  width: 300px;
  border-radius: 12px;
}

index.html を変更する

次に、HTML側を書き換えます。

今まで書いていた、

<style>
...
</style>

を削除してください。

代わりに、

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

を追加します。

最終的には以下のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">

  <title>CSSファイルの練習</title>

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

</head>
<body>

  <h1>
    CSSファイルの練習
  </h1>

  <img
    src="images/image.jpg"
    alt="サンプル画像"
    class="image"
  >

</body>
</html>

ブラウザを更新してみよう

保存したあと、ブラウザを更新してください。

見た目が変わらず表示されていれば成功です。

これは、

HTMLが外部CSSファイルを読み込めている

という意味です。

link タグとは？

今回追加したのは、

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

です。

これは、

このCSSファイルを読み込んでください

という意味です。

href はCSSでも使う

以前、リンクでも href を使いました。

今回も同じように、

どのファイルを読むか

を指定しています。

現在は、

css フォルダの中にある style.css

を指定しています。

rel="stylesheet"

rel="stylesheet"

は、

これはCSSファイルです

という意味です。

ファイルを分けるメリット

CSSを別ファイルにすると、

  • HTMLが見やすくなる
  • CSSを再利用しやすくなる
  • 管理しやすくなる

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

例えば、

  • index.html
  • profile.html

の両方で、

同じ style.css

を使うこともできます。

CSSが反映されない場合

もし見た目が変わらなくなった場合は、

  • ファイル名
  • フォルダ名
  • パス

を確認してください。

特に、

css/style.css

の部分を間違えると、CSSが読み込まれません。

実際のWeb制作に近づいてきた

最初は、

index.html だけ

でした。

しかし現在は、

  • HTML
  • CSS
  • 画像
  • フォルダ整理
  • 外部ファイル読み込み

など、実際のWeb制作にかなり近い構成になってきています。

少しずつ「役割分担」が増えていく

現在は、

  • HTML → 内容を書く
  • CSS → 見た目を書く
  • class → グループ化
  • img → 画像表示
  • link → 外部ファイル読み込み

という役割が少しずつ見えてきました。

Web制作では、この「役割分担」が非常に重要です。

次のページでは

次のページでは、

  • VS Code
  • コードエディタ
  • 自動保存
  • 開発者向けの便利機能

などを学んでいきます。

実際の開発環境に少しずつ近づいていきます。