ファイルサイズがこんなに違う

まず、CSS前後の表示を見てみます。

●CSS前

ファイルサイズ：22,190 バイト

●CSS後

ファイルサイズ：7,375 バイト

内容はほとんど変わらないのに、ファイルサイズは3分の1以下です。
ちょっと驚きですよね。
HTMLコードが少ないということは、ブラウザがHTMLを処理する時間も当然早くなるわけで、検索エンジン対策としてもかなり有効です。

実は、CSS前としてある方でもフォントの指定などはCSSを使っており、外部CSSをリンクしています。
それでもこれだけ違うのは、何が原因なのでしょうか。

では、HTMLコードを見てみます。

●CSS前

●CSS後

HTMLを見てまずわかるのは、CSS前には、Javascript や、レイアウトのためのHTMLタグなど、実際の内容と関係のないコードが非常に多いということです。

その原因のひとつには、Fireworks で作成した、複雑なイラストの部分があります。
左上には、テキストで新着情報があり、女の子の目は瞬き、コンテンツの上にマウスを乗せると説明文が表示されるなどの仕掛けをしています。
この部分のレイアウトのためのテーブル部分だけで、HTMLコードは62行に及びます。
（Javascriptのコードは含んでいません）

これが、CSS後では、画像配置のためのHTMLコードが3行、
コンテンツ説明の部分が30行です。
しかし、CSS前はコンテンツ説明は画像、CSS後はテキストです。このためにCSS後では12行増えているので、これを差し引くと18行。
つまり、実質、41行減っている計算になります。

もう少し詳しく説明すると・・・

CSS前では、画像とテキストを重ねて配置、静止画像内にアニメーションGIFを配置、マウスロールオーバーを大きな画像に重なるなど、ちょっと自分でも自慢したくなるような（笑）凝りに凝った仕組みを作っていました。

ところが、CSS後では、大きな画像とテキスト、アニメーションGIF、マウスロールオーバーとの重なりは、それぞれを divタグで囲んで、positionプロパティで重なるように指定するだけでよいわけですから、全然頭を使わなくて良いのです。
正直、CSS前の苦労は何だったんだと思いました。

---

余計なタグがなくなるだけでも、かなりCSSの良さが実感できます。
でも、次の効果は、最初に知ったときは愕然としました・・・