現在地: Home » テーブルレイアウトとスタイルシートレイアウトのタグ記述量比較
タグ記述量比較
テーブルレイアウトとスタイルシートレイアウトでの(X)HTMLのタグの記述量比較です。条件は下記の通りです。
テーブルレイアウト
- レイアウトはシンプルな左サイドバータイプです。
- テーブルレイアウトのサンプルは、某テンプレート配布サイトよりダウンロードさせて頂きました。
- サンプルソースでは、本文内の情報は掲載していません。タグの記述量という点で、サイドバーのメニュー部分はソースを載せています。
- メニュー部分は、javascriptを使用したロールオーバー指定。
スタイルシートレイアウト
- XHTMLソースは、当サイトで配布しているものを利用しました。
- デザイン指定は外部CSSをリンクしています。
- サンプルソースでは、本文内の情報は掲載していません。タグの記述量という点で、サイドバーのメニュー部分はソースを載せています。
- メニュー部分は、スタイルシートを使用したロールオーバー指定。
テーブルレイアウトについては、ホームページビルダーなどで「初めてホームページを作成する」という点を考慮して、極力「初心者の方が作成するであろう指定」で作成してみました。(なんだかテーブルでデザインするのも何年ぶりなので、少し自信がありません。)
今回のポイント
初級ホームページ作成講座-ホームページの構造-テーブルレアイアウトについて-テーブルレアイアウトのデメリットにて
- 本来テーブル（表）はレイアウトを組むものではない
- アクセシビリティ上はあまりおすすめ出来ない
- 構造が複雑化すると手に負えない
- 構造が複雑化するとHTMLの容量が大きくなる
- 構造が複雑化すると表示に時間がかかる
と解説しました。3,4,5について順にサンプルソースをみてみます。
- 構造が複雑化すると手に負えない
-
下記サンプルソースをみて「ヘッダー部分」「コンテンツ部分」と「サイドバー部分」「フッター部分」などの区切り、つまり、どこからどこまでが該当箇所なのかお解かりになるでしょうか。
tableタグの入れ子状態なので、製作者本人でも該当箇所を探すのは一苦労ではないでしょうか。今回は本文部分を掲載していませんが、もし本文部分もさらにtableで入力されていたらどうでしょう。これではいくらインデント処理やコメントタグを使用しても非常に複雑なファイルになってしまいます。
- 構造が複雑化するとHTMLの容量が大きくなる
-
これは下記ソースをみてもらえれば一目両全です。下記ソースは<body></body>内だけを記述してあります。
テーブルレイアウトの場合、いかに無駄なタグが多いかお解かり頂けるのではないでしょうか。
- 構造が複雑化すると表示に時間がかかる
-
今回拝借させてもらったテンプレートは、全体をテーブルで囲っています。(縦:3横:2のセルをヘッダー部分とフッター分は結合しています)
tableタグは「タグ内の情報が全て読み込まれてから表示が始まる」という特性をもっています。
今回サンプルでは商品データをあまり載せなかったので、表示速度はさほど遅くはないのですが、いくらブロードバンド時代でもネットショップなどで商品画像が多いものなど(サーバとの絡みもありますが)あまりお薦めは出来ません。
テーブルレイアウトのHTMLソース
<center> <table border="0" cellspacing="0" cellpadding="0" width="760"> <tr> <td colspan="2" width="100%" height="180" valign="top" id="xxx"> <h1><img src="xxx.jpg" border="0" alt="xxxxxxxxxx" width="xxx" height="xxx" /></h1> </td> </tr> <tr> <td width="200" align="center" valign="top"> <table border="0" cellspacing="0" cellpadding="0" width="180"> <tr> <th> <img src="xxx.gif" width="180" height="30" alt="メニュー" border="0" /> </th> </tr> <tr> <td> <a href="#"> <img src="xxx.gif" border="0" alt="トップページ" width="180" height="40"(*) - - -実際は改行していません onmouseover="xxx.gif'" onmouseout="this .src='xxx.gif'"> </a> </td> </tr> <tr> <td> <a href="#"><img src="xxx.gif" border="0" alt="ソフトウェア" width="180" height="40" (*) onmouseover="xxx.gif'" onmouseout="xxx.gif'"></a> </td> </tr> <tr> <td> <a href="#"><img src="xxx.gif" border="0" alt="デスクトップPC" width="180" height="40" (*) onmouseover="xxx.gif'" onmouseout="xxx.gif'"></a> </td> </tr> <tr> <td> <a href="#"><img src="xxx.gif" border="0" alt="デスクトップPC" width="180" height="40" (*) onmouseover="xxx.gif'" onmouseout="xxx.gif'"></a> </td> </tr> <tr> <td> <a href="#"><img src="xxx.gif" border="0" alt="プリンター" width="180" height="40" (*) onmouseover="xxx.gif'" onmouseout="xxx.gif'"></a> </td> </tr> <tr> <td> <a href="#"><img src="xxx.gif" border="0" alt="プリンター" width="180" height="40" (*) onmouseover="xxx.gif'" onmouseout="xxx.gif'"></a> </td> </tr> </table> <br> <table border="0" cellspacing="0" cellpadding="0" width="180"> <tr> <th> <img src="xxx.gif" width="180" height="30" alt="about us" /> </th> </tr> <tr> <td> <a href="#"> <img src="xxx.gif" border="0" alt="会社概要" width="180" height="40" (*) onmouseover="xxxgif'" onmouseout="xxx.gif'"> </a> </td> </tr> <tr> <td> <a href="#"> <img src="xxx.gif" border="0" alt="プライバシーポリシー" width="180" height="40" (*) onmouseover="xxx.gif'" onmouseout="xxx.gif'"> </a> </td> </tr> <tr> <td> <a href="#"> <img src="xxx.gif"" border="0" alt="特定商取引に基づく表記" width="180" height="40" (*) onmouseover="xxx.gif'" onmouseout="xxx.gif'"> </a> </td> </tr> <tr> <td> <a href="#"> <img src="xxx.gif" border="0" alt="サイトマップ" width="180" height="40" (*) onmouseover="xxx.gif'" onmouseout="xxx.gif'"> </a> </td> </tr> </table> <br><br> <table border="0" cellspacing="0" cellpadding="5" width="180"> <tr> <th bgcolor="#000000"><font color="#ffffff">information</font></th> </tr> <tr> <td bgcolor="#666666"> <font color="#ffffff"> サンプル<br> サンプル<br> サンプル<br> サンプル<br> サンプル<br> </font> </td> </tr> </table> </td> <td width="560" valign="top"> ***** 本文 ***** </td> </tr> <tr> <td colspan="2"> <table border="0" cellspacing="0" cellpadding="0" width="100%" id="xxx"> <tr> <td height="80" align="center" valign="bottom">コピーライト</td> </tr> <tr> <td height="20" align="center" valign="top">文章</td> </tr> </table> </td> </tr> </table> </center>
スタイルシートレイアウトXHTMLソース
<div id="wrapper"> <div id="header"> <h1><img src="xxx.jpg" border="0" alt="xxx" width="340" height="150" /></h1> </div> <div id="container"> <div id="contents"> ***** 本文 ***** </div> <div id="sidebar"> <p class="sidetitle-a">MENU</p> <ul class="globalnavi"> <li id="menu01"><a href="#">Home</a></li> <li id="menu02"><a href="#">ソフトウェア</a></li> <li id="menu03"><a href="#">デスククトップPC</a></li> <li id="menu04"><a href="#">ノートPC</a></li> <li id="menu05"><a href="#">プリンタ</a></li> <li id="menu06"><a href="#">スキャナー</a></li> </ul> <p class="sidetitle-b">About Us</p> <ul class="globalnavi"> <li id="menu07"><a href="#">会社概要</a></li> <li id="menu08"><a href="#">プライバシーポリシー</a></li> <li id="menu09"><a href="#">特定商取引に基づく表記</a></li> <li id="menu10"><a href="#">サイトマップ</a></li> </ul> <dl> <dt>information</dt> <dd> <p>サンプル</p> <p>サンプル</p> <p>サンプル</p> <p>サンプル</p> <p>サンプル</p> </dd> </div> <div id="footer"> <p>xxx</p> <p>xxx</p> </div> </div> </div>
純粋なレイアウト部分のみのソース
テーブルレイアウト <table border="0" cellspacing="0" cellpadding="0" width="760"> <tr> <td colspan="2" width="100%" height="180" valign="top" id="xxx"> ***** ヘッダーエリア ***** </td> </tr> <tr> <td width="200" align="center" valign="top"> ***** サイドバーエリア ***** </td> <td width="560" valign="top"> ***** コンテンツエリア***** </td> </tr> <tr> <td colspan="2"> ***** フッターエリア***** </td> </tr> </table> スタイルシートレイアウト <div id="wrapper"> <div id="header"> ***** ヘッダーエリア ***** </div> <div id="container"> <div id="contents"> ***** コンテンツエリア ***** </div> <div id="sidebar"> ***** サイドバーエリア ***** </div> <div id="footer"> ***** フッターエリア ***** </div> </div> </div>
