W3J.org

Feature Articles

そろそろスタイルシートでウェブデザイナーにおくる、HTML+CSSデザインのすすめ

第二章 CSSでデザインしてみよう

技術評論社のサイトを例に

技術評論社のサイトは、HTML 4.01 Transitionalらしきものでマークアップされ、table要素を用いたいわゆるテーブルレイアウトによってデザインされています。らしきものというのは、どうもHTML 4.01 Transitionalに無い属性をいくつか見受けるからですが、とりあえずこだわりません。

【図】テーブルレイアウトされた技評サイト

レイアウト的に分解すると、まず上部にヘッダエリア的なものがあり、その下は左右2エリアとなるように段組されています。また、右のエリアは中ほどでまた段組的になっており、段組がネストしているような感じです。このようなレイアウトをCSSでやるにはどうするのか、ひとまず既にCSSでレイアウトしたものを用意したので見てみましょう。なおこのCSSレイアウトは、Win版IE6、Netscape7、Opera6.05およびMac版IE5.1、Netscape7でうまいこといくように調整したもので、下図はIE6での表示結果になっています。

【図】CSSでレイアウトされた技評サイト

テーブルレイアウトされているものをCSSで再現したのだから、傍目にはあまり判別つかなくてもおかしくないわけですが、まあ微妙に違うことは見てとれるとは思います。とはいえ、基本的には、このようなレイアウトをCSSによって行うのは問題ないということがわかるでしょう。テーブルレイアウトされたものとの大きな違いは、CSSが有効でない環境で表示するとよくわかります。たとえば、技術評論社のサイトはNetscape4.xで見ても、フォントサイズの違いなどが多少あるものの、ほぼ同じように表示されます。一方、CSSレイアウトしたほうは、CSSが適用されない設定にしたブラウザで見るとこんな感じで表示されたりするのです。下図はNetscape4.76での表示結果です。

【図】CSSを適用せずに表示した、CSSでレイアウトされた技評サイト

さて、それではこのようなCSSでのレイアウトを完成させるまでの道のりを、ざっとたどっていきましょう。ちなみに、テキストエディタを起動して、実際に書きながら読み進めていくのも面白いかもしれません。

まずはざっくりとマークアップ

最初に、テキストファイルなどになっているコンテンツの内容があるものとして、これをマークアップしていきます。この時点のHTMLには、一切のレイアウト情報を入れないでおきます。つまり、見出しの要素を見つけたら、見出しレベルに合わせてh1なりh2なりの要素で意味づけするだとか、文章の段落を見つけたらp要素で意味づけするだとか、箇条書きっぽいのがあったらul要素で意味づけしていくだとか、そういうことをしていくわけです。純粋に意味づけしかしないわけですから、HTML 4.01 Strictの要素と属性だけで事足りますね。

body要素の中に書かれる順番ですが、ふつうは思い切ったポジショニングなどをしていない限りは、表示される結果の左上から右下までをたどっていくのと同じになりますので、ざっくりとこのようなHTMLファイルが出来上がっているものとしましょう。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="ja">

<head>

(略)

</head>

<body>

<h1>技術評論社</h1>

<ul>

<li>このサイトについて</li>

(略)

<form>

<dl>

<dt>書籍・雑誌検索：</dt>

<dd><input type="text"></dd>

(略)

<h2>新着ニュース</h2>

(略)

<h3>セミナーのご案内</h3>

(略)

<h3>雑誌の年間定期購読</h3>

(略)

<h3>書籍の補足情報</h3>

(略)

<h3>メールマガジン</h3>

(略)

<h3>会社案内</h3>

(略)

<h3>雑誌広告出稿のご案内</h3>

<h3>各種お問い合わせ</h3>

<h2>おすすめ新刊</h2>

(略)

<h2>雑誌を探す</h2>

(略)

<h2>書籍を探す</h2>

<h3>ジャンルで探す</h3>

(略)

<h3>シリーズで探す</h3>

(略)

<h2>ただいま売れています！！</h2>

(略)

<p class="goTop">ページトップへ↑</p>

<address>Copyright (c) 2002 All Rights Reserved by Gijutsu-Hyohron Co., Ltd.</address>

</body>

