[CSS]実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティス
Post on:2009年5月20日
実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティスをDev Snippetsから紹介します。
Styling your Lists: 20+ Brilliant How to's and Best Practices
![デモのキャプチャ](/wp-content/uploads-2009/2009052001-01.png)
Style Your Ordered List
ol要素の数字とテキストに異なるフォントを適用。
![デモのキャプチャ](/wp-content/uploads-2009/2009052001-02.png)
Elastic Calendar Styling with CSS
ol要素でカレンダーを実装。
![デモのキャプチャ](/wp-content/uploads-2009/2009052001-03.png)
A Three Column CSS Layout Using Just an Unordered List
ul要素で3カラムのレイアウトを実装。
![デモのキャプチャ](/wp-content/uploads-2009/2009052001-04.png)
Simulating a Table Using an Unordered List
ul要素でテーブルを実装。
![デモのキャプチャ](/wp-content/uploads-2009/2009052001-05.png)
How to Create a Block Hover Effect for a List of Links
リンクのホットスポットを大きく。
![デモのキャプチャ](/wp-content/uploads-2009/2009052001-06.png)
The Amazing LI
ul要素のさまざまな実装例。
![デモのキャプチャ](/wp-content/uploads-2009/2009052001-07.png)
Centering List Items Horizontally
水平方向の真ん中にリストを配置。
![デモのキャプチャ](/wp-content/uploads-2009/2009052001-08.png)
Turning a list into a navigation bar
ul要素で実装するナビゲーション。
![デモのキャプチャ](/wp-content/uploads-2009/2009052001-09.png)
FORM elements design using CSS and list
フォームをリストで配置。
![デモのキャプチャ](/wp-content/uploads-2009/2009052001-10.png)
5 Ways to Set Your Unordered Lists Apart
ul要素のさまざまな実装例。
![デモのキャプチャ](/wp-content/uploads-2009/2009052001-11.png)
Taming Lists
ul要素のコントロール方法。
![デモのキャプチャ](/wp-content/uploads-2009/2009052001-12.png)
Nested lists
ul要素をネスト、サイトマップ用などに。
![デモのキャプチャ](/wp-content/uploads-2009/2009052001-13.png)
Grid Calendar 2009
グリッドを使ったカレンダー。
Best Practices
以下は、サイトで使用されている例の紹介です。
![デモのキャプチャ](/wp-content/uploads-2009/2009052001-14.png)
![デモのキャプチャ](/wp-content/uploads-2009/2009052001-15.png)
![デモのキャプチャ](/wp-content/uploads-2009/2009052001-16.png)
![デモのキャプチャ](/wp-content/uploads-2009/2009052001-17.png)
![デモのキャプチャ](/wp-content/uploads-2009/2009052001-18.png)
![デモのキャプチャ](/wp-content/uploads-2009/2009052001-19.png)
sponsors