まず、とにもかくにもWeb標準に準拠します。

本来HTMLとは、文書構造を指定するための言語であって、レイアウトの表示方法まで指定するようにできていなかったのです。しかし、人間いろんな欲が出てきますからねぇ。。。
なんとかかんとかひねり出して、いろんな技を使ってレイアウトする方法を覚えちゃったんです。
それが、Web標準を無視して暴走しだしちゃったからあら大変！

CSSの登場なのです！これぞ救世主！

 

次に、表示時間の短縮です。

今でこそ、ADSLや光ファイバーが普及して表示されるまでの時間を気にしなくてもよくなりましたが、ダイアルアップの時期は使用時間によって料金が加算されていくは表示は遅いはで１ページ表示されるにもヤキモキしていたものです。
そんなダイアルアップですが、まだまだあなどれません！SourceMarineで制作させていただいたWebサイトでもダイアルアップによるアクセスは存在します。

これが、個人のサイトならさほど問題もないでしょう。見なければいいのですから（笑）
しかし、これがお店や会社のページだったら大変なことです！
少ないとはいえお客様です！大げさに言えば信用問題にもなりかねないでしょう！

それでは、なぜ表示時間が短縮されるのか？

代表的な要因としては、HTMLのレイアウトではテーブルタグというものを使ってレイアウトを構築していくからです。
単純にテーブルタグを使うからと言われてもわからないと思うのでひとつ書いてみましょう！

以下の画像のようなHTMLを組むとします。

っという、たったこれだけを表示するのにこれだけのタグを書かなければいけません

これをCSSで書いてみましょう。

<div id=”profile”>
<dl>
<dt>似顔絵</dt>
<dd><img src=”img/nigaoe.gif” alt=”似顔絵” width=”151″ height=”114″></dd>
<dt>名前</dt> <dd>庄野英朗</dd> <dt>出身地</dt> <dd>福岡県</dd>
<dt>趣味</dt> <dd>HTMLを組むこと</dd>
</dl>
</div>

これだけになります！すごい！

まあ、別にスタイルシートを書かなければいけませんが少なくともこのタグを使ったページは格段にファイル容量が小さくなること請け合いです。

こうやってみてみると、表示時間が短くなるのも納得できたのではないでしょうか？

そして、WebDesignerにはありがた～いメリット

デザインの一括管理やデザインの変更が容易におてがるになります！
テーブルタグをもう一度見てもらうとわかるのですが、ひとつひとつのマスに『width=”200″ bgcolor=”Navy”』やら書いていますが、これは「幅は200ですよ背景色はネイビーですよ～」って指定してあげているのです。こんなものいちいち書いていたら１ページ作り上げるのに相当な時間が必要になりますし、ここの色変えてっといった時また最初から色の指定をしていかなければいけなくなります。

しかし、これがCSSなら一発で簡単に指定できてしまいます。

実際にここの部分だけスタイルシートを書いてみましょう。

#profile dt {
     widt: 200px;
     background-color: navy;
     font-weight: bold;
     color: white;
}

これで左側の枠は全部、幅200pxで背景色ネイビー、フォントの色は白のボールドになります。

例えばこれを、黒の背景にしたいと思えば、background-colorの部分をblackに変えれば全部変わります。

簡単ですね！魔法のようです！

そしてそして！SEO対策強化！

これは、ファイルサイズが軽量化されることからも推測できると思いますが、SEO（サーチエンジ最適化）対策には格段たる違いが出てきます。

GoogleやYahoo!などの検索サイトは、クローラーと呼ばれる検索ロボットがWebサイトにやってきて情報を収集し、データベースに蓄積して、検索のあった時のキーワードと、蓄積したデータから照らし合わせて『このサイトがそのキーワードについてより良く説明してありますよ』っということで、検索順位を決定しています。

このクローラーがサイトにやってきたとき、テーブルタグでレイアウトしていると、『タグが長すぎてめんどくさい！』と言って、途中で帰ってしまいます。なんとも自分勝手なやつです（笑）まあ、次きた時はデータが蓄積してあるので途中からデータ収集を始めるのですが。。。それでも、次来てくれるまで待つということになります。

これがCSSでマークアップしてあれば、さきほど書きましたタグを見ても分かるようにすんなり最後まで、読み込んでいってくれます。

更に、CSSでは文書構造が明確なためクローラーがよりいいように解釈してデータを拾って行ってくれます。

例えば、h1で庄野英朗と入力しておきます。（h1は大見出しのタグです）

そうすると、このページは庄野英朗について書いてあるページなんだと判断してくれます。
そして、その下に続く文章は庄野英朗について書いてあるテキストだと判断してくれて、このページは庄野英朗というキーワードについてより良く説明してあるページなのだと言うことで表示順位が上がります。

そして！クローラーは、テキストが大好きなのです。だから、テーブルタグみたいなのをだらだら書いていると嫌われてしまいます（笑）

そんなこんなでCSSのメリットでした。

« 前の記事

次の記事 »