商用利用OK、加工OK、許可不要、ALL無料のホームページ素材集

WEBデザイナーが作った超シンプル素材集

TIPS MENU

MATERIAL MENU

がんばろうニッポン

CSSサンプル

ここでは、ちょっと役立つCSSをメモ程度に置いていきます。
ご自由にお使いいただけますが、設置後の動作を保障するものではありませんのでご注意ください。

見やすく使いやすいページング

いろんなサイトでページング機能を使ってますよね。
よく見かけるのが、「1 2 3 ・・・」と数字だけ並んでいるもの。機能的には役割を果たしてはいますが、フォントが小っちゃいとクリックするのが大変。
そこで、こんなページング表示はいかがでしょうか。ほら、ちょっと見やすい。

::::: CSS表記 :::::

#paging {
margin:10px;padding:0px;
}
#paging a {
text-align:center;margin:0px 2px;padding:3px 4px 2px 4px;
text-decoration:none;font-weight:bold;color:#555555;
border:1px solid #CCCCCC;background:#FFFFFF;
}
#paging a:hover {background:#FFCC99;}
#paging a:visited {background:#FFFFFF;}
#paging a:active {background:#CCFFCC;}

※ #paging a:visited {background:#FFFFFF;} を指定すると、IE7では正常に動作しないことがわかりました(泣)。ですので、書かなくてOKです。

::::: HTML表記 :::::

<div id="paging">
<strong>Paging</strong>:
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</div>

::::: 動作確認 :::::
Paging12345
更新日:2011.01.22 Category:CSSサンプル
HOMEへ このページのTOPへ