</html>

［この時点でのソース(001.html/css無し)］

この状態のHTMLを表示すると、ユーザースタイルシートを設定していない限りは、ブラウザのデフォルトスタイルで表示され、ちょうど、さきほどのCSSを適用せずに表示した例と同じような感じになるかと思われます。

ページ全体をエリアで区切る

と、これで下準備が終わったというか、ここからCSSを用いて外観を整えていくことになります。まずはとりあえず、全体をエリアで区切ることにします。

何が正しいというわけではないのですが、ここではh1要素の「技術評論社」と、「このサイトについて」から始まるヘッダ部分でのリンク要素のところまでで、ひとつのヘッダエリアとします。そして書籍・雑誌検索とショートカットのフォームコントロール群をユーティリティエリアとしましょう。h2要素の「新着ニュース」からh3要素の「各種お問い合わせ」までを左コンテンツエリア、h2要素の「おすすめ新刊」から同じくh2要素の「ただいま売れています！！」のコンテンツまでを右のコンテンツエリアとして、最後にaddress要素がフッタエリアだと、そういうことだとするわけです。そしてこのエリア定義に基づいて、エリアを示すマークアップを施します。エリア定義には、ブロックレベルの要素だとしか規定されていないという、特定の意味を持たないdiv要素を使います。なお、エリア定義にはclass属性ではなくid属性を使うことにします。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="ja">

<head>

(略)

</head>

<body>

<div id="headerArea">

<h1>技術評論社</h1>

<ul>

<li>このサイトについて</li>

(略)

</div>

<div id="utilityArea">

<form>

<dl>

<dt>書籍・雑誌検索：</dt>

<dd><input type="text"><input type="submit" value="検索"></dd>

(略)

</div>

<div id="leftContentsArea">

<h2>新着ニュース</h2>

(略)

<h3>セミナーのご案内</h3>

(略)

<h3>雑誌の年間定期購読</h3>

(略)

<h3>書籍の補足情報</h3>

(略)

<h3>メールマガジン</h3>

(略)

<h3>会社案内</h3>

(略)

<h3>雑誌広告出稿のご案内</h3>

<h3>各種お問い合わせ</h3>

</div>

<div id="rightContentsArea">

<h2>おすすめ新刊</h2>

(略)

<h2>雑誌を探す</h2>

(略)

<h2>書籍を探す</h2>

<h3>ジャンルで探す</h3>

(略)

<h3>シリーズで探す</h3>

(略)

<h2>ただいま売れています！！</h2>

(略)

<p class="goTop">ページトップへ↑</p>

</div>

<div id="footerArea">

<address>Copyright (c) 2002 All Rights Reserved by Gijutsu-Hyohron Co., Ltd.</address>

</div>

</body>

</html>

［この時点でのソース(002.html/css無し)］

ベースのスタイルを定義

と、こういう感じです。それではさっそくスタイルの定義に移るわけですが、一番手始めに、CSSファイルを生成しがてら、もっともベースとなるスタイルをbody要素に書きましょう。また、ブラウザのデフォルトスタイルに依存しないように、すべての要素のマージンとパディングも自前で設定するべく、先頭で0を設定しておきます。

* {

    margin:0;

    padding:0;

}

body {

    color:#000000;

    background-color:#ffffff;

    font:normal normal normal 100%/1.2 "Osaka","ＭＳ Ｐゴシック",sans-serif;

    margin:0 10px;

}

a:link {

    color:#0066CC;

    background-color:transparent;

    text-decoration:underline;

}



a:visited {

    color:#840084;

    background-color:transparent;

    text-decoration:underline;

}



a:hover, a:active {

    color:#666666;

    background-color:transparent;

    text-decoration:none;

}

［この時点でのソース(003.html/003.css)］

画面の左右に10ピクセルほどのマージンがつく模様なので、body要素にマージンを設定しておきます。まあ細かい数値はあとでいくらでも調整できますので、こだわらずにHTMLを読み進めてスタイルを設定していきます。

各エリアの配置を決める

