somemo's diary

プログラマ、雑記、プログラミング関係はLinkから、数式はこっちでまとめていることが多い

【CSS】ページングナビゲーション

ページャのページングナビゲーション部分のhtml/cssについてのメモです。

ページングナビゲーション部分には、下記のようなページへ遷移できるリンクが必要です。

  • 特定ページ
  • 前のページ
  • 先頭ページ
  • 次のページ
  • 最終ページ

これらのリンクをリストで実現できるようなので、試してみました。

CSS

.pager li {
	display: inline;
}

.pager li span {
	display: inline-block;
	padding: 4px 6px;
	border:  1px #CCCCCC solid;
}

.pager li span.now {
	display:          inline-block;
	padding:          4px 6px;
	border:           1px #CCCCCC solid;
	background-color: #EEEEEE;
	font-weight:      bold;
}

.pager li a {
	display: inline-block;
	padding: 4px 6px;
	border:  1px #CCCCCC solid;
}

.pager li a:hover {
	background-color: #0000FF;
	color:            #FFFFFF;
}

html

ソース

<div class="pager">
  <ul>
    <li><span><< 先頭へ</span></li>
    <li><span>< 前へ</span></li>
    <li><span class="now">1</span></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">次へ ></a></li>
    <li><a href="#">最終へ >></a></li>
  </ul>
</div>

実装

ポイント

  1. リスト(li)に対してdisplay: inline;を適用することで、インラインにして横並びを実現している
  2. リンクにマウスを乗せたときにわかりやすくしている
  3. リンクやspanに対して枠線やpaddingを適用して見やすくしている
  4. paddingの上下を適用するために、display: inline-block;を適用している

特に重要なのポイントは、4のpaddingの上下を適用するためです。

インライン要素に対してpaddingの左右は適用されるが、上下は「見た目上」適用されないという使用があるようです。ただし、IEでは適用されます。見た目上とは?

backgroundで目立つ色にして試すと分かります。上下に広がっていないはずの部分の色が変化します。(リンクのホバーで試すといいです)

おまけ。ほかのちょっとしたポイントは、font-weight: bold;です。

太字について調べていて分かったことは、

  • strongタグはSEO的に重要であることを示し、ついでに見た目を変化させる
  • bタグや、スタイルでの変化は見た目を変化させるだけである
  • strongタグを適用しつつ、見た目を抑えることもできる
  • ただし、やりすぎると検索エンジンに怒られる?