仕様に従った XHTML + CSS のコーディング、つまり Web 標準的なコーディングの大切さを教えてくれた本書は、コーダーとしての私のバイブルとなっています。

ブラウザで見る際の視覚的な結果からマークアップする要素を決定するのではなく、文章構造上妥当である要素を選択しマークアップしていくという考え方。今の日本の Web 業界にこういった Web 標準的な考え方を一般化するにあたり、本書はその一翼を担っていると私は確信しています。私はもし本書に出会わなかったら、コーダーになっていなかったかもしれません。

本書の内容では特に CSS のリファレンスが素晴らしく、各プロパティごとに「値・規定値・適用対象要素・継承するかしないか・パーセンテージ・メディア・未対応ブラウザ」といった項目が表にまとめられ、分かりやすい例を挙げながら解説されています。
XHTML の方も要素ごとに「書くことができる属性・含むことができる要素」などを詳しくまとめてあったらなお良いのでは・・・と思ってはいますが、要素ごとのマークアップ例は秀逸で、非常に参考になります。

600ページを越える書籍であるだけに、私は全てのページに目を通したわけではないのですが、必要となった時に必要とする項目だけを索引から引くという、辞書的な使い方をしています。コーディングをする上で手放せないものとなっていますので、会社用と自宅用で2冊持っていたりします。コーダー必携の1冊と言えるでしょう。

• CYBER@GARDEN 『Web標準の教科書』紹介ページ
• Amazon で『Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト』を見る

以下の画像のような見た目の段組を、実現することを目標とします。

普通に考えると、float を使って横に並べたボックス各々に border を適用したくなります。が、このやり方ですと各ボックスの内容量が異なる場合、各々の高さが異なってしまい、ボックスの底辺が揃わなくなります。このように。

そこで、border を使わずに目標の見た目を実現します。

以下に示す方法は、例として2カラムの段組を取り上げていますが、3カラム以上の段組でも同じように利用することができます。ただし、横幅固定デザインでのみ有効です。リキッドレイアウトやエラスティックレイアウトでは手法を変えないと利用できません。

まず以下のような画像を作り、スライスを切ります。

緑色の部分がスライスと思ってください。段組中段の部分を実現するためのスライスと、段組底辺を実現するためのスライスです。わかりやすいように高さ10ピクセル程度のスライスにしていますが、実際は中段部分は高さ1ピクセル、底辺は線の太さと同じで大丈夫です。

で、次のようなソースを書きます。あくまで一例です。

<div id="container">
<div class="section" id="columnAlpha">
<h2>コラムA</h2>
<p>サンプルテキストサンプルテキストサンプルテキスト...</p>
</div>
<div class="section" id="columnBeta">
<h2>コラムB</h2>
<p>サンプルテキストサンプルテキストサンプルテキスト...</p>
</div>
<p id="containerBtm">&nbsp;</p>
</div>

div#container {background:url(中段部分の画像.gif) repeat-y;}
div#columnAlpha {
float: left;
width: 162px;
border-top: 2px solid #339;
margin-right: 10px;
}
div#columnBeta {
float: left;
width: 162px;
border-top: 2px solid #339;
}
p#containerBtm {
clear: both;
height: 2px;
background: url(底辺部分の画像.gif) no-repeat bottom;
font-size: 2px;
line-height: 2px;
}

段組しているボックスには上辺のみ border を指定し、親のコンテナボックスに対して段組中段部分の画像をY軸リピートで指定します。そして、段組ボックスの直後に、底辺となる p#containerBtm を挿入し clear:both と、底辺部分の画像を背景に指定します。height と font-size、line-height の指定は、このボックスを底辺画像の高さピッタリにするためのものです。

p#containerBtm にあたるものは、clear ができてかつ底辺画像が表示できれば、なんでもいいです。底辺画像は背景ではなくて、img 要素で埋め込んでも構いませんし。p#containerBtm 自体入れたくない方は、コンテナdivをもうひとつ追加して、そちらに底辺画像を背景で指定 ＆ clearfix を使う、というやり方でもいいです。また、きちんと内容を持っているフッター的なボックスを持ってきてもいいでしょう。

以上のような方法で底辺を「揃っているように見せる」ことができます。（実際は揃ってないです）

なお、クロスブラウザな表示を実現する際に border は障害となる場合がありますので注意が必要です。この点は ADP: ピクセル単位で合わせるところではborderを使わない（IE7でも！） においてよくまとめられています。

段組ボックスでは上辺のみを表現し、親コンテナボックスで中段部分を表現するのがミソですね。この点を抑えて工夫すれば、リキッドレイアウトやエラスティックレイアウトにおいても実現する方法はありそうです。

