[CSS]リスト要素を使用したスタイルシートの5つのトリック

ul, ol, dl要素を使用したスタイルシートの5つのトリックをPieter Beulqueから紹介します。

5 CSS tricks with lists

5 CSS tricks with lists

1. 数字だけ異なるスタイルに

ol要素を使用して、数字だけ異なったフォントのスタイルを実装します。

デモのキャプチャ

demo

HTML

CSS

2. 背景が変わるナビゲーション

ul要素を使用して、ホバー時に背景が変わるナビゲーションを実装します。
要画像:sprite.jpg

デモのキャプチャ

demo

HTML

CSS

3. 最後の項目がフェード

ネガティブマージンを使用して、最後の項目がフェードするように実装します。
要画像:fade-list.jpg, fade-last.png
参考:ネガティブマージンの理解を深め、活用するテクニック集

デモのキャプチャ

demo

HTML

CSS

4. プライスリスト

dl要素を使用して、プライスリストを実装します。

デモのキャプチャ

demo

HTML

CSS

5. 一つのリスト要素で複数のカラム

ネガティブマージンを使用して、一つのリスト要素で複数のカラムを実装します。
参考:ネガティブマージンの理解を深め、活用するテクニック集

デモのキャプチャ

demo

HTML

CSS

sponsors

top of page

©2018 coliss