スタイルシートについて

スタイルシートとは、HTMLで記述されたページの見栄えに関する制御・・・簡単にいうとWebページのデザインとレイアウトを定義したものです。

一般的にスタイルシートとは　CSS（Cascading Style Sheets＝カスケーディング・スタイルシート）の事をいいます。

スタイルシートを利用するとHTMLの文章の構造とレイアウトやデザインの構造を分離することが出来ます。

例えば、100ページもあるホームページを運営していて、ある時「デザインを変えたい・ページをリニューアルしたい」と思いました。100ページ分すべて変更したいのですが、１ページ１ページ変更するのは大変な時間と労力が必要です。しかし、スタイルシートを利用していればスタイルシート１枚（ひとつのファイル）を変更するだけで、100ページ分すべて変更が可能です。

上記のようにHTML文章からレイアウトやデザインの構造を切り離す分、HTMLファイルの容量が軽くなり、アクセスがあった際の情報のダウンロード時間が短縮されます。検索エンジンで目的のサイトを見つけても表示されるのに時間がかかれば次のサイトに変えますよね。

HTMLの文書構造を保ちながらの自由なレイアウトが可能とは、、検索エンジンのロボットはHTML文章を上から順に読み込みます（すべてを均等に読み込む訳ではありません）。

HTML構造の決まり事として、HTML文章の上の方の階層にある情報は画面上では常に左側に位置します（２カラムレイアウトの場合、コンテンツにしろ、メニューにしろ左側に設定した方がHTML構造では上階層に記述されます）。

よって検索エンジン対策を考えるなら、キーワードなどが多く含まれるコンテンツ部分を左にレイアウトした方が有利なのです。当サイトの「テーブルレイアウト」で右サイドバーにしているのはその為です。

では、スタイルシートならどうでしょう。スタイルシートなら（索エンジン対策で）重要情報をHTML文章の上層階に置きながら・左サイドバーでも・右サイドバーでも関係なく自由にレイアウトする事が出来ます。

メリット面だけをみると「スタイルシートってすごいな」と思うのですが、それなりにデメリットもあります。

スタイルシートでホームページをレイアウトする事は世界共通な仕組みに従っているわけですが、各ブラウザ面の方がまだまだ対応しきれてないのが現状です。

どういう事かと言うと、例えば、スタイルシートの設定に対する各ブラウザ側の解釈が違うのです（InternetExplorerの最近のバージョンと古いバージョンでも違います）。

もっとわかりやすく説明すると、例えば・・・・
幅400px高さ100pxのボックを作りました。内側に10pxの余白（パディング）を設定、ついでに枠の色を青色にした場合に、

テキスト領域 線と余白は含まず400px

 

テキスト領域 線と余白は含まず400px

 

と表示が異なります。

古いブラウザは幅400pxを【青】のボーダー部分を含めるのに対し、その他のブラウザは含めません。純粋にテキスト部分のエリアだけを400pxとして計算します。

上記の図でいえば、上が最近のブラウザで下が古いブラウザになります。

では、これをふまえて実際にスタイルシートでページを作成してみましょう。