Mac mini ミニ大作戦！
第5回　目指せ、完全CSSレイアウト
　　　　　　　（divでグループ化編）

CSSと言っても、3段カラムを実現するときは従来のテーブルによる考え方と全く同じ。そこでCSSで配置指定しやすいよう、ブロック毎にグループ分けしておく（と良いらしい）。ちなみに次期CSS3ではマルチカラムを標準実装するそうな。

　

グループ分けの前にちょっと整理

　CSSによる3段カラムの実現も、考え方は従来のテーブルを使ったものと一緒で、結局入れ子構造に頼ることになる。せっかくCSSに移行するのに、え〜？同じじゃ〜ん、って感じがするけれど、サイト全ページのHTML内に構造のまま直接大量のテーブルタグを書き込むことになるこれまでの方式より、「この部分はココ、この部分はココの中の右」という記述を一つ書いておくだけで済んでしまうCSSはやはり後々の手間を考えると便利であるのは間違いない。

　入れ子のパターンも考慮して大まかに分けると、当サイトは次の7グループになると思う。

　まず親グループは縦に緑で括ったA、B、C。それぞれ「header」「pagebody」「footer」と参考書そのままに命名。で、Bブロックの中には横に3つのブロックがあり、それらを赤で括ったx、y、zとする。それぞれ「nav」「main」「sub」と命名。普通に考えると以上の6ブロックでOKなんだけれど、「x、y、zと横に並べる」という指定が出来ないので、「y、z」を青で括ったPとする。Pは「content」と命名。これによりBの中身は、「x、P」というブロックで並べることになる。ふう。

<div>〜</div>登場

　7つに分けたブロックを<div>タグでグループ分けする。<div>タグってCSSに手を出すまでは全く馴染みが無かったんだけれど、「グループ化・特定の範囲指定」を意味するのだそうな。なのでそれ自体は表示に関する挙動など目に見える動きは全くナシ。

　記述の順番はこんな感じになる。前回、記述順を文章構造から見て入れ替えたりしたので（サンプルHTMLその2）、必ずしもブロック分けした順・アルファベット順になるわけではない。こんな風に簡略図を書いておくと混乱しなくて助かりますな。

グループ分けしたHTML

　では早速。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" >
<head>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<title>フリフリの「Mac mini ミニ大作戦！」</title>
</head>
<body>

<div id="header">
<h1>
<img src="images/top.jpg" alt="フリフリのMac mini ミニ大作戦！" />
</h1>
</div>

<div id="pagebody">

<div id="content">

<div id="main">
<h6>Mac mini ミニ大作戦！</h6>
<h2>第1回　目指せ、完全CSSレイアウト</h2>
<p>先日、ちょっと新しいサイトデザインに更新してみようかなと思い立ったのだけれど、その作業が非常〜に面倒臭くなることが判明。原因はレイアウトを従来通りテーブルタグで構成していたからだった‥。そこでCSSレイアウトに移行を試みる新シリーズ。【06/2/4】</p>
<p>【次回予告】</p>
<h6>映画百本「みなさん、さようなら。」</h6>
<h2>人生の終わらせ方</h2>
<p>本作はビッグ・フィッシュや、グッバイ・レーニン！、ライフ・アクアティックと同じく、親と子の最後の数日を描いた物語。ただ、ちょっと（いや、かなり？）捻くれているのが持ち味。</p>
<dl>
<dt>Mac mini ミニ大作戦！</dt>
<dd>祝！阪神優勝記念クロックアップ
☆1.25GHz→1.67GHz！☆【05/10/1】</dd>
<dt>映画百本</dt>
<dd>「ライフ・アクアティック」果てしなきロール・プレイ【06/1/14】</dd>
<dt>放談ラジオ音響系</dt>
<dd>2005年の重大ニュース【05/12/31】</dd>
<dt>読後の一言</dt>
<dd>『COSMOS　コスモス（上下）』カール・セーガン著【05/7/9】</dd>
</dl>
</div>

<div id="sub">
<p>
<img src="images/MENU.gif" alt="当サイトのキラーコンテンツ" />
</p>
</div>

</div>

<div id="nav">
<ul>
<li><a href="../../../Macmini/index.html">Mac mini ミニ大作戦！</a></li>
<li><a href="../../../Movie/index.html">映画百本</a></li>
<li><a href="../../../Radio/index.html">放談ラジオ音響系</a></li>
<li><a href="../../../BBS/index.html">BBS放送局</a></li>
<li><a href="../../../Book/index.html">読後の一言</a></li>
<li><a href="../../../Mail/index.html">メールの宛先</a></li>
</ul>
</div>

</div>

<div id="footer">
<p>
copyright (c) 2001-2006 FLIP! FLIP! FLIP! all rights reserved.
</p>
</div>

</body>
</html>

文法チェック

　参考書にはこれからCSSレイアウトの記述を行う前に、ここまでのHTML（XHTML）段階で記述ミスが無いか文法チェックを怠るな、とある。HTMLのみでのブラウザ表示には問題無くても、CSSが絡んでくると意図通りにならなくなることもあるらしい。そこでミスが無いかどうか調べてくれるサイトでチェックしてみた。
http://validator.w3.org/

　いきなりエラーが出た。今回、参考書にならってXHTMLということで書いているんだけど、そのXHTMLというのはHTMLよりルールが細かいらしい。例えば「タグに英文大文字を使っちゃダメ！」とか。なので上のサンプルではみな小文字で書いてある。今回引っ掛かったのは、終了タグの不要なものには、/>を用いて閉じなければならない、というルール。これまでHTMLではimg要素やbr要素、meta要素は</img>なんていう閉じタグは不要だったが、これからは　/>で閉じておかないといけないらしい（/の前には半角スペースを入れる必要アリ）。

<img ~~~~~~ />
<META ~~~~ />
<br />

　今回は上から5行目の<meta>タグで、shift_jisの終わりを>で終わっていたところを指摘された。で、それを修正したものがコレ。

　やはり修正しなくてもブラウザでは問題なく表示できてしまうのは困りものかも。それに改行の<br>を<br />にしなくてはいけないのはかなり面倒になるような‥。GoLive CSって改行の記述の仕方を指定出来たっけ‥？

　次回は3段カラムの前にヘッダとフッタを作ってみる内容。

　

【06/2/18更新】
トップへもどる↑
　copyright (c) 2001-2006 FLIP! FLIP! FLIP! all rights reserved.