例として、拙サイトで評判が良かったと思われる物の上位 5 件を定義リストでマークアップしたもの。
counter に対応しているブラウザで閲覧すると、記事タイトルの頭に番号が生成されているのが分かる。counter をリセットすることで、Gecko 系のブラウザでもちゃんと連番になってくれる。
はてなブックマーク - http://www.lucky-bag.com の人気エントリー上位 5 件
- Lucky bag::blog: CSS デザインギャラリー
- (X)HTML + CSS でレイアウトされているサイトを集めた CSS デザインギャラリー（ショーケース）サイトで自分が知っているものをちょっとまとめてみた。
- Lucky bag::blog: CSS を作成する際のお約束
- ボックスモデルやその他ブラウザのバグ以外で、ブラウザごとの描画結果の差異を少なくするためには、一番最初に全称セレクタを使ってブラウザのデフォルトスタイルを消してしまうのが手っ取り早い。
- Lucky bag::blog: 訪問済みリンクを一工夫する
- ただ色を変えるだけではなく、画像を使ってもうちっと視覚的に分かりやすくするのもありなんじゃないのかなぁって思って、ちょっとサンプルを作ってみた。
- [CSS] CSS で画像ポップアップ
- JavaScript を使わずに、CSS を使ってサムネール画像の拡大画像をマウスオーバーで表示せる方法。
- Lucky bag::blog: CSS だけでフォトギャラリー
- CSS だけでフォトギャラリーを実現してみる。サムネールにマウスオーバーで拡大画像を表示。サムネールクリックで拡大画像を固定。別の場所をクリックすると元に戻る。ってな挙動。
/* これを指定しないと Gecko 系では連番にならない */
dl {
counter-reset: article;
}
/* 記事タイトル部分に連番を振る */
dt::before {
content: counter(article) ". ";
counter-increment: article;
}