スタイルシート利用

スタイルシートでレイアウトしよう。

ホームページのレイアウトは、スタイルシートを使用して記述することが推奨されています。スタイルシートを利用すると、ホームページ編集がしやすくなる他、検索エンジン対策にも効果があります。

スタイルシートとは、HTMLで記述された文書の装飾(レイアウト) を定めるファイルのことで、CSS(cascading style sheet)とも呼びます。

W3Cでは、 HTML文書のレイアウトはCSSを用いて記述することが推奨されています。

スタイルシートでレイアウトすると、以下のようなメリットがあります。

ロジックとレイアウトの分離: スタイルシートを利用してレイアウトを設定することで、 HTMLは文書の論理構造だけを記述することができます。 HTMLに余計なタグの記述が不要となり、 HTMLソースがシンプルで見やすくなります。また、レイアウト変更はスタイルシートを変更するだけで、 HTMLに手を加える必要が無くなります。
複数のHTML文書で共有可能: スタイルシートを複数のHTML文書で共有することができるので、サイト全体のレイアウトを統一することができます。
検索エンジン対策: スタイルシートを利用すると、HTML文書に余計なタグが入らないため、検索エンジンが文書内容を解析しやすくなります。このため、上位表示されやすくなります。

W3Cの規格に準拠したブラウザでは、スタイルシートでレイアウトした通りに表示されます。しかし、残念なことに全てのブラウザが準拠しているわけではありません。

主なブラウザ
	CSS対応	OS	特徴
Internet Explorer	△	Win	Windowsで標準搭載されているため、利用者は多い。スタイルシートに関してはサポートしていない機能が多く、バグもいくつか確認されている。スタイルシートの記述にミスがあった場合、なんとか表示される仕様になっているらしい。
Mozilla Firefox	◎	Win, Mac, Linux	ブラウザ自体の機能が優秀で、OSに関わらず利用できるので利用者が増えている。スタイルシートにも良く対応している。仕様はかなり厳格で、スタイルシートの記述にミスがあると、記述にしたがって表示される(レイアウトが崩れる)。
Opera	◎	Win, Mac, Linux	高速で機能も豊富なブラウザ。OSに関わらず利用できるので利用者が増えている。 ~~有料だが、料金を払って購入する価値がある。~~ 2005年9月より、無料で配布されるようになりました。スタイルシートにも良く対応している。
Safari	◯	Mac	Macintoshで標準搭載のブラウザ。スタイルシートへの対応はそこそこ。 iCapture というサイトで、Safari での見え方を確認することができる。

スタイルシートは、<style>を用いてHTML文書に記述できます。しかし、スタイルシートを編集しやすくしたり、また複数のHTML文書で共有したりするには、スタイルシート外部ファイル化が便利です。

HTMLヘッダ部分に、 <link rel="stylesheet" type=text/css href="ファイル名"> のように記述することで、外部ファイル化したスタイルシートを適用することができます。