| 2008-12-12作成 |
■スタイルシート（ＣＳＳ）３
■テーブルを利用したレイアウト設定
最初はtableタグを利用した、レイアウトテーブルという方法を説明します。
これは特に難しいことはありません。テーブル定義のセル指定、つまりtdタグで囲まれた範囲を区画として利用するだけです。tdタグ内に入れ子で、別のテーブル定義をすることも、もちろん可能です。
サンプルとして、あなたがまさに今見ているこのページを使いましょう。このページのソースを見ると先頭部分（bodyタグのすぐ次から）は、次のようになっています。
<body> <table border="0"><tr><td width="700"> <table border="0" vspace="0" width="100%"><tr><td cellpadding="0"> <div class="hdrftr"> <a href="../TechNoteJava.htm" target="_parent" style="text-decoration:none;"> サーバーＪａｖａ入門先頭</a> <a href="HTML_MnFrm.htm" target="_parent" style="text-decoration:none;">ＨＴＭＬ編先頭 </a> </div> </td><td width="270" cellpadding="0" align="right"><address>2008-12-5作成</address> </td></tr></table> <h2><a name="TOP"> ＨＴＭＬ超入門編７ ページレイアウト２（レイアウトのＣＳＳ）</a></h2>
まずbody直後にいきなりtableタグで設定をしています。
<body>
<table border="0"><tr><td width="700">
これがページ本体の区画設定で、幅を700ピクセルに設定しています。ただしこの指定方法は現在は非推奨の方法です。CSSのwidth指定を利用した方法がよいでしょう。
このページのような文章中心の場合、むやみに横に広がってしまうと文章がとても読みにくいです。そこで例えばワイドディスプレイでブラウザを全画面表示したとしても、横にだらだら広がらないように、ページ本体の表示区画幅を制限しているのです。
次に出てくるテーブル設定は、ページの一番先頭部分、サイト内リンクと作成更新日の部分を設定しています。２つのセルを設定し、左側はサイト内リンク用に左詰表示設定（ alignを指定しないので初期値の左詰）、右側のセルは作成更新日用に右詰表示設定にしています。
◇レイアウトテーブルの例
前のページの最初ではレイアウト設定の例として、このような表を例示しました。
区画１ |
||
区画２ 索引情報 |
区画３ 本文、主たる内容 |
区画４ 補足情報 |
区画５ |
||
最初にこのレイアウト設定のソースを表示すると、次のようになっています。
<table cellspacing="1"> <tr style="height: 50px; vertical-align: top; text-align: left;"> <td colspan="3" style="border: solid 1px black;"><p> 区画１<br /> ヘッダ部</p> </td> </tr style="border: solid 1px black;"> <tr style="height: 80px; vertical-align: top; text-align: left;"> <td style="width: 200px; border: solid 1px black;"><p> 区画２</p><p> 索引情報</p></td> <td style="width: 300px; border: solid 1px black;"><p> 区画３</p><p> 本文、主たる内容 </p></td> <td style="width: 100px; border: solid 1px black;"><p> 区画４</p><p> 補足情報</p></td> </tr> <tr style="height: 50px; vertical-align: top; text-align: left;"> <td colspan="3" style="border: solid 1px black;"><p> 区画５<br /p> フッタ部</p></td> </tr> </table>
この例示では各区画、すなわちtdに対してborder:要素を指定しています。試しに枠線を無しにして各区画の背景色を変えると次のようになります。
区画１ |
||
区画２ 索引情報 |
区画３ 本文、主たる内容 |
区画４ 補足情報 |
区画５ |
||
このレイアウト設定のソースは次のとおりです。
<table cellspacing="1"> <tr style="height: 50px; vertical-align: top; text-align: left;"> <td colspan="3" class="tbhd" style="border: none"><p> 区画１<br /> ヘッダ部</p> </td> </tr style="border: none"> <tr style="height: 80px; vertical-align: top; text-align: left;"> <td class="tblfthd" style="width: 200px; border: none;"><p> 区画２</p><p> 索引情報</p></td> <td class="tbdtl2" style="width: 300px; border: none;"><p> 区画３</p><p> 本文、主たる内容 </p></td> <td class="tbdtl3" style="width: 100px; border: none;"><p> 区画４</p><p> 補足情報</p></td> </tr> <tr style="height: 50px; vertical-align: top; text-align: left;"> <td colspan="3" class="tbdtl1" style="border: none;"><p> 区画５<br /p> フッタ部</p></td> </tr> </table>
背景色はインラインで直接指定はしていません。class要素で指定しています。class要素で指定しているのは、「yok's 技術メモ」以下のページで標準的に使用するよう、TechNote.cssとしてCSSファイルに定義済のスタイルです。
枠線はborder: none;にしているので無し、です。