マジ

TIPS＆TRICKSを超えた 本気で使える テクニック

CSS（スタイルシート）で段組みを作る
前回紹介した「ブラウザー振り分けでCSSを切り分ける」テクニックを使えば、最新ブラウザーでCSSを活用する準備は万端だ。今月からはいよいよCSSの奥深いワザを探求していこう。まずはCSSで段組みを実現する方法を考える。段組みといえばこれまではテーブルを使うのが常識だった。CSSでレイアウトすれば、すっきりとしたメインテナンスしやすいページができてテーブルよりも有利だ。
HTML MANIAXで紹介したテクニックは

文：佐藤和人internet.impress.co.jp/maniax/でソースを公開！

テーブルレイアウトよ、さらば！
テーブルレイアウト
現在、世の中のウェブサイトの多くは、テコンテンツ1

コンテンツ3

コンテンツ2

コンテンツ4ーブルを使ったレイアウトでデザインされている。これにはさまざまな問題がある。
何といってもHTMLを記述するのが面倒だ。また、本来table要素は表を作成する<tr><td>É<td>É<tr><td>É<td>É1</td>
3</td></tr>2</td>
4</td></tr>

ためのもので、デザイン目的で使うとアクセシビリティーが低下する。
CSSでテーブルを100％置き換えるのは無理なので、筆者はテーブルレイアウトを必ずしも否定はしない。問題は、「コンテンツの並べ方がややこしくなる」ことだ。

CSSで配置する左上の図のようにテーブルを使うとする。

コンテンツ1

コンテンツ3

コンテンツ2

コンテンツ4

コンテンツ 1 → 2 → 3 ……と読ませたくても、ソースにはコンテンツ1→3→2……の順で書くしかない。これではソースを編集するときに効率が悪いし、音声読み上げソ<div id="block1">É<div id="block2">É<div id="block3">É<div id="block4">É1</div>
2</div>
3</div>
4</div>

フトで利用すると、意味の通らないページになってしまう。CSS で配置を工夫すれば、コンテンツの順番が明快な HTML を元にして柔軟なデザインができる。

184 +++ internet magazine +++インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

1［ 浮動ブロックを極める ］
CSSで段組みを作るのに一番手っ取り早い方法は、「浮動ブロック」の利用だ。floatプ
ロパティーを指定した浮動ブロックは、文字を回り込ませるのに使えるだけでなく、段「float: left」×2であら不思議！

組みのようなレイアウトも作れるのだ。

CSS をかじった人なら、float プロパティーをご存じだろう。float: leftを指定すると段落や画像が左に配置され、テキストがそのまわりを流れるようになる。float: rightなら右に配置される。
このように左や右に配置された要素を左に配置される浮動ブロックを作る。

もう1つ浮動ブロックを作ると、2つのブロックが左右に並ぶ。

「浮動ブロック」と呼ぶ。さて float: leftを指定した要素の次に、また float: leftを指定した要素を並べるとどうなるだろう。2つの浮動ブロックが段組みのようIDが「head」のdiv要素
IDが「menu」のdiv要素（float: left）
IDが「content」のdiv要素（float: left）
IDが「foot」のdiv要素（clear: left）に左右に並ぶのだ。
ソース①（layout1-1.css）
は、浮動ブ
ロック の こ の 性 質 を 利 用した C S Sだ。

は普通にページの上に配置される div要素。

は float: leftを指定してページの左に配置するdiv要素で、サイトのメニューなどに使う。のdiv要素にもfloat: leftを指定すれば、段組みのようにページの右にコンテンツ領域を置ける。

① layout1-1.cssの div要素には、clear: leftを指定してテキストの回り込みを解除する。ここは連絡先や著作権表示などページのフッターとして使える。

div#head { margin-bottom: 1em; }div#menu { float: left; width: 12em;
margin: 0 1em 1em 0; }div#content { float: left; width: 20em;
margin-bottom: 1em; padding: 0.5em; }div#foot { clear: left; padding: 0.5em; }上下に並んでしまってもあわてるな！
floatプロパティーを使うときの注意点は、必ずwidthプロパティーを指定して浮動ブロックの幅を明示することだ。ソース①では単位が em の値で幅を指定している。この場合は、ブラウザーの横幅を狭めると、2つの浮動ブロックが上

width: 25%

width: 65%下に並んでしまう。浮動ブロックの性質からしてあたりまえなのだが、ちょっと格好が悪い。これを避けるには、左の下段の画面のように、widthの単位を％にすればいい。こうすれば、ブラウザーの幅に合わせて浮動ブロックが伸び縮みするようになる。
また、2つの浮動ブロックをさらにdiv要素で囲み、そのdiv要素のwidthプロパティーを40emなどに固定するというブラウザーの幅を狭めると上下に並ぶ。

%で幅を指定して伸び縮みさせる。

手もある。

注意点
今月のサンプルでは、先月紹介したテクニックを使い、ネットスケープナビゲーター4にCSSが適用されないようにしている。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D+++ internet magazine +++

185

2

［ 座標を指定してブロックを配置 ］
浮動ブロックを使った段組みはお手軽だが、あまり細かいレイアウトには向かない。座標を指定して配置する機能を使えば、もっと自由なデザインができる。コンテンツの順