headerAreaのヘッダエリアは、body要素が始まってすぐに書かれていますから、このまま放っておいても一番上に表示されます。続くutilityAreaのユーティリティエリアも、このままでヘッダエリアの下に表示されることになります。しかし次の、段組されるコンテンツエリアに、段組の意志を明示するようなスタイルを定義しないと、leftContentsAreaのコンテンツエリアの下に、rightContentsAreaのコンテンツエリアが表示されてしまいます。ですから、このふたつには、それなりにそれなりなスタイルを書くことにします。

CSSには、段組のためのモジュールが提案されていますが、css3-multicolというモジュールはまだワーキングドラフトの段階で、このモジュールを実装しているブラウザもありません。そのため、現在のところ、実際には段組というレイアウトは実現できないことになります。とはいえ、テーブルレイアウトでも段組はできません（Netscape4.xにはmulticol要素という独自要素があったりしますが）。というわけで、CSSにせよテーブルレイアウトにせよ、できるのは擬似的に段組のように見せているレイアウトということになります。

この擬似的な段組には、いくつかの方法がありますが、floatプロパティを用いて行ボックスを回り込ませるか、positionプロパティを使って段組に見えるように配置するとかいうのがよく利用されています。

このサイトでは、左のコンテンツエリアの幅が200px程度で固定されており、右のコンテンツエリアはウィンドウサイズに追従してなりゆきの幅となります。左のコンテンツエリアにfloat:leftとwidth:200pxを設定し、右のコンテンツエリアが回り込むようにすれば、段組っぽい表示が一見再現されます。しかし右のコンテンツエリアの高さが、左のコンテンツエリアを越える場合、回り込んでいるという性質上、越えた分のコンテンツは左のコンテンツエリアの下にも入り込んでしまうことになります。下に入り込まないようにするには、右のコンテンツエリアにもfloat:leftを設定すれば良いのですが、右のコンテンツエリアの幅は一定ではないため、widthプロパティをうまく設定できないのが厄介ですというか、まあwidth:autoという手もありますが。この場合に注意したいのは、フッタエリアを除いたコンテンツ全体が、何やらボックス状のラインで囲まれていることです。左右のコンテンツエリアが両方ともfloatしていると、このボックス状のラインがうまく決まってくれない可能性があります。

そこで、ここではpositionプロパティを使う方法を採用します。左右どちらかのエリアにちょっち大げさなマージンをつけて表示させるようにして、その大げさなマージンで出来た空間にもう一方のエリアをposition:absoluteで配置することで、同じ高さから始まるが重ならない左右エリアというように見せるわけです。ここでのポイントは、コンテンツエリアの高さが短くなるほうをposition:absoluteで配置することです。というわけで、以下のようになります。

div#leftContentsArea {

    position:absolute;

    top:auto;

    right:auto;

    bottom:auto;

    left:20px;

    width:200px;

}

div#rightContentsArea {

    margin-left:220px;

}

［この時点でのソース(004.html/004.css)］

最後にフッタエリアは、ヘッダエリアと同様に全幅で表示されるものなので、そのままにしておきます。もしコンテンツエリアの段組をfloatプロパティの利用で実現していたら、フッタエリアを明示的にclear:leftしてやる必要があります。

見出しの見栄えを決める

エリア定義が終わったら、今度は各見出しの外観を設定していきましょう。

まず「技術評論社」は、これはせっかくなのでロゴ付きの画像化文字を使うことにします。というわけで、h1要素で意味づけされていたこの文字列は、画像を利用できない環境のために用意された代替文字列と捉えて、alt属性の値となるようにマークアップし直します。

<h1><img src="logo.gif" width="204" height="36" alt="技術評論社"></h1>

h2要素は「ただいま売れています！！」を除いてどれも同じ外観なので、とりあえずその同じ外観を一括して書きましょう。

h2 {

    font-size:110%;

    color:#CC6600;

    background-color:transparent;

    padding:3px 5px 5px;

    border-width:1px 0;

    border-color:#000000;

    border-style:solid;

}

［この時点でのソース(005.html/005.css)］

paddingプロパティの内容やフォントサイズなどは、いつでも調整できるわけでやはりこだわらずに、とりあえずこんな感じにしておいて、「ただいま売れています！！」の見出しと続く段落は、後回しにします。

