リストでテーブルのようなマス目を作ると？　その１　～横方向へ並べる場合～

リストでテーブルのようなマス目を作ると？　その１

　リスト要素にボーダーをうまく設定して、枠付きのテーブルのような格子状の見た目を実現させてみたいと思います。

　このサンプルでは、リスト項目を横方向へ並べています。縦方向へ並べる場合のサンプルは、「リストでマス目を作る　その３」でご紹介しています。

IE 6.0、Firefox 1.5、Opera 9.10で動作確認しています。

完成例（３行３列　横方向）

　分かりやすくするために、枠の幅を太めに20ピクセルとし、内容領域は一辺が80ピクセルの正方形に設定しました。リスト項目は横方向に並んでいます。

ＨＴＭＬサンプルコード

　このサンプルでは、マス目１行毎に１つのＵＬ要素を使い、３列になるようにＬＩ要素を３つ入れてあります。

　ＵＬ要素を１行毎に分けずに１回だけ使用するサンプルは、「リストでマス目を作る　その２」でご紹介しています。

　スタイルシートの詳細については、このページのソースコードのヘッダ内の記述を参考にしてください。ポイントは、内容領域の幅とボーダーの幅をどう考慮していくかにあります。

　ＬＩ要素はブロックレベル要素なので、ＣＳＳのフロートプロパティを左に設定して横一列に並ぶように設定しています。

　ＬＩ要素は左右に隣接するため、そのままボーダーを設定してしまうと左右で重なって倍の太さになってしまう部分が生じますが、それをボーダーを設定する場所を考慮することで回避しています。

完成例の内訳　～要素毎に色を変えると？

　ソースコードから分かるとおり、ボーダーの設定が少し複雑になっています。ＬＩ要素には右と下に、ＵＬ要素には左のみ（■色の部分）に、これらを囲んでいるＤＩＶ要素には上のみ（■色の部分）に、それぞれボーダーを設定しています。色分けすると以下のようなサンプルになります。