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日






英語をカタカナで書くと、本来の発音ではなくなってしまうののですが、ビュレットは明らかな間違いなので、ブレット又はブリットにしてほしいなぁ。
http://dictionary.goo.ne.jp/search.php?MT=bullet&kind=ej&mode=0&base=1&row=0
http://eow.alc.co.jp/bullet/UTF-8/?ref=sa
> ユーザビリティエンジニア(笑) さん
ありがとうございます。
「リストのマーク」に変更しました。
08.03.05 …
ブラウザ間の差異を無くすリストのスタイルシート (coliss)
ナビゲーション画像を作成するPhotoshopのチュートリアル集 (coliss)
(more…)
これ、すごく役立ったし、いい記事だと思うのですが、
ソースが表示されている部分で
本来「li」などと表示されるべき部分が、
「<span id=”searchword”>li</span>」とかって
なっているところがあって、htmlのタグが
紛れ込んでいるっぽいですよ。
> y さん
それは、紛れ込んでいるのではなくて、
yさんが「li」をキーワードに含めて検索したからです。
マジっすか・・・。なんかgoogleで検索してたどり着いたら
もうすでにその状態だったんですが、
そういう対応になってるとは知りませんでした。
それは失礼しました。
> y さん
確かに、それだと不都合なので、
コードが記述してあるエントリーの場合は
ハイライトさせないように変更してみました。
おくればせながら素敵な対応ありがとうございました。
これからも応援しております。
メモ:ブラウザ間の差異を無くすリストのスタイルシート
各ブラウザによるリストのレンダリングの差を埋めるスタイルシートが紹介されているのを発見しちゃいました。 一応メモしておきます。 参照記事:http://coliss.com/articles/build-websites/operati…