h3要素ですが、左のコンテンツエリアでは、「セミナーのご案内」から「会社案内」までがどうも同じ外観のようで、それぞれがボックス状になっていますね。このボックス状の線を表現するために、各段落をdiv要素で括りましょう。

(略)

<div class="infoBox">

<h3>セミナーのご案内</h3>

(略)

</div>

<div class="infoBox">

<h3>雑誌の年間定期購読</h3>

(略)

</div>

<div class="infoBox">

<h3>書籍の補足情報</h3>

(略)

</div>

<div class="infoBox">

<h3>メールマガジン</h3>

(略)

</div>

<div class="infoBox">

<h3>会社案内</h3>

(略)

</div>

<h3>雑誌広告出稿のご案内</h3>

<h3>各種お問い合わせ</h3>

(略)

［この時点でのソース(006.html/006.css)］

そして外観を設定します。ちなみに、infoBoxクラスのdiv要素で括られなかった「雑誌広告出稿のご案内」「各種お問い合わせ」は、単に左のコンテンツエリア内でセンタリングするだけで良さそうです。

div#leftContentsArea h3 {

    text-align:center;

    font-size:100%;

}

div#leftContentsArea div.infoBox h3 {

    color:#CC6600;

    background-color:transparent;

    text-align:left;

    font-size:110%;

}

div#leftContentsArea div.infoBox {

    text-align:left;

    border:1px solid #000000;

    padding:6px 8px;

    margin-bottom:15px;

}

［この時点でのソース(007.html/007.css)］

箇条書きの見栄えを決める

さて、ヘッダエリアの中にも左のコンテンツエリアの中にも、いろんな外観が期待される箇条書き要素が含まれていますね。これらの箇条書き要素の外観をそれぞれ設定していきましょう。

まずはヘッダエリアの「このサイトについて」「書籍・雑誌購入について」「各種お問い合わせ」という箇条書き要素です。

(略)

<ul>

<li>このサイトについて</li>

<li>書籍・雑誌購入について</li>

<li>各種お問い合わせ</li>

</ul>

(略)

これは、表示としては水平に並ぶことが期待されていますので、つまり各li要素をインラインで表示するようにしてあげればいいわけです。また、h1要素と同じ高さで右寄せに表示するレイアウトにしたいので、h1要素に回り込みを指定してあげる必要もあります。

h1 {

    float:left;

    width:204px;

}

div#headerArea ul {

    font-size:90%;

    text-align:right;

    margin:32px 12px 12px;

}

div#headerArea ul li {

    display:inline;

    margin-right:12px;

}

［この時点でのソース(008.html/008.css)］

例によってマージンなどはあとからいくらでも調整できるので、まあこんなモンだろという辺りでひとつ。ちなみにこのヘッダエリアの上部には青っぽいライン、左右と下部には黒いラインがひかれており、またヘッダエリア全体に背景色がついていますので、ヘッダエリアそのものの外観もいじってやる必要があります。

div#headerArea {

    border-width:8px 1px 1px;

    border-color:#1E4164 #000000 #000000;

    border-style:solid;

    color:inherit;

    background-color:#FFFFF0;

}

［この時点でのソース(009.html/009.css)］

今度は左コンテンツエリアの中の箇条書きです。「新着ニュース」以下と「会社案内」以下の箇条書きは、リストマークがポチポチ画像になっている以外は、ブラウザのデフォルトスタイルで見るul要素の外観と同じです。したがって、リストマークを変更してあげれば良いということになります。「セミナーのご案内」以下の箇条書きは、リストマークが箇条書き本文の中に入り込んでいます。これはリストマークの位置を調整することで実現できます。「セミナーのご案内」以下と「会社案内」以下は、同じinfoBoxクラスの中にあるものの違う外観の箇条書きとなっているので、クラス分けしてあげたほうが良さそうです。「セミナーのご案内」以下のul要素にseminarというクラス、「会社案内」以下のul要素にcompanyというクラスをつけることにします。

div#leftContentsArea ul {

    list-style:square outside url("4dots.gif");

    margin-left:20px;

}

div#leftContentsArea ul li {

    margin-bottom:2px;

}

div#leftContentsArea ul.seminar {

    list-style-type:disc;

    list-style-position:inside;

    list-style-image:none;

    margin-left:5px;

}

