17.4.2 CSS の記述方法

CSS を記述する方法には，今から説明する三通りの方法があります．同じスタイルの指定をすれば，どの指定方法を使っても見ばえが変化することはありません．ウェブサイト全体に共通するデザインは一つの外部ファイルに保存するなど，汎用性に応じて使い分けをすると良いでしょう．

style 属性

スタイルシートをタグの属性として書く方法です．例えば次のようにします．

<h1 style="color:red;">東大太郎の自己紹介</h1>

head 要素や meta 要素のようにどう見てもスタイル指定の出来なさそうな要素を除いて，基本的にほとんど全ての要素に対してこの方法で指定することができます．

head 要素内

head 要素内に style 要素を書く方法です．

<head> <style> <!-- h1{ color:red } --> </style> </head>

<!– と –> で囲ったのは，CSS 非対応ブラウザがこの部分を読まないようにするためです．

外部ファイル

CSS を記述したファイルを HTML 文書の入ったファイルとは別に作成する方法です．この場合，HTML 文書の head 要素内で，link 要素を用いて外部ファイルの場所を次のように指定しなければいけません．例えば HTML 文書と同じディレクトリにある style.css の中で CSS を記述した場合は

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

のようにします．rel 属性は，style.css に CSS が記述されることをブラウザに教えてあげるためのものです．href の部分は a 要素と同じように，絶対パスでも相対パスでも構いません．

宣言の衝突について

複数の方法を使ってスタイルを指定すると，スタイルの指定が衝突することがありえます．例えば

<style> <!-- h1 { color:red; } --> </style> (中略) <h1 style="color:blue;">東大太郎の自己紹介</h1>

と書くと，h1 要素の色の指定が衝突します．このような場合は

  1. style 属性
  2. head 要素内
  3. 外部ファイル

の順に優先されます．ですから今の場合は

<h1 style="color:blue;">東大太郎の自己紹介</h1>

とだけ書いたのと同じ意味になります．また，head 要素や外部ファイルの中同士でスタイル指定の衝突があった場合は，後に書いたものが優先されます．