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

Post on:2008年3月4日

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

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

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

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

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

<textarea name="code" class="css" cols="60" rows="5">
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;
}
</textarea>

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;

}

</textarea>

Internet Explorer用のCSS

<textarea name="code" class="css" cols="60" rows="5">
<!--[if lte IE 6]><style>
ul, ol{
	height:0;
	overflow:visible;
}
</style><![endif]-->

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

<!--[if lte IE 6]><style>

ul, ol{

height:0;

overflow:visible;

}

</style><![endif]-->

<!--[if gt IE 6]><style>

ul, ol{height:1%;}

</style><![endif]-->

</textarea>

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

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

フラットなリストのCSS

<textarea name="code" class="css" cols="60" rows="5">
.flat li{
	margin-left:3em;
}

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

.flat li li{
	margin-left:0;
}
</textarea>

.flat li{

margin-left:3em;

}

.flat li ul, .flat li ol{

margin-left:1em;

padding-left:0;

}

.flat li li{

margin-left:0;

}

</textarea>

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

<textarea name="code" class="css" cols="60" rows="5">
ul.bullet-a li{
	list-style-image:
	url('bullet-image-a.png');
}

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

ul.bullet-a li{

list-style-image:

url('bullet-image-a.png');

}

ul.bullet-b li{

list-style-image:

url('bullet-image-b.png');

}

</textarea>

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

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

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

<textarea name="code" class="css" cols="60" rows="5">
.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;}
</textarea>

.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;}

</textarea>

最終的なリストのCSS

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

最終的なリストのCSS

<textarea name="code" class="css" cols="60" rows="5">
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');}
</textarea>