要約と位置付け
表関連の要素郡は HTML ページのレイアウト構築目的のために使用してはならないと何度も提唱されてきました。 このページで CSS のみを使用して三列レイアウトを作成する一つの方法をご紹介します。
ご意見・ご提案を Dominique Hazaël-Massieux までお願いします。 原文の非公式翻訳集を利用できます。
はじめに
HTML とはテキストにタグを潜らせて
「――です」もしくは「――であるべきです」
という構造文を記載するために使用される構造言語です。
table タグは行列が互いに関連し合えるように表内を潜らせ
データの体裁を整える目的のためとしてのみ使用されるべきなのです。
しかし HTML に表関連の要素郡が追加されてから、 それはかなりの頻度でレイアウトを目的として使用され、 ウェブページは常に複数の列をもって構成され続けています。 それは HTML の概念を破壊する行為であるという事実の他に、 私たちが前後の見境がつかなくなる程に挑んだ困難な解析作業も、 それを表に描画していく作業も、 それらにより結果まとめあげることができたこと等の、 いずれの事項に対しても謝辞を贈りません。
この文書は三列レイアウト作成の一つの方法、 そして他のレイアウト技術集に関するリンク集を記載します。
レイアウトの説明
下記に記載の技術は 新規 W3C ユーザーのためのページ で使用された技術で、 三列レイアウトの構築を下記の事項に従うことで可能にします:
- まずページの中央に位置させたいテキストを CSS 未対応 もしくはテキストブラウザの場合でも最初に読み込まれる ソースコード先頭に記載します
- 次に左側に配置させたい列、 右側に配置させたい列の順序で記載します
中央に掲示したい全テキスト、 両側に相応のリンク集リスト郡を所有させる事が可能なことから ホームページに適応させる選択が最適です。
制限事項の一つとしまして、 不正確過ぎる CSS 実装方法では実現しないでしょう。 しかし周知の垂直レイアウトの評価を上手く下げられるでしょう。
あなたがそれに伴う結果を得られるよう、 このレイアウトをこのページ自体に適応させてみました。
実装方法
このレイアウトには
CSS absolute positionning
を使用します。
もし HTML ページを
<div id="main">、
<div id="list1" class="link-list">、
<div id="list2" class="link-list">、
によって縦に三分割するように組みたいなら、
私たちは下記の
CSS
ルールを適応させることができます:
/* 両側リスト共通のプロパティーです */
div.link-list {
width:10.2em;
position:absolute;
top:0;
font-size:80%;
padding-left:1%;
padding-right:1%;
margin-left:0;
margin-right:0;
}
/* margin-* プロパティーを使用して両端からある程度離れます */
#main {
margin-left:10.2em;
margin-right:10.2em;
padding-left:1em;
padding-right:1em;
}
/* それから両リストをこの位置に配置します */
#list1 {
left:0;
}
#list2 {
right:0;
}
このアイディアはメインとなる列を
margin-left と margin-right
プロパティーを使用して両側から抑え込み、
それから position:absolute プロパティーを使用して両列を適所に配置させ、
そしてそれぞれの左上端・右上端から末尾までを配置させたメイン格列のマージン空間に調和させていく
という形で残りを配置していくというアイディアです。
スタイルシートの読み込みに関する誤った
CSS
実装方法を回避するため
<style
type="text/css">@import
url('貴方のスタイルシートurl');</style>
を経由して正確に呼び出してください。