Webページの見た目を整えるCSSには、3つの書き方（適用方法）があります。
- 外部CSS（外部ファイルで管理）
- 内部CSS（styleタグに記述）
- インラインCSS（タグ内のstyle属性）
それぞれに特長・用途・メリットがあり、状況によって使い分ける必要があります。
この記事では、それぞれの書き方の違いと、初心者が迷わない使い分け方を分かりやすく解説します。
CSSの書き方はこの3つ
| 書き方 | 説明 | メリット | 主な用途 |
|---|---|---|---|
| 外部CSS | 別ファイル（.css）に記述 | 管理しやすい、ページ高速化 | サイト全体のデザイン |
| 内部CSS | head内の <style> に記述 |
そのページだけに適用 | 単一ページの調整 |
| インラインCSS | タグの style="" に直接記述 |
一部だけすぐ変更 | 限定的な微調整 |
初心者でも必ず理解するべき重要な知識です。
外部CSS（もっとも推奨される方法）
CSSを 外部ファイル（style.css）として読み込む方法です。
WordPressや商用サイトでは、ほぼこの書き方が使われます。
書き方
（HTML側）
<link rel="stylesheet" href="style.css">
（style.css）
h1 {
color: #E64A19;
font-size: 28px;
}
外部CSSのメリット
管理がしやすい
すべてのデザインが1つのCSSファイルにまとまり、編集が簡単です。
複数ページに適用できる
1つのCSSを読み込むだけでサイト全体の見た目を統一できます。
表示速度が速くなる
ブラウザがCSSファイルをキャッシュ（保存）するため、読み込みが高速化します。
向いている用途
- サイト全体のデザイン
- WordPressの子テーマCSS
- 複数ページを使うWebサイト
内部CSS（styleタグで書く方法）
HTMLファイルの <head> 内に CSS を直接書く方法です。
書き方
<head>
<style>
p {
color: #333;
line-height: 1.7;
}
</style>
</head>
内部CSSのメリット
ページ単位でデザインを切り替えられる
特定のページだけにCSSを適用したいときに便利。
ファイルが増えない
外部CSSファイルを追加しなくてもよい。
内部CSSのデメリット
- ファイルが長くなる
- CSSが共有されないため管理しにくい
- 再利用性が低い
向いている用途
- LP（ランディングページ）のページ専用デザイン
- イベントページなど、サイト全体とデザインが異なる場合
- Web教材の例示や小規模ページ
インラインCSS（style属性に直接書く方法）
タグに直接CSSを書く方法です。
書き方
<p style="color: red; font-weight: bold;">
この部分だけ赤文字にする例
</p>
インラインCSSのメリット
ピンポイントの装飾がすぐできる
- 1文字だけ色を変えたい
- 強調したい部分だけを一時的に変更したい
など、微調整に便利です。
インラインCSSのデメリット（初心者の落とし穴）
コードが汚れて管理不能になる
大量に使うと、後で修正するときに非常に大変です。
優先度が強すぎる（トラブルの原因）
インラインCSSは 優先度が非常に高い ため、外部CSSが効かなくなることがあります。
向いている用途
- ちょっとした強調
- メール文面など外部CSSが使えない場合
- 自動生成HTMLの一部を微調整するとき
3つの書き方の優先順位（重要）
CSSには「優先順位」があり、同じプロパティが複数ある場合 後から読み込まれた・強いものが勝ちます。
優先度は以下の順番です：
インラインCSS ＞ 内部CSS ＞ 外部CSS
つまり、インラインCSSがもっとも強い。
例：
<p style="color: blue;">青色が優先される</p>
外部CSSで p { color: red; } と指定していても、インラインの青色が勝ちます。
3つの書き方の使い分けまとめ
| 書き方 | メリット | デメリット | 向いているもの |
|---|---|---|---|
| 外部CSS | 管理しやすい／高速 | ファイルが必要 | サイト全体のデザイン |
| 内部CSS | ページ専用に使える | 再利用しにくい | LP・単発ページ |
| インラインCSS | すぐ装飾可能 | コードが汚れる | 微調整のみ |
結論
→ 基本は外部CSS、必要に応じて内部CSS、最小限だけインラインCSS。
よくある間違いと注意点
- インラインCSSを使いすぎて修正不能になる
- 内部CSSを全ページで使ってしまう
- 外部CSSを複数作りすぎて管理が乱れる
- 優先順位（インラインが最強）を忘れる
初心者がつまずきやすいところなので気をつけましょう。
まとめ
この記事では CSS の3つの書き方について解説しました。
- 外部CSS → 最も推奨、サイト全体向け
- 内部CSS → ページ専用デザイン向け
- インラインCSS → ピンポイント調整のみ
CSSを正しく使い分けることで、メンテナンス性も高まり、
サイト全体の見た目を美しく保つことができます。
著者からのひと言
CSSは書き方の仕組みを理解しておくと、そのあとの学習がとてもスムーズになります。
どの書き方にも役割がありますので、まずは「外部CSSが基本」と覚えておけば大丈夫です。
次回は、「CSSルールセットの基本構造」についてです。