div#leftContentsArea ul.company {

    list-style:square outside url("4dots.gif");

    margin-left:5px;

}

［この時点でのソース(010.html/010.css)］

ちなみにcompanyクラスのul要素は、デザイン的には左マージンをつけなくて良いのですが、Opera6.05でリストマークとボックス状のラインがくっついてしまう現象が見受けられたため、左マージンがあまり目立たない範囲でくっつかないところということで、ひとまず5ピクセルのマージンを設定しました。というか、こんな細かい調整はあとでいいのだから今やらなくてもまったく問題ないのですが。

まあ細かい調整ついでに調整するならば、Opera6.05ではdisplay:inlineしたli要素のリストマークの画像変更がうまく適用されないようなので、ヘッダエリアのリストマークについては、alt属性値を明示的に空にしたimg要素で表現することにしました。

(略)

<ul>

<li><img src="4dots.gif" width="12" height="11" alt="">このサイトについて</li>

<li><img src="4dots.gif" width="12" height="11" alt="">書籍・雑誌購入について</li>

<li><img src="4dots.gif" width="12" height="11" alt="">各種お問い合わせ</li>

</ul>

(略)

［この時点でのソース(011.html/011.css)］

ユーティリティエリアを整える

というわけで、箇条書きのスタイルも終わり、ヘッダエリアの外観を整えたのなら、気分的にはユーティリティエリアの外観も整えたくなってきますね。というわけでさっそく整えましょう。

(略)

<div id="utilityArea">

<form>

<dl>

<dt>書籍・雑誌検索：</dt>

<dd><input type="text"><input type="submit" value="検索"></dd>

</form>

<form>

<dl>

<dt>ショートカット：</dt>

<dd><select>

<option>新刊一覧</option>

(略)

</select><input type="submit" value="移動"></dd>

</form>

</div>

(略)

検索フォームとショートカットリンクのフォームが並んで表示されることが期待されています。form要素はブロックレベルなので、インライン表示にしてあげれば横に並ぶはずです。なお、ヘッダエリアで回り込みの指定が入っているので、明示的にclearする必要がありますので、忘れずにclear:leftと書いておきます。

div #utilityArea {

    clear:left;

}

div#utilityArea form, div#utilityArea dl, div#utilityArea dt, div#utilityArea dd {

    display:inline;

}

さて、これでOKかと思いきや、なぜかNetscape7ではdisplay:inlineしたform要素が並びません。これにはちょっち困ってしまったのですが、ならばと回り込みさせることにしました。検索フォームのform要素にsearchクラスをつけて、ユーティリティエリア下部のラインや背景色も併記してあげて、こんなスタイルで何とかしましょう。

div#utilityArea {

    clear:left;

    color:#1E4164;

    background-color:#ECECE6;

    border-width:0 1px;

    border-color:#000000;

    border-style:solid;

    padding:6px;

}

div#utilityArea form.search {

    float:left;

    width:auto;

}

div#utilityArea dl, div#utilityArea dt, div#utilityArea dd {

    display:inline;

}

［この時点でのソース(012.html/012.css)］

こうすると、コンテンツエリアがユーティリティエリアに回り込んでしまう可能性が出てきますので、コンテンツエリアも確実にclearさせるようにしておきます。

「おすすめ新刊」と「書籍をさがす」を整える

さてさていよいよ右のコンテンツエリアです。h2要素は「ただいま売れています！！」の外観を後回しにしていますが、ほかは終わっていることになっています。とりあえず上から順にやっていきますか。

「おすすめ新刊」の段落は、2つの新刊が並んで表示される、いわゆるひとつの擬似段組っぽいものですが、この2つに優劣はないので、2項目が連なる箇条書きであると見なし、そのようにマークアップしています。また、「ほにゃらら一覧へ」というのが、それぞれの見出しの後に同じ右寄せの外観で続くことも判明しているので、これはgoListクラスというので一括的に指定してしまいます。

(略)

<h2>おすすめ新刊</h2>

<p class="goList"><img src="arrow_r_s.gif" width="12" height="9" alt="">新刊一覧へ</p>

<ul>

