category
サイト構築 -CSS

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

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

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

Post on:2009年5月20日

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

トラックバック

トラックバック(URL)

コメント

comment:

※承認制のため、即時には反映されません。

ページの先頭へ




© coliss

RSS