スタイルシートの補足

スタイルシートによるレイアウトを簡単に紹介しました。
先にレイアウトを紹介したため飛ばした部分があるので、ここで補足しておきます。

記述方法

スタイルを適用させるには以下の３つの方法があります。

・スタイルを適用する要素に、style属性の値として適用する
・head要素に、style要素を記述し適用する
・外部スタイルシートファイルを作成し、link要素で適用したいファイルへリンクする

スタイル属性

実は、テーブルサンプル５でスタイルを設定していたのですが、お気付きになりましたでしょうか？
<td style="color:white; text-align:center">の部分がそうなのですが、style属性を使うことで、セルの文字を白色にし、中央に表示する設定となります。
記述の基本は以下の通りです。
<要素　style="プロパティ:値">
ここでは「タグ」ではなく「要素」という言葉を使っています。HTML文書を構成する要素という意味で理解して下さい。
スタイルを複数指定する場合は、例のようにセミコロン（；）で区切って続けます。
ちなみに、<body style="bgcolor:red">としたページは背景が真っ赤になります。

ページトップへ

style要素

上の例ではtdタグ（要素）の中に記述しました。
このように記述すると、記述した要素にのみ適用されます。
したがって、テーブルのサンプルでは適用したいtdタグのすべてに記述しなければなりません。
スタイルシートを使うことで複雑になってはいけません。この場合は記述する場所を変えることで解決します。
その場所とはhead要素です。
head要素内に記述すると、そのページすべてに適用されます。記述方法は以下の通りです。
<style type="text/css">
<!--
　td {
　　color : white ;
　　text-align : center ;
　}
-->
</style>
分かりやすくするために改行していますが、１行で記述しても構いません。
テーブルサンプル５でこのように記述しておけば、td要素にあれだけのstyle属性を記述しなくてもすべてのtd要素で適用されます。

ページトップへ

link要素

スタイルシートを覚えると、いろいろやれるからこそいろいろ記述してしまい、逆にゴチャゴチャしてしまいます。
style要素を使うことでタグをスッキリさせることができたのに、body要素がスッキリしないのではお話になりません。
ここで、HTMLは文書の内容だけの記述とし、視覚表現はHTMLファイルから分離しましょう。
つまり、スタイルの記述（スタイルシート）を別のファイルとし、HTMLファイルでスタイルシートを呼び出すことにします。
当サイト「レイアウトのあれこれ」でも紹介しましたが、以下のようなメリットがあります。

・複数文書のスタイルを一括管理でき、メンテナンスの効率が大幅に向上する
・HTMLがシンプルで読みやすくなり、あとから編集しやすくなる
・キメの細かい表現が可能になる
・出力メディアごとに異なるスタイルを設定できる
では、別ファイルの作り方を説明します。
やり方は最初にやったHTMLファイルの作り方と同じです。ここでも上の例を取り上げます。
テキストエディタを立ち上げ、次のように記述します。
td {
　color : white ;
　text-align : center ;
}
このファイルを保存するのですが、保存する際の名前はtableとし、拡張子はcssとします。
保存する場所は、とりあえずHTMLファイルと同じ場所にしておきましょう。
これでスタイルシートの別ファイルができました。
このファイルをHTMLで呼び出すのですが、呼び出し方は<head>内で以下のように記述します。
<link href="table.css" rel="stylesheet" type="text/css" />
これで、body要素内に記述した状態と同じになります。
このサイトでもそうですが、スタイルシートを使ったサイトのほとんどが別でCSSファイルを持っています。
今後、いろいろなサイトのソースを見る時はスタイルシートも参考にすると良いでしょう。
<head>内にlink要素でCSSファイルを呼び出していたら、そのファイルも開いてみて下さい。
このサイトでは、CSSという階層（フォルダ）にいくつものCSSファイルを格納しています。
このページの<head>部分を見るとお分かりかと思いますが、３つのCSSファイルを読み込んでいます。
サイト内のどのページにも共通するcommon.cssと、ページ上部のナビゲーション用に用意したglobalnavi.cssと、左部のメニュー用に用意したmenu.cssです。
トップページはトップページ特有の表示をさせるためにtop.cssを用意してあります。
ナビゲーションとメニューは共通なので、common.cssに入れていたのですが、メンテナンスを考えて別ファイルにしました。
どのサイトのスタイルシートでも良いのですが、当サイトのスタイルシートの参照方法をお教えします。
ページのソースを開き、CSSファイルの参照部分を確認しましょう。
このページでは、<link href="../css/common.css"・・・と相対指定となっています。
このページのアドレスが、http://bokechans.net/hp/9_css.htmlなので、ここを基準に辿っていくのですが、面倒なのでアドレスの「9_css.html」の部分を「../css/common.css」で置き換えて、ブラウザのアドレスバーに入力します。
http://bokechans.net/hp/../css/common.css
当サイトで使用しているcommon.cssが表示されましたか？
body要素にフォントや背景の指定をしているのが分かります。
結構な長さかと思いますが、スタイルシートを分離しないと大変なことになってしまいます。
逆に、分離することで各HTMLファイルの容量が軽くなり、使い回しもできるためCSSファイルだけ変更すれば適用するHTMLファイルすべてが更新される訳です。

スタイルシートでのレイアウトは今後の主流ですので、いろいろなサイトから勉強しましょう。
ただ、ブラウザによってスタイルシートの解釈が違います。
スタイルシートは国際的な規定があり、そのバージョンもCSS1、CSS2と進み、現在はCSS3が策定中で、SafariやOpera、Firefoxなどの一部のWebブラウザでは、すでにCSS3の仕様が実装されています。
スタイルシートでの対応が一番遅れていると言うか、国際的な規定があるにも関わらず独自の解釈をしてしまうのが、マイクロソフトのインターネットエクスプローラー（ＩＥ）です。
特にバージョン６がくせ者です。
Windowsマシンが多いためどうしてもＩＥのユーザーも多くなってしまいます。
WindowsXPのユーザーもまだまだ多いため、XPにバンドルされたＩＥ６のユーザーも多いのが現状です。
もし、あなたがWindowsユーザーで、作ったサイトをＩＥのみで確認してるとしたら危険ですので、できるだけ複数のブラウザで確認することをオススメします。
以下に無料で利用できるオススメのブラウザを紹介します。

ページトップへ