HP初心者講座
これまでの説明ではHTMLタグに直接「style」を書いていました。
<p style="color:red;">赤い文字です！</p>最初のうちはこれでも十分ですが、
ページが増えてくると 同じデザインを何度も書くのが大変になります。
そんなときに便利なのが、CSSをファイルに分ける「外部CSS」 です。
この記事では、HTMLに書いたCSSを分離してスッキリ管理する方法をわかりやすく解説します！
CSSの3つの書き方
| 種類 | 方法 | 特徴 |
|---|---|---|
| インラインCSS | HTMLタグの中に書く | 手軽だけど管理しにくい |
| 内部CSS | <style>タグ内にまとめる | 1ページ内なら整理しやすい |
| 外部CSS | 別ファイルにまとめる | 複数ページで共有できて最も効率的 |
インラインCSS（最も基本的な方法）
<p style="color:red;">赤い文字です！</p>メリット：すぐ試せる
デメリット：
- 同じ装飾を何度も書く必要がある
- HTMLがごちゃごちゃして見づらい
内部CSS（styleタグでまとめる）
<head>
<style>
p {
color: red;
}
</style>
</head>メリット：ページ内のスタイルをまとめて管理できる
デメリット：他のページでは使えない
外部CSS（別ファイルで管理する方法）
いよいよ本題です。
HTMLとCSSを完全に分けることで、コードが見やすく再利用もしやすくなります。
１．CSSファイルを作成する
テキストエディタなどで新しいファイルを作り、
名前を style.css にします。
/* style.css */
p {
color: red;
}２．HTMLでCSSを読み込む
HTMLファイルの <head> タグ内に、次の1行を追加します。
<link rel="stylesheet" href="style.css">
これで、style.css の内容が自動的に読み込まれます。
３．実際のHTMLファイルの全体像
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部CSSの例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>この文字は赤色で表示されます！</p>
</body>
</html>外部CSSのメリットまとめ
| メリット | 説明 |
|---|---|
| 管理がラク | HTMLとデザインを分けて見やすい |
| 再利用できる | どのページでも同じデザインを使える |
| 修正が簡単 | 1か所直せば全ページに反映される |
| デザイン統一 | サイト全体で見た目をそろえやすい |
ちょっとしたコツ
- ファイル名は「
style.css」などにすると分かりやすいです。 - HTMLと同じフォルダに置けばOK（最初は同階層で問題なし）。
- 慣れてきたら
/css/フォルダを作って整理してもOKです。
まとめ
- CSSはHTMLの中に直接書かなくてもOK！
- 別ファイル（外部CSS）にまとめて管理するのが効率的。
- HTMLの
<head>に<link>タグで読み込むだけで使えます。
これを覚えると、サイト制作がグッとスムーズになります
初心者の皆様へ
「CSSファイルの作り方やリンクの書き方が不安…」
「自分のHTMLで正しく読み込まれているかわからない…」
そんな方は、私がココナラに出品しているWebサイト制作サービスをご利用ください。
- 高品質テンプレートでデザインも安心
- 自分で更新できるWebサイト（WordPress）
- 実用的な機能多数
- 操作マニュアル付き
- 公開後2週間の無料サポート
作業に行き詰まったら、プロに任せるのもひとつの手です。
ぜひご相談ください！