座標の指定で配置は自由自在

番とページ上での表示位置を自在に取り替えることも可能だ。

座標を指定してブロックを配置するに座標を指定してメニューを右に、本文を左に配置する。

は、ソース①（layout2-1.css）のように配 置したい 要 素 に C S S で p o s i t i o n :absoluteを指定する。leftプロパティーにページの左からの位置（X座標）、topプロパティーに上からの位置（Y座標）を指定すれば、そのとおりに配置される。
本連載のホームページ

でtips2-1.htmlのソースを見てほしい。HTMLの中でのブロックはよりもあとに書かれている。音声読み上げソフトなど
CSS が使えない環境で読んだ場合に、先に本文を読んだあとで、メニュー部分が読まれるようにするためだ。CSS で座標を指定すれば、HTML内の順番とページ上での表示の順番を自由にアレ

CSSが使えない環境では、本文のあとにメニューが表示される。

ンジできる。テーブルではできないワザだ。テーブルでページの左に長大なメ① layout2-1.css

ニューを置くと、音声読み上げソフトでは、本文にたどり着く前に長々とメニュ

div#head { position: absolute; left: 1em; top: 1em;
width: 32em; height: 4em; }div#menu { position: absolute; left: 1em; top: 6em;width: 12em; }div#content { position: absolute; left: 14em; top: 6em;
width: 18em; padding: 0.5em; }ーを読まされる羽目になる。
position: absoluteを使った段組みの欠点は、やのブロックの下に別のブ ロックを 並 べ る の が 難 し い ことだ。

やの内容が増えると下のブロックに重なってしまう。これを防ぐには、ブロックの内容を限定して高さを固定するしかない。
internet.impress.co.jp/maniax/

h1

ブロックの中にまたブロックを置く

p#catch

さて、左下のソース②（layout2-2.css）
は、ソース①のにあたるブロックの中で画像とキャッチフレーズを配置したものだ。position: absoluteを指定した
親要素の中に、さらにposition: absoluteブロックの中で、さらにブロックを配置することもできる。

を指定した子要素を置くと、子要素の座標の原点はページの左上ではなく、親② layout2-2.css要素の左上になる。これを利用すれば、何重にも入れ子にしたテーブルを使わ

div#head h1 { position: absolute; left: 0; top 0; }div#head p#catch { position: absolute;
left: 15em; top: 1em; margin: 0; }186 +++ internet magazine +++なくても、配置したブロックの内部でさらに自由な配置ができる。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

3［ 動かないメニューを作る ］
CSSで段組みを作る方法を紹介したついでに、ちょっと変わったワザを見てみよう。ページをスクロールしてもメニューを同じ場所に表示させ続けるテクニックだ。CSSを活フレームいらずの固定配置用したページデザインの未来が見えてくるだろう。

C S S の p o s i t i o n プ ロ パ ティーは 、一見左ページと同じテクニックを使っているようだが……

absolute、relativeのほかにfixedという値を取れる。左のソース①（layout31.css）の「div#menu」のようにposition:
fixed を指定すると、ページをスクロールしても動かないブロックになる。サイトのメニューのように、常に表示させておきたい部分に指定すると便利だ。こ
れまではこうした機能を付けるにはフレームを使うしかなかったが、CSSを活用すればテーブルだけでなくフレームを使ったレイアウトもいらなくなるのだ。
ただし、残念なことに、これが使えるのはネットスケープ 6 以降とマッキント

なんと！ スクロールしてもメニューの位置がそのままだ。

ッシュ版の IE 5だけだ。ウィンドウズ
版のIEでは効果がない。IEの次バージョンがposition: fixedに対応してくれることに期待しよう。

① layout3-1.css
div#head { position: absolute; left: 1em; top: 1em;
width: 28em; height: 4.5em; }div#menu { position: fixed; left: 1em; top: 6em;
width: 12em; }div#content { position: absolute; left: 14em; top: 6em;
width: 14em; padding: 0.5em; }CSSで本当の段組みができる？
今まで紹介してきたワザは、本当の段組みではなく、言わば「段組みもどき」だ。現在のCSSでは、ページ中のコンテンツを左右方向に並べるのはなかなか難しい。
現在 W3C では、次世代の CSS であるCSS 3が検討されている。CSS 3の草案は、「Color」や「Text」などのモジュール別に発表されているが、左の URLの 「 CSS3 module: Multi-columnlayout」は、そのものずばり、CSSで段組みを表現する仕様の草案だ。ソース②（将来実現するかもしれないCSS）はこの草案から引用したもので、column-

現 在 草 案 段 階 の「 C S S 3module:Multi-column layout」。

countで2段組みのレイアウトを作成し、www.w3.org/TR/css3-multicol/

column-ruleで2つの段の間に線を引き、column-gapで段の間の間隔を4文字分としている。もちろん、現在どんなブラウザーも対応していない。将来この機② 将来実現するかもしれないCSS

能がブラウザーに採用されるようにな

p#column { border: solid black 1em; padding: 1em;
column-count: 2; column-rule: solid black 1em;
column-gap: 4em; }インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

れば、テーブルレイアウトを使う必要性はまったくなくなるだろう。

+++ internet magazine +++187［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバーアーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.