1. トップページ ＞
  2. コーディング関連情報 ＞
  3. コーディングコラム ＞
  4. Web標準でこれだけソースは簡略化できる！！

コーディングコラム

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標準でコーディングする有効性がわかるかと思います。