CSSを別ファイルに書く方法｜外部CSSでデザインをまとめよう - ゼロからはじめるプログラミング入門ログ

こんにちは！駆け出しエンジニアのまるです👓🦍

前回は、HTMLの中に直接 <style> タグを書いて、

文字の色や大きさを変える「内部CSS」の方法を学びましたね！

今回はその続きとして、CSSを別のファイルに分けて書く方法（外部CSS） を紹介します💡

この方法を覚えると、ページが増えても見た目を一括で整えられるようになります。

いよいよ、実際のWebサイトに近い形です！

外部CSSとは？
仕組みを簡単にあらわすとこんな感じ
外部CSSの作り方
外部CSSのメリット
まとめ

外部CSSとは？

「外部CSS」とは、CSSをHTMLとは別のファイルに分けて書く方法です。

たとえば今までのように1ページに <style> を書くと、

ページが増えるたびに同じCSSを何度も書かないといけません。

でも、外部CSSなら──

1枚のCSSファイルを作って、複数ページから“共有”できる✨

というわけです。

仕組みを簡単にあらわすとこんな感じ

HTML（中身）   →   CSS（見た目）
index.html     →   style.css
about.html     →   style.css
contact.html   →   style.css

HTMLは「内容」を書くだけ、

デザインは「style.css」にまとめることで、どのページでも同じ見た目を再利用できます。

外部CSSの作り方

① CSSファイルを作る

エディター（VS Codeなど）で、

style.css という名前の新しいファイルを作ります。

その中に、たとえば次のように書きます👇

h1 {
  color: orange;
}
p {
  color: gray;
  font-size: 18px;
}
body {
  background-color: #f7f9fc;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.8;
}

② HTMLからCSSを読み込む

次に、HTMLの <head> タグの中に「外部CSSを読み込みますよ」と書きます。

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

この1行が、HTMLとCSSをつなぐ橋のような役割をします。

③ 実際のHTMLコードと表示結果

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>外部CSSの練習</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>CSSを別ファイルで書いてみよう！</h1>
  <p>このページのデザインは、style.cssで設定しています。</p>
</body>
</html>

ポイント

rel=”stylesheet” → 「これはスタイルシートですよ」という意味
href=”style.css” → 「style.css」というファイルを読み込みます

外部CSSのメリット

メリット	説明
ページごとにCSSを書かなくていい	共通デザインを1箇所で管理できる
変更がラクになる	style.cssを直せば全ページに反映される
HTMLがスッキリする	コードが見やすくなる
サイト全体の統一感が出る	見た目が整ってプロっぽくなる