少し前にリキッド・レイアウトなページにフォームを表示する作業をしました。そのフォームには多数のチェックボックスやラジオボタンがあったのですが、そのレイアウトでちょっと悩んでしまいました。テーブルを使えば綺麗に整列させることはできるのですが、それではリキッド・レイアウトの意味がありません。やはり横幅に合わせて一行に表示するチェックボックスの数が変わるのが理想と言えましょう。

ということで、そのための方法をいくつか考えてみましたので、本日はその結果をレポートしたいと思います。

まずは何も考えずに単純に並べてみました。当然ですが、ラベルの途中に改行が入って、ダメダメな結果になっています。

ここからラベルの中途半端な改行を抑制して、綺麗に配置させようというのが今回の趣旨です。

まず最初に思いつくのは、各々のチェックボックスとラベルをブロック要素で囲い、 float 指定をすることです。実際にやってみました。マウスドラッグで外枠をリサイズできるようにしてありますので（DragResize.js を使っています ^^v）、リサイズ時の挙動もお試しいただけます。

だいぶいい感じですね。リサイズしてみると、横幅に合わせてカラム数が変わるのがお分かりいただけるかと思います。 Opera 9.5, Firefox 2.0, Safari 3.0, IE6 で試しましたが、どれも正しく表示されました。ただし Firefox 2.0 のみ、リサイズ時の再配置が実行されないことが稀にあるようです。

参考までに、ソースは以下のようになっています。 label 要素に display:block を指定してブロック要素としています。

<style type="text/css">
#sample2 label {
  display: block;
  float: left;
  width: 110px;
}
</style>
<div id="sample2">
<label><input type="checkbox" /> グーグル</label>
<label><input type="checkbox" /> ヤフー</label>
<label><input type="checkbox" /> エキサイト</label>
<label><input type="checkbox" /> インフォシーク</label>
<label><input type="checkbox" /> フレッシュアイ</label>
</div>

場合によっては、単にラベルの途中での改行を抑制するだけで間隔を詰めて表示したいこともあるでしょう。そこで、 width の指定を削除してみました。

Opera, Firefox, Safari では意図した表示になるのですが、残念ながら IE6 ではうまくいかないようです。理屈の上でも少々イレギュラーな気がするので、仕方のないところかもしれません。

ラベル途中での改行を抑制するだけなら、 white-space:nowrap を使う手もあります。これを適用してみたのが以下の例です。

ソースは以下のようになっています。

<style type="text/css">
#sample4 label {
  white-space: nowrap;
}
</style>
<div id="sample4" class="page_sample">
<label><input type="checkbox" /> グーグル</label>
<label><input type="checkbox" /> ヤフー</label>
<label><input type="checkbox" /> エキサイト</label>
<label><input type="checkbox" /> インフォシーク</label>
<label><input type="checkbox" /> フレッシュアイ</label>
</div>

結果は、 Opera, Firefox, Safari, IE6 のいずれでも意図した通りの表示になりました。なかなかいい感じです。しかし、 label はブロック要素ではないので、 width の指定ができません。従って、この方法ではグリッド状に整列させることはできません。

もうひとつ今回の目的に使えそうな指定として display:inline-block というのがあります。正確さに欠ける表現かもしれませんが、対象のブロック要素を通常の文字と同等に扱うという指定です。まさに今回のような目的のために用意されたような機能ですね。残念ながら Firefox 2.0 ではサポートされていないようですが、 Opera, Safari IE6 では動作します。以下、実例です。

そしてソース。

<style type="text/css">
#sample5 label {
  display: inline-block;
  width: 110px;
}
</style>
<div id="sample5">
<label><input type="checkbox" /> グーグル</label>
<label><input type="checkbox" /> ヤフー</label>
<label><input type="checkbox" /> エキサイト</label>
<label><input type="checkbox" /> インフォシーク</label>
<label><input type="checkbox" /> フレッシュアイ</label>
</div>

width 指定をなくしても平気です。

この方法はかなり自由度が高く、 text-align などのテキスト用の指定がほぼすべて適用されます。例えば、 text-align:justify を適用すると以下のようになります。

工夫次第で面白い事ができそうな機能です。

以上、本日はリキッド・レイアウトにチェックボックスをうまく配置する方法を考えてみました。現状では、グリッド配置のときは float 、単に中途半端な改行を防ぐだけなら nowrap というのが無難な選択でしょうか。でも、理屈の上では inline-block を使うのが最も正しいように思えます。 Firefox のサポートが待たれますね。

今回ご紹介した方法はチェックボックス以外にもいろいろ応用できると思います。一歩進んだリキッド・レイアウトのテクニックとして、覚えておいて損はありませんよ！