まずどんなブロック要素で囲むか？そして > 部分はどうするか？> というのが真っ先に思いつきますが、これはスマートとは言えないのでは・・・などなど。そこでGoogleで情報検索したところ、次の記事を見つけました。

日々のネコゼログログ: アクセシブルな「パンくずリスト」

こちらの記事によると、インフォアクシアの植木さんのインタビューからの抜粋があります。そのインタビューの様子はこちら。アクセシビリティを言い出すと・・・結局はこの人にたどり着くようです。頭が下がります。

あとは、試しにやってみているのですが、パンくずリストの間に挟む矢印を画像にして、「の中の」という代替テキストを入れてあります。こうすると例えば「ホームの中のニュース」と読み上げられるので、ユーザーテストでもサイトの階層が分かりやすいとの声をいただいています。 ・・・中略・・・ いわゆるパンくずリストは、ユーザーテストをやっていると、画面を見ているユーザーにも意外とその意味が分からないという人が多いんです。確かに、ヘッダーにいきなり「ホーム>>ニュース>>過去記事」なんて書いてあっても初めて見た人はなんだろう？と思いますよね。 そこで、少しでも分かりやすくするために一番最初に「現在位置」と入れてみました。

なるほど確かに、インフォアクシアのソースは既にそうなっていました・・・ってそれは本人ですから当たり前ですよね。インフォアクシア式のやり方の他に、私は以下のマークアップを思いつきました。

<dl id="locus">
<dt>現在位置:</dt>
<dd>ホーム <img src="/common/img/icon_arrow.gif" alt="の中の" /></dd>
<dd>キャンペーン <img src="/common/img/icon_arrow.gif" alt="の中の" /></dd>
<dd>おにぎり100円セール</dd>
</dl>

dl要素を使用したやり方です。「現在位置」をdt要素に指定しています。ただ、ヴィジュアルデザインの都合上、「現在位置」表示を入れられない場合、どうするか。

（私の現在の仕事のように、既に決定されているヴィジュアルデザインをコーディングするという作業の場合、デザイナーと事前に打ち合わせておかない限り、ヴィジュアルデザインに「現在位置」表示が入っていることはまずないでしょう。）

こういった場合、dt要素に position:absolute を指定するなどして、画面外に飛ばしてしまいます。通常のブラウザでは見ることができなくとも、音声ブラウザでは読み上げられるはずです。

ただ、不覚にも私は音声ブラウザを利用したことがないので、dl要素を使用したマークアップと、インフォアクシ式のp要素を使用したマークアップが、それぞれどのように読み上げられるかがわかりません。

また、パンくずリストに付ける適切な id は何か、こちらもリサーチしてみました。インフォアクシアでは id="breadcrumbs" で「パンくず」をそのまま英語化したものです。また、CSS HappyLifeさんのこちらの記事（もう、class名やid名で悩まないんだからっ！！）では以下のようなご紹介があります。

パンくずっぽいの

topicpath

topic-path

topicPath

pan

pankuzu

・・・がどれもいまいちピンとこなかったので、その筋のサイトをいくつか続けて見て行ったところ、ありました。カッコイイのが。アックゼロヨンの id="locus" です。

Infoseek マルチ辞書で「locus」をひいてみると 場所, 所在地; 【遺伝】遺伝子座; 【数】軌跡. とあります。これだ！と思いました。

パンくずリストは大概がサイトのメインコンテンツより上にあるものであるだけに、テキトーにマークアップしてしまうのはアクセシビリティの観点から避けたいところです。

div#container {
width: 90%;
max-width: 60em;
min-width: 46em;
margin: 0 auto;
}

コンテンツ全体を囲む div#container に対して max-width と min-width をem単位で指定しています。そうすることで、ブラウザで文字サイズを変更すると div#container の幅が変わるようになります。なお、 max-width/min-width プロパティに対応していないIE6以前などのブラウザでは単に width:90% になるだけです。

また、エラスティックレイアウトで2カラムを実現するためにネガティブマージンをレイアウトに使っています。ネガティブマージンというのは文字通り、マイナス値を指定した margin プロパティのこと。

div#main {
float: left;
width: 100%;
margin: 0 -16em 20px 0;
}
div#sidebar {
float: right;
width: 15em;
margin-bottom: 30px;
}

div#sidebar の幅が15emで、残りの領域は div#main という割り当てとなっています。div#sidebar の width:15em に対して div#main の右 margin:16em 。差分の1emは間のマージン。これだけだと、div#main の右端が div#sidebar に潜ってしまうため、div#main の中身のブロック要素に右 margin を設定します。

div.entry {
margin: 0 16em 30px 0;
}

これで完成。

なお、このレイアウトには以下のサイトを参考にさせていただきました。

2xup.org: 一行あたりの文字数を制限する elastic layout （エラステックレイアウト）

Alternative Design Project: デザインテンプレート1110とネガティブマージン