<li><img src="hoge.jpg" alt="">Software Design 2003年2月号</li>

<li><img src="piyo.jpg" alt="">最新 やさしくわかる New iMac</li>

</ul>

(略)

ちなみにこの2つの表紙イメージとなっている画像のalt属性ですが、続く文字列がまさにそれを示していますので、空で構わないでしょう。ただ、画像が利用できない環境においても、そこに表紙イメージの画像があるよという事実を伝えるという観点では、「【表紙イメージ】」などというalt属性を設定することも、あながち的外れではありません。まあその辺は都度の判断でということで。

で、ここではひとつのul要素で対等なli要素という解釈のもとでマークアップをしているわけですが、ちょっとこのスタイルは置いといて、次の「書籍を探す」の「ジャンルで探す」以下の段組を見てみましょう。こちらもやはりul要素を使っていくのだろうなあと思われるのですが、ul要素がネストするのを嫌って、大きな分類となるジャンルをh4要素とし、それに付随する詳細なジャンル群はカンマ区切りの文章にもなっているというわけで、p要素で続けていくことにします。

右のコンテンツエリアで段組する際は、左右ともに50%幅という感じで分断すれば良さそうです。「ジャンルで探す」以下の箇条書き群のボリュームがちょうど半々になるように、ふたつのul要素でマークアップし直します。だいたい「アプリケーション (153冊)」の見出しになっている辺りからと見定めて、この前でいったんul要素を終わらせて、改めてここからul要素をはじめるようにするわけです。そして、そうであればクラスの定義を一緒くたにしてしまいたくもなったので、前述の「おすすめ新刊」のところも、ふたつのul要素を対等に並べるというように書き換えてしまいます。そしてスタイルを書きやすくするために、ひとつ目のul要素にleftクラスを、ふたつ目のul要素にrightクラスを書き加えます。つまりこうなります。

(略)

<h2>おすすめ新刊</h2>

<p class="goList"><img src="arrow_r_s.gif" width="12" height="9" alt="">新刊一覧へ</p>

<ul class="left">

<li><img src="hoge.jpg" alt="">Software Design 2003年2月号</li>

</ul>

<ul class="right">

<li><img src="piyo.jpg" alt="">最新 やさしくわかる New iMac</li>

</ul>

(略)

<h3><img src="arrow_r.gif" width="15" height="11" alt="">ジャンルで探す</h3>

<p class="goList"><img src="arrow_r_s.gif" width="12" height="9" alt="">書籍ジャンル一覧へ</p>

<ul class="left">

<li><h4>OS (74冊)</h4>

<p>WindowsXP, WindowsNT/2000, Windows95/98/Me, Macintosh, UNIX, Linux ...</p></li>

(略)

</ul>

<ul class="right">

<li><h4>アプリケーション (153冊)</h4>

<p>ワープロ(Word), 表計算(Excel), 電子メール, ホームページ作成, 年賀状・暑中見舞い作成, パーソナルデータベース(Access) ...</p></li>

(略)

</ul>

［この時点でのソース(013.html/013.css)］

goListクラスのp要素と、h3要素の頭に、それぞれ何やらリストマークのようでいてリストマークではないというか、ともかく何らかの記号というか合図なのであろう画像が差し込まれています。これはコンテンツ的には意味を成さないものなので、できればCSS側に含められると良いのですが、それだとうまくないので、やむなくalt属性を明示的に空にしたimg要素で直接配置しています。:before擬似クラスが使えれば、CSSでまったく問題ないのですが、IE6が:before擬似クラスに対応しておらず、また、Opera6は:before擬似クラスのcontentプロパティへ画像を指定しても正しく解釈してくれません。ほかのやり方といえば背景画像にこのマークをリピートさせずに配置して、左パディングを設定するとか、まあそういった小細工的なことも出来なくないのですが、ひとまずそのままimg要素としました。そして、左右2等分の段組スタイルを以下のようにします。

p.goList {

    text-align:right;

    margin-bottom:5px;

}

h3 {

    font-weight:normal;

    margin-top:10px;

}

ul.left {

    list-style:none;

    float:left;

    width:49%;

}

ul.right {

    list-style:none;

    float:left;

    width:49%;

    margin-left:1%;

}

