CSS講座 / CSSの適用方法：インライン・内部・外部スタイルシート

CSS講座

CSSは要素のstyle属性、HTML内のstyle要素、外部CSSファイルへのlink要素で適用できます。複数ページの共通デザインには外部スタイルシートが管理しやすく、ほかの方法は小さな確認やページ固有の用途に向いています。

三つの書き方と使いどころ

方法	書く場所	適した用途と注意点
インライン	HTML要素のstyle属性	一つの要素をすぐ確認できる一方、同じ見た目を繰り返すと修正箇所が増えます。
内部	head内のstyle要素	一ページの実習に便利です。複数HTMLへコピーすると、それぞれを修正する必要があります。
外部	別の.cssファイルとlink要素	複数ページで共通化できます。接続先のパスと読み込みを確認します。

内部CSSが外部CSSより常に強いわけではありません。通常の規則はカスケードに従ってセレクターや記述順などを比較します。インライン宣言は通常の作成者スタイルより優先することが多いものの、!importantなどで条件が変わります。比較の順序は継承・詳細度・カスケードで整理します。

インラインと内部スタイルを書く

インラインでは、変更したい要素のstyle属性に宣言を書きます。セレクターや外側の波括弧は書きません。

<p style="color: #087f5b; background-color: #e9f7ef;">
  We open at 9 a.m. every day.
</p>

内部スタイルではhead内のstyle要素に、セレクターと波括弧を含む規則を書きます。HTMLのクラス名noticeに対し、CSSでは.noticeと指定します。

<head>
  <style>
    .notice {
      color: #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
  <p class="notice">We open at 9 a.m. every day.</p>
</body>

上の二つは記述場所を比較する断片です。方法を切り替える実習では前の方法で入れた同じプロパティを取り除きます。複数の指定を残すと、接続の失敗なのか、宣言同士の競合なのかを判断しにくくなります。

二つのページを外部CSSにつなぐ

空のgardenフォルダーを作り、次の構成で三つのファイルを保存します。CSSファイルにはCSSだけを書き、<style>タグを入れません。

garden/
├─ index.html
├─ visit.html
└─ style.css

まずindex.htmlです。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Small Garden</h1>
  <p class="notice">We open at 9 a.m. every day.</p>
  <a href="visit.html">View visitor information</a>
</body>
</html>

次にvisit.htmlです。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Visitor Information</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Visitor Information</h1>
  <p class="notice">Bring a water bottle and comfortable shoes.</p>
  <a href="index.html">Return to the garden introduction</a>
</body>
</html>

両方から読み込むstyle.cssです。

body {
  margin: 24px;
  font-family: sans-serif;
  line-height: 1.7;
}
h1 { color: #087f5b; }
.notice {
  padding: 16px;
  border: 1px solid #087f5b;
  background-color: #e9f7ef;
}

rel="stylesheet"は接続先がスタイルシートであること、href="style.css"は読み込む位置を表します。通常のHTML5のCSS接続ではtype="text/css"を別に書く必要はありません。この例はローカルファイルを直接開いて実行できます。

index.htmlを開き、緑の見出しと薄い案内枠を確認します。「View visitor information」を押すと別の内容のページへ移動しますが、見出しと枠の見た目は共通です。style.cssの見出し色を#1d4ed8に変え、両方のページを再読み込みすると、二つとも青くなります。

フォルダー構成と相対パス

通常の文書ではリンク先をHTMLファイルの位置から解決します。base要素で基準URLを変更していないことが前提です。同じフォルダーならstyle.css、子のcssフォルダーならcss/style.cssになります。

garden/
├─ pages/
│  └─ index.html
└─ css/
   └─ style.css

この構成でpages/index.htmlからCSSを読む場合はhref="../css/style.css"と指定します。../は一つ上のフォルダーを表します。Webのパスにはスラッシュを使い、先頭が/css/style.cssならサイトのルートを基準にするため意味が異なります。具体的な接続例はMDNのCSSの始め方も参照できます。

接続・対象・競合を順に調べる

まずファイルが読み込まれているか確認します。拡張子が.css.txtになっていないか、ファイル名の大文字小文字やフォルダー構成が一致するかを調べます。Webサーバー上なら開発者ツールのNetworkで要求と応答を見られますが、ローカルファイルには同じHTTP状態が出るとは限りません。
次に対象が合っているか確認します。HTMLがclass="notice"なのにCSSが.notcieなら、読み込みが成功していても一致しません。Elementsで実際のクラスを確認します。
最後に別の宣言が勝っていないか確認します。Stylesの打ち消し線や適用元を見て、最終的な値を調べます。

接続の確認にはCSSの最後に一時的にbody { background-color: #fff4cc; }を加えて再読み込みします。背景が黄色ならファイルは届いています。その後はセレクターと競合を調べ、一時的な規則を削除します。読み込まれないファイルや綴り間違いは!importantでは直せません。開発者ツールでのCSS確認で実際に切り分けます。

CSS講座