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
Internet Explorer用のCSS
上記のスタイルシートを指定すると、各ブラウザでのレンダリングの差はなくなり、下記のようになります。

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

可読性を高めたリストのCSS
最後に、リストの間隔を調整し、可読性を高めます。
可読性を高めたリストのCSS
最終的なリストのCSS
上記の全てをまとめたものは、下記のデモページになります。
全てのリストのスタイルのサンプルページ
最終的なリストのCSS
最終的なリストのスタイルシートは、cssファイルでも提供されており、チートシートとしてPDFファイルもダウンロードできます。
Post on:2008年3月4日


