CSSだけでリストや横並びの区切り線を実現するパターン4つ

  • あとで読みたい人は…

こういったリスト表示はそれぞれの内容がわかりやすいようにたいがい区切り線を使ってデザインしますよね。

縦にリスト表示する区切り線の例

  • お知らせの一覧
  • コメントの一覧

横並びで使用する区切り線の例

  • メニュー一覧
  • 評価項目などの一覧

CSSだけでリスト(一覧)表示や横並びの区切り線を実現する、よく使うデザインのパターン4つをメモしておきたいと思います。どれも特定の部分だけクラスを増やしたりはせず、CSS側の指定だけで実現するCSSです。

縦のリスト表示

外側に上下ボーダーがある区切り線

border01 CSSだけでリストや横並びの区切り線を実現するパターン4つ

ul でコーディングした場合、margin-top: -1px; を li に指定ます。これを指定しないと内側の線が太くなってしまいます。

li {
padding: 10px 5px;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
margin-top: -1px;
}

左に日時があるお知らせのような一覧のコーディング方法は下記に詳しく書いてますのでぜひご覧ください。
リストやお知らせ系の一覧で上下にボーダーを引きたい場合のCSS

外側にボーダーがない区切り線

この区切り線だけでも方法は3つあります。

border02 CSSだけでリストや横並びの区切り線を実現するパターン4つ

ネガティブマージンを使う

こちらも margin-top: -1px; のようなネガティブマージンを利用して実現する方法です。

ul {
zoom: 1;
overflow: hidden;
}
li {
margin-top: -1px;
padding: 10px 5px;
border-top:1px solid #CCC;
}

擬似クラス:first-childか:last-childを使う

li には border-top のみを指定し、liの最初を擬似クラスの:first-childを使ってボーダーをなくす方法です。border-bottom を指定した場合は :last-child を使ってください。
IEは実質8から問題なく表示されるようです。(一応IE7も対応しているはずなんですが…)
IE7でも対応したい場合は下記を参考にjavascriptを追加すると大丈夫です。
HTML5でコーディングする時に入れる魔法のJS【完全版】

li {
padding: 10px 5px;
border-top:1px solid #CCC;
}
li:first-child{
border-top:none;
}

隣接セレクタを使う

li と li が隣接している場合のみスタイルを適用させる方法です。IE7から対応していますし、コードもとてもシンプルです。(2013.3.12追加)

li {
padding: 10px 5px;
}
li + li {
border-top:1px solid #CCC;
}

横並び

左右にボーダーがある区切り線

こういったメニューなど横並びの一覧表示は、ボーダーを「|」とテキストで入れてしまうと本来装飾であるボーダーをHTMLのテキストとして記述するわけなのであまりよろしくありません。

border03 CSSだけでリストや横並びの区切り線を実現するパターン4つ

border を使う

一番王道なのは li に border-right を指定し、ul に border-left を指定して実現する方法です。
li に inline-block を使うと余白ができてしまう可能性がありますが、HTMLで li 同士の改行をなくすか、CSSで letter-spacing を指定するとなくなります。
inline-blockの隙間をなくす方法2つ

ul {
border-left:1px solid #CCC;
padding-left:6px;
}
li {
border-right:1px solid #CCC;
padding-right:6px;
margin-right:6px;
display: -moz-inline-box;
display: inline-block;
*display: inline;
*zoom: 1;
}

content と :before:after の擬似要素を使う

上記のように border で指定すると、line-height を指定した場合に区切り線が高くなりすぎたりしてデザイン的にあまりよろしくありません。
個人的によく使うのは content と :before:after の擬似要素を使う方法です。content はIE8からの対応になります。
CSS側で表示したい「|」のテキストを指定するので、サイズや色を変更することもできます。

li {
	display: -moz-inline-box;
	display: inline-block;
	*display: inline;
	*zoom: 1;
}
ul:before,li:after {
	content:"  |  ";
	color:#999;
	font-size:11px;
}

左右にボーダーがない区切り線

border04 CSSだけでリストや横並びの区切り線を実現するパターン4つ

擬似クラス:first-childか:last-childを使う

こちらは上記の応用です。borderと:first-child:last-childの擬似クラスを使って記述します。
残念ながら content は :before:after の擬似要素をすでに使っているため、さらに :first-child:last-child といった複数の擬似クラスを指定することができません。

li {
border-left:1px solid #CCC;
padding-left:6px;
margin-left:6px;
display: -moz-inline-box;
display: inline-block;
*display: inline;
*zoom: 1;
}
li:first-child{
border-left:none;
}

隣接セレクタを使う

こちらは上記の応用で、li と li が隣接している場合のみスタイルを適用させる方法です。IE7から対応していますし、コードもとてもシンプルです。(2013.3.12追加)

li {
padding-left:6px;
margin-left:6px;
display: -moz-inline-box;
display: inline-block;
*display: inline;
*zoom: 1;
}
li + li {
border-left:1px solid #CCC;
}

他にもまだまだ色んなやり方があると思いますが、CSSって奥深いですね。

Pocket
article clipper CSSだけでリストや横並びの区切り線を実現するパターン4つ

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>