CSS ・ CSSの記法
外部スタイルシート
CSSファイルを読み込む
CSSを別のファイル（.css）に書き、HTMLの head で link 要素を使って読み込む方法です。いちばん基本となる書き方です。
01
サンプルコード
HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="UTF-8">
5 <title>外部スタイルシート</title>
6 <link rel="stylesheet" href="style.css">
7</head>
8<body>
9 <h1>メニュー</h1>
10 <p class="lead">見た目は style.css にまとめて書いています。</p>
11</body>
12</html>
CSS
1/* style.css */
2h1 {
3 color: #7d5411;
4 border-bottom: 2px solid #b68235;
5}
6.lead {
7 color: #555;
8}
02
実行結果
ブラウザでの表示CSS欄の内容を style.css として読み込んだ状態で表示しています
03
解説
外部スタイルシートは、CSSを .css ファイルに書き、HTMLの head の中で link 要素を使って読み込む方法です。上の例では、CSS欄の内容を style.css として読み込んだ状態を表示しています。
HTML（構造）とCSS（見た目）を別のファイルに分けられるため、どちらも読みやすくなります。複数のページで同じ style.css を読み込めば、1つのファイルを直すだけでサイト全体のデザインを変更できます。
ブラウザは一度読み込んだCSSファイルを保存（キャッシュ）しておくので、2ページ目以降の表示も速くなります。実際のサイト制作では、この方法が基本です。
04
応用例・注意点
3つの書き方の比較
| 書き方 | 説明 |
|---|---|
外部スタイルシート | 別ファイルに書いて link で読み込む。複数ページで共有でき、管理しやすい |
内部スタイルシート | HTMLの head 内の style 要素に書く。そのページだけに効く |
インラインスタイル | 要素の style 属性に直接書く。その要素だけに効き、詳細度が非常に高い |
複数のCSSファイルを読み込む
後に読み込んだファイルの指定ほど優先されます（詳細度が同じ場合）。共通のCSSを先に、ページ専用のCSSを後に書きます。
HTML
1<link rel="stylesheet" href="css/base.css">
2<link rel="stylesheet" href="css/components.css">
3<link rel="stylesheet" href="css/top.css">
注意点
- 01href のパスは、HTMLファイルの場所を基準に書きます。フォルダ構成に注意します。
- 02CSSファイルの中には style タグは書きません。CSSの記述だけを書きます。
- 03link は head の中に書きます。body の途中に書くと、表示がちらつく原因になります。