[CSS]実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティス

実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティスを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

以下は、サイトで使用されている例の紹介です。

デモのキャプチャ

Mixx

デモのキャプチャ

The Cosmic Machine

デモのキャプチャ

Viget Inspire

デモのキャプチャ

Product Planner

デモのキャプチャ

OnWired

デモのキャプチャ

Web Designer Wall

sponsors

top of page

©2018 coliss