連続するリストを横並びに等分表示する方法
ECサイトの「商品一覧」や会社サイトの「お知らせ」などでは、連続する同格の情報をHTMLのリストアイテム要素を用いてマークアップし、横並びで表示させることが多い。固定幅での表示では厳密な計算によって美しく並べることができたが、レスポンシブなWebサイトのように画面幅が変化する環境では等分表示することは容易ではない。CSS3の疑似クラスを用いて、横並びさせたリストアイテムを美しく等分表示する方法のひとつを紹介する。なお、「連続するリストを横並びに等分表示する方法2」のほうがより簡単です。
前提となるHTMLとCSS
HTML
次のようなHTMLでマークアップした「商品一覧リスト」について考える。
<html> <head> <title>商品一覧リスト</title> </head> <body> <h1>商品一覧リスト</h1> <div id="item-list"> <ul> <li>商品01</li> <li>商品02</li> <li>商品03</li> <li>商品04</li> <li>商品05</li> <li>商品06</li> <li>商品07</li> <li>商品08</li> <li>商品09</li> <li>商品10</li> <li>商品11</li> <li>商品12</li> <li>商品13</li> <li>商品14</li> <li>商品15</li> <li>商品16</li> <li>商品17</li> <li>商品18</li> <li>商品19</li> <li>商品20</li> </ul> </div> </body> </html>
CSS
/* 簡便のために全要素のマージンとパディングを0に */
* {
margin: 0;
padding: 0;
}
/* 商品一覧エリアの背景 */
#item-list {
background: #ccc;
}
/* クリアフィックス */
#item-list ul:after {
content: "";
clear: both;
display: block;
}
/* 商品一覧のリストの設定 */
#item-list ul li {
display: block;
float: left;
height: 100px;
list-style-type: none;
background: #0cc;
text-align: center;
}
上記のHTMLをブラウザで表示すると、各リストアイテムの幅を指定していないので、画面幅に応じて成り行きで折り返しが発生する。
ブラウザでの表示
横並びに等分表示したい場合
2つのリストアイテムを等幅で並べたい場合は次のCSSを追記する。
#item-list ul li {
width: 50%;
}
ブラウザでの表示
横並びに3等分表示したい場合
3つのリストアイテムを等幅で並べたい場合は、前述の手法にならうと「33%」や「33.3%」を指定すればよいが、「1%」あるいは「0.1%」の望んでいない余白が生じる事が予想される。そこで、特定のリストアイテムに余白を与え、きれいに3等分することを目指す。3等分では次のようなCSSを追記する。
#item-list ul li {
width: 32%;
}
#item-list ul li:nth-child(3n-1) {
margin: 0 2%;
}
「li:nth-child(3n-1)」がポイントで、CSS3の疑似クラス「:nth-child()」を用いることで3等分する際中心に来るリスト（2番目、5番目、8番目…）の左右にマージンを設定している。これにより横幅の合計は32%＋（2%＋32%＋2%）＋32%＝100%となる。x：リスト幅、y：マージンの値、とした場合、「2y=100-3x」を満たす数字であれば良い。たとえばx：33.2、y：0.2など。
ブラウザでの表示
横並びに4等分表示したい場合
4つのリストアイテムを等幅で並べたい場合は次のCSSを追記する。
#item-list ul li {
width: 25%;
}
ブラウザでの表示
横並びに5等分表示したい場合
5つのリストアイテムを等幅で並べたい場合は次のCSSを追記する。
#item-list ul li {
width: 20%;
}
ブラウザでの表示
横並びに6等分表示したい場合
6つのリストアイテムを等幅で並べたい場合は次のCSSを追記する。
#item-list ul li {
width: 15%;
margin: 0 1%;
}
#item-list ul li:nth-child(6n+1) {
margin: 0 1% 0 0;
}
#item-list ul li:nth-child(6n) {
margin: 0 0 0 1%;
}
「li:nth-child(6n+1)」で左端のリスト（1番目、7番目、13番目…）のmarginを、「li:nth-child(6n)」で右端のリスト（6番目、12番目、18番目…）のmarginを指定している。x：リスト幅、y：マージンの値、とした場合、「y=100-6x」を満たす数字であれば良い。たとえばx：16.5、y：0.1など。
ブラウザでの表示
横並びに7等分表示したい場合
7つのリストアイテムを等幅で並べたいい場合は次のCSSを追記する。
#item-list ul li {
width: 12%;
margin: 0 1%;
}
#item-list ul li:nth-child(7n+1) {
margin: 0 1% 0 2%;
}
#item-list ul li:nth-child(7n) {
margin: 0 2% 0 1%;
}
「li:nth-child(7n+1)」で左端のリスト（1番目、8番目、15番目…）のmarginを、「li:nth-child(7n)」で右端のリスト（7番目、14番目、21番目…）のmarginを指定している。x：リスト幅、y：マージンの値、とした場合、「16y=100-7x」を満たす数字であれば良い。たとえばx：13.6、y：0.3など。
ブラウザでの表示
横並びに8等分表示したい場合
8つのリストアイテムを等幅で並べたい場合は次のCSSを追記する。
#item-list ul li {
width: 12.5%;
}
ブラウザでの表示
横並びに9等分表示したい場合
9つのリストアイテムを等幅で並べたい場合は次のCSSを追記する。
#item-list ul li {
width: 10%;
margin: 0 1% 0 0;
}
#item-list ul li:nth-child(9n+1) {
margin: 0 1% 0 1%;
}
「li:nth-child(9n+1)」で左端のリスト（1番目、10番目、19番目…）のmarginを指定している。
ブラウザでの表示
まとめ
今回は最も計算が簡単になるように各数値を設定したが、リストアイテム間のマージンの有無、またリスト左右のマージンの有無、さらにはマージンの代わりにパディングで調整する場合など、目指すデザインに応じて幅の数値や疑似クラス「:nth-child()」を調整することもできる。
また、画面サイズに応じて横並びさせたリストアイテムの表示数を変えたい場合などには、メディアクエリーと組み合わせると便利だ。さらに、グリッドに沿ったコンテンツ配置をする際などにも応用することができる。
参考
記事のデータ
| 文責 | |
|---|---|
| 公開日 | 2014年2月22日 |
| カテゴリー | |
| タグ | Web／情報を表現する／技術と手法 |
| 関連する記事 |