16.4.2 CSSの記述方法 (HWB)

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

style属性

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

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

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

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の色の指定が衝突します．このような場合は

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

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

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

16.4.1 CSSの簡単な例		16.4.2 CSSの記述方法		16.4.3 「意味のない」要素
2009年度版に向けて現在作業中です．このページに関してお気づきの点がありましたらコメント投稿システムまでお願いします．			Thu, 03 Apr 2008 10:34:51 JST (484d)

2009-08-01版
HWB > 16. WWWと情報発信 [一覧] > 16.4 HTML文書の書き方(2) [一覧] > 16.4.2 CSSの記述方法