スタイルシート利用
スタイルシートでレイアウトしよう。
ホームページのレイアウトは、スタイルシートを使用して記述することが推奨されています。 スタイルシートを利用すると、ホームページ編集がしやすくなる他、 検索エンジン対策にも効果があります。
このページは、 「スタイルシートスタンダード・デザインガイド」 を参考に作成しています。
スタイルシートとは
スタイルシートとは、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に関わらず利用できるので利用者が増えている。
|
Safari | ◯ | Mac | Macintoshで標準搭載のブラウザ。 スタイルシートへの対応はそこそこ。 iCapture というサイトで、Safari での見え方を確認することができる。 |
スタイルシートの外部ファイル化
スタイルシートは、<style>を用いてHTML文書に記述できます。 しかし、スタイルシートを編集しやすくしたり、 また複数のHTML文書で共有したりするには、 スタイルシート外部ファイル化が便利です。
HTMLヘッダ部分に、 <link rel="stylesheet" type=text/css href="ファイル名"> のように記述することで、外部ファイル化したスタイルシートを適用することができます。
スタイルシートで段組み もごらんください。