1. TOP >
  2. 運営者紹介 >
  3. 運営者ブログ >
  4. 2006年12月

2006年12月

Web標準でこれだけソースは簡略化できる!!

制作ソフトは非常に便利なツールですが、基本的にはテーブルレイアウトによる構築です。テキストの装飾などをCSSで設定できるようにはなったとは言え、CSSレイアウトにはまだ対応できていません。それではテーブルレイアウトなどの従来の方法で制作したページと、Web標準に基づき制作したページとでは、HTMLのソースにどの程度違いが出るでしょうか。下記サンプルのように、ブラウザ表示させた場合を分かりやすく比較してみました。

項目サンプル

まずはテーブルレイアウトにした場合のHTML

<table border="0" cellpadding="0" cellspacing="5">
 <tr>
  <td><img src="○○○.gif"></td>
  <td><font color="#369"><strong>コンテンツ1</strong></font></td>
 </tr>
 <tr>
  <td><img src="○○○.gif"></td>
  <td><font color="#369"><strong>コンテンツ2</strong></font></td>
 </tr>
</table>

そしてWeb標準に基づきCSS設定にした場合のHTML

<ul>
 <li>コンテンツ1</li>
 <li>コンテンツ2</li>
</ul>

一目でわかるとおり、ソースがシンプルになりました。項目としての意味合いからリストタグを使用し、フォント色や太さ、行頭の画像といった視覚表現についてはCSSで設定します。CSSの設定は一度設定してしまえば他のページでも利用できるので、効率よく項目を増やすことができます。

シンプルなソースはファイルサイズ軽減にもつながるので、上記例では項目が増えれば増えるほどWeb標準コーディングする有効性がわかるかと思います。