スタイルシートのメリットとデメリット
スタイルシートを使うメリットは、たくさんあります。
いままですべてHTMLタグでサイトデザインしていた人も、スタイルシートを使ってみることをオススメしたい、と管理人は思うのであります。
HTMLソースを簡潔に－のちの手直しが楽チンに
サイトの手直しでHTMLソースを見たらゴチャゴチャ・・・、やる気が失せますね。
こんな状況を回避するためには、検索エンジンが必要としない「デザイン関連」のタグをなるべく減らし、HTMLはなるべくシンプルに、デザインはスタイルシートに任せましょう、と言うことになります。
例えば、文字の修飾に使うフォントタグや、背景の色を指定したり、文字の位置を指定する属性値などは、スタイルシートに任せてしまった方がすっきりします。
また、テーブルタグを外してレイアウトをすることで、煩雑だったソースが一気にすっきりします。
テーブルタグを使わないと、次のようなメリットも生れてきます。
構造を気にせずキーワードの配置ができる。
HTMLのテーブルタグを使ったレイアウトで、もし、キーワードをソースの最初に記述したいと思ったとき、自ずからキーワードは「左側」のセルに記述することになります。
なぜなら、テーブルタグは、左セルから右セルへと順番に記述しなくてはならないからです。
かつて読んだSEO本に「ユーザビリティを考慮して、左にメニューを配置するのがいい」と書かれていたのですが、右利きの人が右手でマウスを扱う場合、右にメニューがあっても不具合はありません。
逆に考えると、左にメニューを置かざるをえない、すなわち、テーブルタグを使って、サイトのキーワードとリンクを含むコンテンツ名が記述されているメニューを、ソースの最初に記述するために、テーブルの左セルに記述しなくてはならなかったのでは？と考えてみたり。
これが、テーブルタグのもう一つの弊害です。
ですが、スタイルシートはこの縛りを受けません。仮に右に、キーワードを多く含むメニューを配置しても、ソースの最初に記述することが可能になります。
（HTMLソース）
<div id="container">
<div id="meｎu">
<ul>
<li>キーワード１</li>
<li>キーワード２</li>
<li>キーワード３</li>
</ul>
</div>
<div id="content">
・・・中略・・・
</div>
</div>
（スタイルシート）
#container { width: 750px; }
#menu { float: right; width: 250px; }
#content { float: right; width 500px; }
上記は簡単なHTMLソースとスタイルシートの例です。「menu」がメニューです（見てのとおり）。
このスタイルシートでは、フロートプロパティで、縦に2分割したブロックを右詰に配置します。
このとき、右詰なので、右側におくメニューを先に記述します。
左側にメニューを置くならば、スタイルシートの「right」を「left」を変えて記述すればいいのです。
どちらにしても、配置にとらわれずにHTMLソースを記述できるということです。
これが、スタイルシートの利点の一つです。
DOCTYPE宣言文によっては、上手く配置されません。XHTMLの宣言文を省略せずに記述することを前提にしています。
総括すると、レイアウトのためのテーブルタグを外すと、ソースの煩雑さを避けられ、キーワードの配置に考慮した、構造的なソースを記述することが可能なる､ということなのです。
HTMLは文章の構造を記述するため、スタイルシートはレイアウトやデザインを記述するためのものなのです。
一方で、見出しを<h～>タグや、強調を示す<strong>、<em>タグなどは、このサイトは何について書かれているサイトなのか、テキストの中でもどこが強調されているのかを判断する大切なタグです。
さらに文章の段落を示す<p>タグが、そのサイトの本文の位置を示し、これもサイトのコンテンツを示す手がかりとして、検索エンジンは重視します。
見出しタグや段落タグは、自動的に改行と１行分の余白を開け、見出しタグは文字が大きく太いなど使い勝手が悪かったりします。
しかし、文章の構造を示すタグは、それが使いにくいものでもHTMLで記述すべきです。
それらの見栄えを調整するのもまた、スタイルシートの役割なのです。
模様替えは絶対楽チン！スタイルシートを変更すれば全ページ一斉模様替えも
サイトのデザイン全てをスタイルシート（外部ファイル）で一括で行った場合、ページの模様替えも非常に楽になります。
例えば当サイトの見出し部分。全て同じです。スタイルシートで設定してありますが、もしもここを直そうとしたとき、スタイルシートの外部ファイルの中の該当部分を変更すれば、全てのページの見出し部分が一度に変更できます。
もしもHTMLタグで全てのページに書き込んでいたら、膨大なサイト内のページ全てを修正せねばなりませんが、スタイルシートを利用していれば、スタイルシートだけを修正すればよいのです。
スタイルシートでも、タグごとに書き込む方法や、ページごとに書き込む方法もありますが、各ページのデザインをなるべく共通化し、外部ファイル化することで、模様替えがあっという間に出来ます。
また、レイアウトの変更もHTMLタグを変更せずにスタイルシートだけで可能になり、サイトのデザインの管理において有益であることは間違いありません。
多彩なデザインが可能に。よりおもしろいスタイルの設定
HTMLのタグでは設定できないスタイルもたくさんあります。
管理人がスタイルシートを学ぼうと思ったキッカケは、一つには検索エンジン対策と言うのがありましたが、それよりも大きな理由だったのが、「アンカータグの装飾に惹かれた」からです。
特にポインタを当てると背景色が変わったり、アンダーラインが出たり、文字色が変わったりする装飾は、HPを作り始めた管理人に魔法のように見えたのです（少しおおげさ？）。
これはぜひ自分でもやりたい！と思ったのがスタイルシートを始めた大きなきっかけだったのです。
今ではあのときの新鮮味はなく、なぁなぁでやってます。。。歳月って怖いなぁ。
スタイルシートを使う時の問題点
今まで書いてきたように、スタイルシートを利用することには利点がたくさんあります。
しかし一方で、若干の問題点もあります。
その問題点は、「ブラウザによって、スタイルシートの解釈の違いがあること」です。
同じサイトを違うブラウザで見た場合、若干の誤差や表示崩れが発生することがあります。
ほんのわずかな差であれば、誤差範囲内として目をつぶるとしても、大々的に崩れてもらっては困ります。
そして、こうしたことが、しばしば起こりうるのです。
こうした問題にぶつからないようにするためには、できればどのブラウザで見ても大崩しないようにレイアウトした方が、無駄な手間がかからなくていいかもしれません。
どうしてもアクロバット的なレイアウトがしたくて、ブラウザの崩れも気になる場合は、筆者的には面倒だと思いますが、ブラウザごとにスタイルシートを別にする方法もあります。