スタイルシートの技
「Internet Explorer」と「Netscape Navigator」でのtable要素の挙動の違いの対処法
段組とはWord文書などをいじった事がある人は御存知かと思いますが、 1ページ内の文書を左右の領域でふたつに分ける事です。 これはテーブルでレイアウトすれば非常に簡単にできる事なのですが、 テーブルを使うというのはアクセシビリティ上ではよくありません。
目が見えない人は音声読み上げ式のブラウザを使います。 本来テーブルというのは表であり、データを表すのに使うものです。 それをウェブのレイアウトに使ってしまったらどうなるでしょう… 音声読み上げ時にめちゃめちゃな事を読み上げてしまう可能性がある訳ですよね。 とはいえ、テーブルのレイアウトは時に便利です。 そのような場合にはsummary属性に「レイアウト用テーブル」とでも記載しておくのが、 良いかと思います。それでは、まず簡単な段組をしてみましょう。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title></title>
<style type="text/css">
*.floating
{
float: left;
width: 49%;
border: solid 1px #cccccc;
}
</style>
</head>
<body>
<h1>段組はスタイルシートで！</h1>
<div class="floating">
<p>Column 1</p>
</div>
<div class="floating">
<p>Column 2</p>
</div>
</body>
</html>
Column 1
Column 2
このように2段の段組を作成する事ができます。境界線をつけたのはあくまでも目印のためです。float属性は画像の回りこみをさせる時に使いましたね。 良く分からない方は、技「画像の回り込みを行う」をもう一度確認してみてください。
では、3段組にする場合にはどのようにすれば良いのでしょうか？ 鋭い方は分かったかも知れませんが、次のようにすれば良いのです。
また49%にしているのは、実際にはmarginによる余白も存在するための回避策です。 marginを大きめにスタイルシートで設定している人は更にパーセンテージを小さくしないと、 段組にはならずに右ペインがずれてしまいます。
*.floating
{
float: left;
width: 32%;
border: solid 1px #cccccc;
}<div class="floating">
<p>Column 1</p>
</div>
<div class="floating">
<p>Column 2</p>
</div>
<div class="floating">
<p>Column 3</p>
</div>
Column 1
Column 2
Column 3
このような単純な段組ならばさほどに難しくはないのですが、 使いこなすのはなかなか難しいものです。 真ん中のペインはウィンドウ幅に応じて可変にする…とか、 固定の幅を使うとか言った場合には、Internet Explorerでは綺麗に見えても、 OperaやFireFoxなどでは崩れてしまったりするのは良くある事です。