スタイルシート利用

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

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

このページは、 「スタイルシートスタンダード・デザインガイド」 を参考に作成しています。

スタイルシートとは

スタイルシートとは、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="ファイル名"> のように記述することで、外部ファイル化したスタイルシートを適用することができます。

スタイルシートで段組み もごらんください。

新着記事
人気記事ベスト3
全てのホームページ製作者に
アフィリエイトで稼ぐ方法
サーチエンジン最適化
携帯サイトの作り方
レンタルサーバの選び方
ホームページ作成ソフト
python入門
パソコン便利グッズ