[CSS]ブラウザ間の差異を無くすリストのスタイルシート

サイト構築 -CSS

Konstruktors Notesのエントリー「How to Create Beautiful and Elegant HTML Lists Using CSS」から、CSSを使用して美しくエレガントなリストを制作する方法を紹介します。

How to Create Beautiful and Elegant HTML Lists Using CSS

各ブラウザによるリストのレンダリングの差

リストにmarginやpaddingを指定した場合、「Internet Explorer」と「Gecko, Webkit and Opera」の各ブラウザで、レンダリングが異なります。

各ブラウザによるレンダリングの差を解消

リストの各ブラウザによるレンダリングの差をなくすスタイルシートの設計をします。

シンプルなリストのためのCSS

ul, ol{
	margin:auto -3em 1em 0;
	padding:0;
	position:relative;
	left:-3em;
	overflow:hidden;
}

li{
	margin-top:0.25em;
	margin-bottom:0.25em;
}

ul ul, ul ol,
ol ol, ol ul{
	margin-left:1em;
	padding-left:0;
}

ul li, ol li{
	margin-left:5em;
}

li li{
	margin-left:1em;
}

Internet Explorer用のCSS

<!--[if lte IE 6]>
<style>
ul, ol{
	height:0;
	overflow:visible;
}
</style>

<![endif]-->

<!--[if gt IE 6]>
<style>
	ul, ol{height:1%;}
</style>

<![endif]-->

上記のスタイルシートを指定すると、各ブラウザでのレンダリングの差はなくなり、下記のようになります。

上記を元に、ツラが揃ったフラットなリスト、リストのマークを画像にするリストのサンプルです。

フラットなリストのCSS

.flat li{
	margin-left:3em;
}

.flat li ul, .flat li ol{
	margin-left:1em;
	padding-left:0;
}

.flat li li{
	margin-left:0;
}

マークを画像にするリストのCSS

ul.bullet-a li{
	list-style-image:
	url('bullet-image-a.png');
}

ul.bullet-b li{
	list-style-image:
	url('bullet-image-b.png');
}

可読性を高めたリストのCSS

最後に、リストの間隔を調整し、可読性を高めます。

可読性を高めたリストのCSS

.spaced{margin-bottom:0;}
.spaced ul, .spaced ol{margin-top:1em;}
.spaced li{margin-bottom:1em;}
.indent li{padding-left:1em; text-indent:-1em;}
.inside li{list-style-position:inside;}
.clear li{list-style-type:none;}

最終的なリストのCSS

上記の全てをまとめたものは、下記のデモページになります。
全てのリストのスタイルのサンプルページ

最終的なリストのCSS

ul, ol{
	margin:auto -3em 1em 0; padding:0;
	position:relative; left:-3em; overflow:hidden;
}

li{margin-top:0.25em; margin-bottom:0.25em;}
ul ul, ul ol,
ol ol, ol ul{ margin-left:1em; padding-left:0;}
ul li, ol li{ margin-left:5em;}
li li{margin-left:1em;}

.flat li{margin-left:3em;}
.flat li ul, .flat li ol{margin-left:1em; padding-left:0;}
.flat li li{margin-left:0;}

.spaced{margin-bottom:0;}
.spaced ul, .spaced ol{margin-top:1em;}
.spaced li{margin-bottom:1em;}
.indent li{padding-left:1em; text-indent:-1em;}
.inside li{list-style-position:inside;}
.clear li{list-style-type:none;}

ul.bullet-a li{list-style-image: url('bullet-image-a.png');}
ul.bullet-b li{list-style-image: url('bullet-image-b.png');}