DiggとかFlickrのようなページ切り替えメニュー(Pagination)を実現するCSS
March 17, 2008 8:31 AM written by Gen Taguchi

これはメモメモ。検索結果ページなどにつけるページ切り替えメニューのCSSが紹介されていました。DiggやFlickrのようなスタイルが簡単に作れますね。

たとえばFlickrだと・・・。

flicrk-pagination.png

↑ こんな感じのメニューが・・・。

<ul id="pagination-flickr">
<li class="previous-off">«Previous</li>
<li class="active">1</li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
<li><a href="?page=6">6</a></li>
<li><a href="?page=7">7</a></li>
<li class="next"><a href="?page=2">Next »</a></li>
</ul> 

↑ こういうHTMLと。

ul{border:0; margin:0; padding:0;}
#pagination-flickr li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
}
#pagination-flickr a{
border:solid 1px #DDDDDD;
margin-right:2px;
}
#pagination-flickr .previous-off,
#pagination-flickr .next-off {
color:#666666;
display:block;
float:left;
font-weight:bold;
padding:3px 4px;
}
#pagination-flickr .next a,
#pagination-flickr .previous a {
font-weight:bold;
border:solid 1px #FFFFFF;
}
#pagination-flickr .active{
color:#ff0084;
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
#pagination-flickr a:link,
#pagination-flickr a:visited {
color:#0063e3;
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
#pagination-flickr a:hover{
border:solid 1px #666666;
}

↑ こういうCSSで実現できます。

元サイトには他にもDigg風のメニューや、シンプルなメニューもありますね。よろしければどうぞ。

» woork: Perfect pagination style using CSS

この記事のトラックバックURL (トラックバックは承認後に公開されます)

コメント一覧

ちょうどこんなメニューを作りたくて、早速試してみました!
FireFoxではきれいに表示されたのですが、
IE6だと階段?みたいに段差でズレて表示されてしまいます。
何でだろう。。。

by od | 2008年03月19日 10:58

> IE6だと階段

#pagination-flickr li {} に display:inline; を加える?

by たくと | 2008年03月31日 14:59

コメント投稿 (コメントは承認後に公開されます)

名前
メールアドレス (表示されませんのでご安心を)
URL
情報保存?
コメント
あわせて読みたい

クリエイティブ・コモンズ・ライセンス

ユーザビリティ向上支援ビービット
Usability tested by BeBit

タブブラウザ Sleipnir 公式ページ(上級者向け)

Powered by
MovableType 3.33-ja

人気ブログランキング - idea*idea
ワード
www.flickr.com
This is a Flickr badge showing photos in a set called 自炊生活. Make your own badge here.
Firefox meter