CSSとは初心者向け｜外部CSSの仕組みと基本をやさしく解説

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

今回は「CSSとは何かを初心者向けに」、
前回の続きとして、外部CSSの仕組みと基本を解説していきます。

前回の記事では、HTMLの中に <style> タグを書いて、
文字の色や大きさを変える「内部CSS」の方法を学びましたね。

では、もしページが２枚、３枚と増えたらどうなるでしょうか？

そのたびに同じCSSを書くのは、正直ちょっと大変です💦
そこで今回は、CSSを別のファイルに分けて書く方法
「外部CSS」を紹介します！

この書き方を覚えると、
ページが増えても見た目をまとめて管理できるようになります。
いよいよ、実際のWebサイトに近い形です✨️

外部CSSとは？初心者向けに仕組みを解説
HTMLとCSSの関係をイメージしてみよう
外部CSSの作り方
外部CSSを使うメリット
外部CSSを使うときの注意点
まとめ｜外部CSSはプロへの第一歩

外部CSSとは？初心者向けに仕組みを解説

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

これまでの内部CSSでは、
１ページごとに<style>を書いていましたよね。

しかし、その方法だと、
ページが増えるたびに、同じCSSを何度も書くことになります。

一方で、外部CSSを使えば👇️

1枚のCSSファイルを、複数のHTMLページで共有できる

これが、外部CSS最大のメリットです。

HTMLとCSSの関係をイメージしてみよう

では次に、仕組みを見てみましょう👇️

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

つまり、

HTML：内容を書く
CS：デザインをまとめる

という役割分担になります。

この形こそが、
本格的なWebサイトで使われている基本構成なんです✨️

外部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側で
「このCSSファイルを使いますよ」と指定とします。

HTMLの<head>タグの中に、
次の１行を書きましょう👇️

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

この<link>タグは、
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”
　→ 読み込むCSSファイル名

そのため、この１行があるだけで、
HTMLは自動的にstyle.cssのデザインを使って表示されます✨️

外部CSSを使うメリット

外部CSSを使うことで、次のような良い点があります👇️

メリット	説明
CSSを使い回せる	1枚のCSSで全ページ共通デザイン
変更がラク	style.cssを直せば全ページに反映
HTMLがスッキリ	中身と見た目を分けられる
統一感が出る	サイト全体がプロっぽくなる