第５章 Tableによるレイアウトからの脱却
5-1. Tableがページのレイアウトに向かない理由
従来は、<Table>タグがウェブ・ページ内の内容物をグループ化する枠組みとし盛んに使われて来ました。
然しながら、Boxモデルが一般にレイアウトに使われだしてから、<TABLE>タグはHTMLタグとCSSの連携には適していないと考えられ、プロの間では以下のような理由で枠組みの用途としては殆ど使われなくなって来ました。
- <Table>タグの複雑性
<TABLE>とか<TR>とか<TD>とか<TH>の複数の要素が絡んできますので、CSSルールでその中に配置する内容物の属性を規定には、単純なBoxである<DIV>タグに比べて難しい。
- <TD>タグの固定性
主として内容物を格納するのが<TD>タグですが、この<TD>タグはTableの中に固定されているので、他のBoxのようにFloatやInlineルールによって流動的に配置することだ出来ない。言い換えれば保守の柔軟性が期待できない。
- <Table>タグの固定性
レイアウト枠の横幅変更は<Table>タグそのものに手を加えなければならない。保守作業の容易性はHTMLタグはそのままにして、CSSルールだけを変えれば良いというのが理想的である。
5-2. Divを使ったSampleの完成形
この節では従来ページのレイアウトによく使われてきた<Table>タグの代わりに、小枠組みにも<DIV>タグを使ったSampleを通して、「Tableによるレイアウトからの脱却」を目指す学習をして行きます。
先ず、その完成形はこのようなものです。
特に中間枠内の写真とその説明文のdivタグによる配置の柔軟性に注目して下さい。Tableタグを使ってはこのようなフレクシブルな配置は難しいでしょう。ソース・コードを表示して、divタグを使ったCSSルールによる配置の仕組みを大まかに見てみて下さい。詳細にはこの後、順を追って学習します。
5-3. ページの骨格の作成
先ず、ページの骨格を作成します。そのSampleはこのようなものです。
Sampleでは<div>による骨格だけで、高さの指定もなく、その上内容物が入っていないと、ブラウザーで巧く表示されないので、コメントとして横幅や枠線の仕様を入れて見易くしてありますが、実際はこれらのコメントは入れる必要ありません。レイアウトの骨格のルールは以下のようにしてください。
- 大枠<div id="container">
横幅900ｐｘで高さは指定せず内容物によって決まるようにします。枠線は作らず、中に入る中枠に枠線を付けます。
大枠が作業中でも識別できるように背景色を指定します。大枠には壁紙wallppr01.gifを使いました。
大枠をブラウザー画面の中央揃えするために、 margin : 0 auto;を指定します。
- 中枠<div id="header">
左右の１ｐｘの枠線を指定したために横幅898ｐｘを指定、高さは内容物を入れた結果で530ｐｘにしてありますが、最初は指定せず、内容物に合わせて後から指定してもよい。枠線色の#999はプロが良く使う枠線の色で、もう少し濃い色の#666も覚えておくと便利だ。
- 中枠<div id="yoko_navi">
この中枠は横並びのナビゲーション・メニューを入れるための枠で、サイズは横898px高さ30pxです。
背景色のWheatは小麦色で素敵な中間色なので覚えておくと便利です。
- 中枠<div id="contents">
これはこのページの中央にあって主要な内容物を入れる重要な中枠で、今回の学習の焦点です。この中枠の中に<div id="basho_area">（芭蕉エリアの意味）と<div
id="history_area">（史跡エリアの意味）の2つの小枠が配置されます。これらの小枠は従来のTableのようなものと考えて下さい。
その各々の小枠の中に6個づつの<div class="cell">（細胞または小ブロックの意味）が配置されます。これら12個のcell（セル）はTableのTDのようなもので、これらにはid名でなく、class名が付けられるのが味噌です。classセレクターは同一ページの中に幾つも指定出来るからです。写真やその説明文はこのcellの中に臨機応変に配置されます。芭蕉エリアでは写真と説明文は上下に配置し、史跡エリアでは横並びに配置されます。
中枠<div id="contents">の横幅は、padding: 4pxを指定したために4px小さい894pxを指定しました。このpadding:
4pxは内容物を左から4px離れた所に一直線に揃えるという重要な意味を持っています。内容物にmargin-leftを指定する方法もありますが、それではすべての内用物にmargin-leftを指定しなければならず、良い方法ではありません。
- 小枠<div id="basho_area">と<div id="history_area">
この2つの小枠は芭蕉関連の内容物と史跡関連の内容物を分けて格納する為のもので、この目的はこの小枠の中に入る6個づつの<div class="cell">を階層パスによって別々のセレクタターとして別々のスタイル・ルールを適用するためです。完成版のSampleをご覧になれば芭蕉関連のエリアと史跡関連のエリアとでは写真と説明文の配置が異なっていることにお気づきと思います。
2つの小枠のサイズは横幅872pxを指定しました。これは<div id="contents">の正味横幅898pxから小枠自身のpadding-left:
18pxと中枠<div id="contents">の両脇のpadding4pxを差し引いた数字です。実際には、このような正確な計算をしなくとも、内容物を入力後、レイアウトの崩れが生じたら、試行錯誤でwidthの値を変更して行き、崩れが直った時に、この数字になる筈です。
- #basho_areaの中の <div class="cell">
これは「#basho_area .cell」という階層パスでセレクトされます。横幅の430pxは写真の横幅の400ｐｘより30px大きくしてあります。
<div class="cell">はこのままだと縦に並びますが、後にfloat: leftと display:
inlineの指定で2つの<div class="cell">が横並びに並びます。写真と写真表題は<h3></h3>の中に<br/>を挟んで入れれば、写真の下に説明が付きます。
写真の詳細な説明文はその下に付け加えられます。
- #history_areaの中の <div class="cell">
これは「#history_area .cell」という階層パスでセレクトされます。 横幅の420pxでその中に写真と説明文は後で横並びに配置されます。このcellもこのままですと縦に並びますが、後にfloat:
leftと display: inlineの指定で2つのセルが横並びに並びます。
- <div>の階層構造の確認
階層構造が正しく指定されているかの確認はソース・コードを表示して行ってください。<div></div>のペアがちゃんとなされていないかチェックして下さい。Sampleのソース・コードのようにインデントで下部の<div>を文字下げして、階層が判るようにすると良いと思います。TABキーで字下げする桁数は「ツール」メニュー → 「オプション」 → 「ソース編集」 → 「文字下げ」で指定を変更できます。
また、FirefoxのアドオンのFirebugを立ち上げればコーディングのエラーが判りますし、階層構造もはっきり判ります。FirefoxもそのアドオンのFirebugも無料ですので、ダウンロードして是非試してみて下さい。
5-5. 内容物の入力
これから骨格の枠組みの中に内容物を徐々に入力して行きます。入力した結果のSampleはこのようなものです。
入力の手順を上の枠組みから順に説明します。
- <div id="ｈｅａｄｅｒ">に見出し文字と写真とその説明文を入力する
☆ メニュー「挿入」 → 「段落」 → 「見出し２」 → ＜”奥の細道紀行”を入力＞
☆ <h1>〜</h1>の中に楕円形に切り抜かれた芭蕉像を挿入する事が重要 （imgを裸で入れない事が重要！）
メニュー「挿入」 → 「段落」 → 「見出し１」 → 「挿入」 → 「画像ファイル」 → ＜芭蕉像指定＞
☆ メニュー「挿入」 → 「段落」 → 「標準」 → ＜”深川の墨田川畔に建つ芭蕉像”を入力＞
- <div id="yoko_navi">に4個のナビゲーション・メニューをリストとして入力する
☆ メニュー「挿入」 → 「リスト」 → 「番号なしリスト」 → ＜”千住から小山へ”を入力＞→ Ｅｎｔｅｒキー
→ ＜”鹿沼から日光へ”を入力＞→ Ｅｎｔｅｒキー
→ ＜”玉生から黒羽へ”を入力＞→ Ｅｎｔｅｒキー
→ ＜”那須から芦野へ”を入力＞→ Ｅｎｔｅｒキー
- <div id="basho_area">の先頭に「芭蕉エリアの見出し」と6個のcellの写真と写真タイトルと説明を入力する
☆ メニュー「挿入」 → 「段落」 → 「見出し２」 → ＜”奥の細道・深川の巻”を入力＞
☆ 最初のcellに<h3>〜</h3>入れて、その中に最初の写真を挿入し、改行（<br/）の後写真タイトルを入力する
メニュー「挿入」 → 「段落」 → 「見出し3」 → 「挿入」 → 「画像ファイル」 →＜最初の画像指定＞
☆ 写真タイトルの後に、<p>〜</p>入れて、その中に最初の写真の詳細説明を入力する
- <div id="basho_area">の残り５個cellに同様にして写真、写真タイトル、詳細説明を入力する
- <div id="history_area">の先頭に「深川界隈史跡の見出し」と6個のcellの写真と写真の説明を入力する
☆ メニュー「挿入」 → 「段落」 → 「見出し２」 → ＜”深川界隈の史跡”を入力＞
☆ 最初のcellに<h3>〜</h3>入れて、その中に最初の最初の写真を挿入する （imgを裸で入れない事が重要！）
メニュー「挿入」 → 「段落」 → 「見出し3」 → 「挿入」 → 「画像ファイル」 → ＜最初画像指定＞
☆ 写真の後に、<p>〜</p>入れて、その中に最初の最初の詳細説明を入力する
詳細説明の1行目を写真タイトルとし、改行（<br/）の後詳細説明を入力する
- <div id="history_area">の残り５個cellに同様にして写真と詳細説明を入力する
- <div id="footer">このページ学習の目的と注目点を入力する
☆ メニュー「挿入」 → 「段落」 → 「見出し４」 → ＜”これはＢｏｘモデルの勉強用・・・・”を入力＞
☆ メニュー「挿入」 → 「段落」 → 「標準」 → ＜”特に中間枠の写真と・・・・・”を入力＞
5-6. CSSの適用
以上でページの枠組みに内容物の入力が終わったら、それらにＣＳＳルールを適用しての内容物に目指す見栄えのよい配置や大きさや色合いに調整する。その手順の概略を以下に示します。
- <div id="ｈｅａｄｅｒ">内のＣＳＳ規定
☆ h1 { text-align: center; margin-bottom: 20px;} 芭蕉像が中央揃いされ、下段の写真説明との間隔を付ける
☆ #header h2 { font: 36px HGP行書体; font-weight: bold; margin-left;: 20px;
color; teal;}
☆ #header p{ font: 20px HGP行書体; margin-top;: -43px; text-alighn: right;
color; teal;} 写真説明を枠内に収める
☆ #header ｛border-radius:7px;｝ は枠線の角に7ｐｘの丸味を付けるためのもの
- <div id="yoko_navi">内のＣＳＳ規定 float: leftと display:inlineの規定で横並びのメニューにすることが重要！！
☆ ul {text-align : center; margin-left : 160px; margin-top : 5px;｝ はメニュー全体を中心揃えして、下線に揃える
☆ li {font-size : 16px; font-weight : bold; float : left; display : inline; list-style-type
: none; color : white; border : 1px solid #999; width : 130px; height
: 15px; padding : 4px; margin-top : 0 2px 0 4px; background-color : teal;
text-align : center; }
ナビ・メニューを横並びにして、下線がない、白抜きの文字にして、適当に配置するため
☆ ｛border-radius:7px;｝ は枠線の角に7ｐｘの丸味を付けるためのもの
- <div id="contents">内のＣＳＳ規定
☆ #contents{ overflow : auto; height : 1757px; margin-top : 3px; padding-top
: 7px; padding-left : 4px; float : left }
☆ float : left は 中に入るfloatする子Ｂｏｘを認識するため
☆ height : 1757px;は内容物が入った後の結果的な高さ。初めは指定しなくても良い。
☆ float : left は親枠に認識してもらうために（親枠にはoverflow : auto;が指定されている）
- <div id="basho_area">内のＣＳＳ規定 margin : 0 auto; で<div id="contents">の中央に配置することが重要！！
☆ margin : 0 auto; によって親枠の中央に配置
☆ padding-left : 18px; で中に入る写真の位置を決め、その為横幅をwidth : 872px;に変更
☆ overflow : auto; で中に入るfloatする写真を認識する
☆ #basho_area .cell{ width : 430px; float : left; display : inline; margin-top : 20px; }で中に入るセルを横並びに配置
☆ #basho_area h3{ font-size : 12px; font-weight : normal; color : #cc0000;
width : 420px; text-align : center; }で写真を
入れるh3を介して写真と写真タイトルをcell（セル）の中央に配置する
- <div id="history_area">内のＣＳＳ規定 margin : 0 auto; で<div id="contents">の中央に配置することが重要！！
☆ margin : 0 auto; によって親枠の中央に配置
☆ padding-left : 18px; で中に入る写真の位置を決め、その為横幅をwidth : 872px;に変更
☆ overflow : auto; で中に入るfloatする写真を認識する
☆ #history_area .cell{ width : 420px; float : left; display : inline; margin-left : 10px; margin-top : 10px; height : 150px; }で
中に入るセルを横並びに配置する。height : 150px;と高さを指定したのは写真の高さが不揃いのため高いほうの
写真の高さを指定して、セルの高さを揃えるため。
☆ #history_area h3 { width : 200px; float : left; display : inline; margin-left
: 10px; }で写真を入れるh3を介して写真と
写真タイトルをcell（セル）の中央に配置する （imgを裸で入れない事が重要！）
☆ #history_area p.photo_txt margin-left : 2px; width : 150px; float : left; display : inline; }は写真の詳細説明を写真の
の横に配置するため。<div id="basho_area">では写真の下に写真説明を配置した。
- <div id="footer">内のＣＳＳ規定
☆ clear : both; でこれまでのfloat状態をリセットするため
☆ #footer h4 { font-size : 16px; color : #cc0000; text-align : center;
} #footer h4としたのは他の h4と区別するため
☆ #footer p{ font-size : 12px; color : #cc0000; margin-top : 5px; text-align
: center; } #footer pとしたのも同様の理由#
- 以上のＣＳＳ適用の結果、完成版Ｓａｍｐｌｅと同じような結果になることを確認して下さい。