ul.left li, ul.right li {

    margin-bottom:10px;

}

ul.left li img, ul.right li img {

    float:left;

    width:auto;

}

［この時点でのソース(014.html/014.css)］

これで、ふたつ続くul要素が横に並ぶようなスタイルになったわけですが、この影響でh2要素の「雑誌を探す」とh3要素の「シリーズで探す」は、明示的にclearしてやる必要が出てきました。明示的にする必要がない時にclearしても特に問題ありませんので、いっそのこと、h2要素とh3要素のすべてにclear:leftを設定してしまったほうが早いかもしれませんね。

h2, h3 {

    clear:left;

}

［この時点でのソース(015.html/015.css)］

「雑誌を探す」以下と「シリーズで探す」以下の段落は、単にp要素として意味づけしてあげるだけで、その他は特にこだわりません。下マージンなどのスタイル調整は都度やるものとしますが。

「ただいま売れています！！」を整える

そしてやっと、後回しにしていた「ただいま売れています！！」のスタイルです。一見した感じでは「おすすめ新刊」のところの配置に似ているので、同じようにleftクラスとrightクラスのulを続けてやれば良いのかな、という感じなのですが、ふたつの本の画像は、続く文字列のためにどちらも回り込みを指定しますので、すると困ったことにこの段落全体を括るボックス状のラインは文字列の最後の高さに来てしまいます。ようするに表紙イメージと重なってしまう可能性があるということです。それではたまらんということで、ここはちょっと今までのとは違ったやり方で解決してみましょう。あたかも、ul要素をtr要素に、li要素をtd要素のように見立てて、table要素の代わりにcolumnクラスのdiv要素で囲みます。さらに、周囲のボックス状のラインをひくために、全体をcolumnBoxクラスのdiv要素で括ることにします。

(略)

<div class="columnBox">

<div class="column">

<h2 class="columnCaption">ただいま売れています！！</h2>

<ul>

<li class="odd"><img src="hoge.jpg" alt="">平成15年度春期 初級シスアド合格教本</li>

<li class="even"><img src="piyo.jpg" alt="">平成15年度 ソフトウェア開発技術者試験 パーフェクトラーニング 過去問題集</li>

</ul>

</div>

</div>

(略)

leftクラスとかrightクラスとかいうのはさっき使ってしまったので、なんとなく今度はoddクラスとevenクラスにしてみました。これに、このようなスタイルを適用するわけです。

div.columnBox {

    border:1px solid #000000;

}

div.column {

    display:table;

    width:100%;

}

h2.columnCaption {

    display:table-caption;

    color:#1E4164;

    background-color:#ECECE6;

    padding:10px 0;

    text-indent:10px;

    font-size:100%;

    font-weight:normal;

    border:none;

}

div.column ul {

    display:table-row;

}

div.column li.odd {

    display:table-cell;

    float:left;

    width:45%;

    padding:10px;

    list-style:none;

}

div.column li.even {

    display:table-cell;

    width:45%;

    margin-left:1%;

    padding:10px;

    list-style:none;

}

div.column ul li img {

    float:left;

    width:auto;

}

［この時点でのソース(016.html/016.css)］

これは気持ち的には「ディスプレイ・テーブルレイアウト」とでも呼びましょうか。というか、だったらtable要素、tr要素、td要素を使ってマークアップしても良いという可能性がありますし、実際ここはテーブルでも意味的に通じるとは思います。div要素での括りが二重になるなど、マークアップとしては冗長なため、table要素にマークアップし直すというほうがスジともいえますが、ひとまずここでは、CSSでの色々な組み方の例示という意図も含めて、このやり方でいくということで。

そして、単に左のli要素をfloat:leftしただけでは、これまたなんだかOpera6.05で表示が不安定だったもので、さらにいうと周囲を囲むボックス状のラインが、float:leftされたimg要素をもきちんと取り囲むようにするためにも、このような荒業チックなやり方になってしまったわけです。まあ、わりかしうまく表示されることが確認できたんで、これでもいいかと。ただし、displayプロパティにtable系の値を入れていると、一方ではMac IE5の表示も不安定になりました。そこでdisplayプロパティのところは、Mac IE5が間抜けにも読み飛ばしてしまうというコメントのトラップを仕掛けておけばだいたいあんしんです。なおその際、display:tableが効いてないことになるわけなので、ボックス状のラインが周囲を取り囲むようにするために、img要素の回り込み指定の箇所も、あわせてトラップしておく必要があります。

