[CSS]実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティス
Post on:2009年5月20日
実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティスをDev Snippetsから紹介します。
Styling your Lists: 20+ Brilliant How to's and Best Practices

Style Your Ordered List
ol要素の数字とテキストに異なるフォントを適用。

Elastic Calendar Styling with CSS
ol要素でカレンダーを実装。

A Three Column CSS Layout Using Just an Unordered List
ul要素で3カラムのレイアウトを実装。

Simulating a Table Using an Unordered List
ul要素でテーブルを実装。

How to Create a Block Hover Effect for a List of Links
リンクのホットスポットを大きく。

The Amazing LI
ul要素のさまざまな実装例。

Centering List Items Horizontally
水平方向の真ん中にリストを配置。

Turning a list into a navigation bar
ul要素で実装するナビゲーション。

FORM elements design using CSS and list
フォームをリストで配置。

5 Ways to Set Your Unordered Lists Apart
ul要素のさまざまな実装例。

Taming Lists
ul要素のコントロール方法。

Nested lists
ul要素をネスト、サイトマップ用などに。

Grid Calendar 2009
グリッドを使ったカレンダー。
Best Practices
以下は、サイトで使用されている例の紹介です。






sponsors