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

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

How to Create Beautiful and Elegant HTML Lists Using 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ファイルもダウンロードできます。

sponsors

top of page

©2018 coliss