div.column {

/* Mac IE5 はここから \*/

    display:table;

/* ここまでをコメントだと勘違いする */

    width:100%;

    border:1px solid #000000;

}

(略)

/* Mac IE5 はここから \*/

div.column ul li img {

    float:left;

    width:auto;

}

/* ここまでをコメントだと勘違いする */

［この時点でのソース(017.html/017.css)］

フッタエリア周辺を整える

さあ本気でもう少しです。コンテンツエリアの末端に、ページの先頭へ戻る機能を提供するリンクが差し込まれます。この段落は、まあ適当にgoTopクラスのp要素としておきますか。

<p class="goTop">ページトップへ↑</p>

p.goTop {

    text-align:right;

}

［この時点でのソース(018.html/018.css)］

最後にフッタエリアですが、著作権表示のすぐ上に、青っぽいラインがあります。ページの一番上のラインと同じっぽいですが。このラインはフッタエリアの含めることにしましょう。ズバリこんな感じです。

div#footerArea address {

    font-style:normal;

    text-align:right;

    border-width:8px 0 0;

    border-color:#1E4164;

    border-style:solid;

    padding-top:5px;

    padding-bottom:20px;

}

［この時点でのソース(019.html/019.css)］

そして最後に、コンテンツエリアの最初からフッタエリアの寸前まで、左右にラインがまっすぐのびていますね。これをスタイルで描きましょう。body要素のborderプロパティを使ってしまいたいところですが、コンテンツエリア全体という構造を定義するdiv要素としたほうが良さげです。ちょっち乱暴かもしれませんがが、ユーティリティエリアの下から右コンテンツエリアまでをすっぽりと包むdiv要素を用意しちゃいましょう。なお、これはエリア定義のひとつと考えて、id属性を使います。

(略)

<body>

(略)

</div><!-- utilityArea の閉じ -->

<div id="allContentsArea">

(略)

<p class="goTop">ページトップへ↑</p>

</div><!-- headerArea の閉じ -->

</div><!-- all の閉じ -->

<div id="footerArea">

(略)

もうクラス名が思いつかないので、全部という思いを込めてallContentsAreaでひとつヨロシクというか。で、allContentsAreaのdiv要素はこんなスタイルにします。

div#allContentsArea {

    border:1px solid #000000;

}

［この時点でのソース(020.html/020.css)］

残りの作業ですが、リンクが必要な箇所のマークアップやフォームコントロールのラベル定義など、HTML的な作業があります。それと、CSS的な作業にしても、ここで述べた道のりではわりと内容を端折っていますので、各エリアや各要素のマージンやパディングを、別途もろもろいじる必要があるでしょう。ようはここまでの説明だけだと、まず一回目のCSS仮組みを終えたというところなので。また、いじって本組みとなった後でも、まだまだやることはあって、ブラウザによってはバグっていたり、変な解釈をしてしまうプロパティや値もあったりするので、それをうまく回避してあげたりといった調整作業が満載だったりします（実際、この調整というのが一番壮絶だったりするわけで……）。

［この時点でのソース(021.html/021.css)］

なんにしても、これで冒頭で提示しましたCSSバージョンが出来上がっていることが期待されるわけなのですが、読みながらテキストエディタでちゃかぽこ書いてみたあなた、いかがだったでしょうか。マークアップ済みのHTMLがあって（そのマークアップのルールや仕様が明文化されていて）、最終的にどのようなレイアウトや外観にしたいということが決まってさえいれば、CSSでデザインしていくのって結構カンタンなんじゃないのと、ヨユーなんじゃないのと、そうは思いませんか。痛感するほどでなくても、まあなんとなくって程度でも、理解していただけたんじゃないかと期待しちゃうわけなのですが。

ともかく一度は、フルCSSでのデザインっていうのに挑戦してみてくださいね。業務でどこまで使うかは、まあ按配よく。