CSSでページャー(ページネーション)をコーディングする例

CSSでページャー(ページネーション)をデザインしていきながら、それぞれのCSSを解説しています。
今回のポイントは、positionfloatを使ったセンタリングです。

はじめに

この記事はHTML・CSSの基本的な仕組みを知っている(基礎学習を終えている)、以下のような方々のために書かれたものです。

  • もう少し難しい内容にチャレンジしたい
  • もう一度HTML・CSSに挑戦したい
  • より実践的な例で学習したい
  • より実践的な例で学習させたい

一般的な入門レベルと比べ、より実践的な内容になっていますので、説明や解説が足りないと感じるかもしれません。知らない単語や用語、知らないプロパティが出てきたら、順番に調べながら学習を進めてください。

このページではHTML5 Reset StylesheetのリセットCSSが有効になっています。 そのため、リセットCSSを使用していないページや、別のリセットCSS・ノーマライズCSSを使用しているページで実践した場合に、同じ見た目にならない可能性があります。

HTMLマークアップ

今回の例では、下記のようにマークアップしたHTMLパーツを元に、CSSでデザインしていきます。このHTMLマークアップは最後まで一度も変更しません。

このHTMLマークアップについて

よくありそうなページネーションのマークアップです。各ページ番号の数字リンク、現在のページを表す数字、PrevやNextといったリンクがあり、ページ数が多い時の省略表示などを一通りそろえたものです。

CSSでデザインしたページネーション(完成時)

今回のコーディング例の通りにコーディングすると、完成時にはこのような見た目になります。
各リンクが中央寄せになっている、シンプルなページネーションです。

ページネーションをデザインする手順

0. スタイル指定が何もない状態

スタイル指定が何もない状態では、このような見た目になります。

.pager {
}

1. 全体を囲んでいるブロックに枠線を付ける

スタイルを指定していくと見た目がどのように変化するかを分かりやすくするため、仮の枠線を付けます。この枠線は作業用に付けるもので、最後には消してしまいます。

.pager {
	border: 1px solid #999;
}

2. リストマークを消す

リストマーク(左にある黒い点)は消してしまいましょう。

.pager {
	border: 1px solid #999;
}

.pager ul {
	list-style: none;
}

3. ul要素の配置方法を相対位置にする

今回の例では、positionfloatでページネーションをセンタリングしています。
ここからは、センタリングするためのコードが続きます。

まずは、ul要素の配置方法を相対位置にします。
ついでに、ul要素の変化がわかりやすくなるよう、仮の背景色を付けておくことにします。

.pager {
	border: 1px solid #999;
}

.pager ul {
	background: #EEE;
	list-style: none;
	position: relative;
}

4. ul要素を相対位置の指定で左から50%の位置に配置する

left: 50%;と指定すると、ul要素は左から50%の位置に配置され、このような見た目になります。

.pager {
	border: 1px solid #999;
}

.pager ul {
	background: #EEE;
	list-style: none;
	position: relative;
	left: 50%;
}

5. ul要素の幅が内容に合わせて縮むようにする

ul要素には幅を指定していないのでfloat: left;を指定すれば、ul要素の幅が内容にあわせて縮むようになります。

以下のプレビューで、ul要素の幅が縮んでいる(背景色がついている部分が小さくなっている)ことが確認できます。

.pager {
	border: 1px solid #999;
}

.pager ul {
	background: #EEE;
	list-style: none;
	position: relative;
	left: 50%;
	float: left;
}

6. floatによる問題を解消する

子要素がfloatされた状態になると親要素の高さが無くなってしまうという問題がでてきます。
今回は、overflow: hidden;でこの問題を解消しておきましょう。

以下のプレビューで、枠線が元通りの表示になったことが確認できます。

.pager {
	border: 1px solid #999;
	overflow: hidden;
}

.pager ul {
	background: #EEE;
	list-style: none;
	position: relative;
	left: 50%;
	float: left;
}

7. li要素の配置方法も相対位置にする

灰色の背景部分(ul要素)の左辺は、左から50%位置にあります。そのため、各テキスト(li要素)が左辺より右に位置しているので、まだセンタリングできているとは言えません。

次に、ul要素を配置した時と同じように、li要素の配置方法も相対位置にします。
この手順では見た目は変化しません。

.pager {
	border: 1px solid #999;
	overflow: hidden;
}

.pager ul {
	background: #EEE;
	list-style: none;
	position: relative;
	left: 50%;
	float: left;
}

.pager ul li {
	position: relative;
}

8. li要素を相対位置の指定で左から-50%の位置に配置する

left: -50%;と指定すると、li要素は左からマイナス50%の位置に配置され、このような見た目になります。

これで、positionfloatでセンタリングするコードの部分は終わりです。

.pager {
	border: 1px solid #999;
	overflow: hidden;
}

.pager ul {
	background: #EEE;
	list-style: none;
	position: relative;
	left: 50%;
	float: left;
}

.pager ul li {
	position: relative;
	left: -50%;
}

補足

ul要素の幅が内容に合わせて縮む条件を満たしていないと、例のようにセンタリングされません。例えば、ul要素のスタイルにwidth: 100%;が指定されていると、以下のようになってしまいます。

幅が内容に合わせて縮む条件は、『幅を明示せずに非置換要素をフロートした場合』です。
これについては、非置換要素の幅を明示せずにフロート · terkel.jpを参照ください。

9. li要素をfloatして横並びにする

li要素はブロックレベル要素なので、最初は縦に並んでいます。
li要素にfloat: left;を指定すると、後に続く要素が右側に回り込むようになり、横並びになります。

.pager {
	border: 1px solid #999;
	overflow: hidden;
}

.pager ul {
	background: #EEE;
	list-style: none;
	position: relative;
	left: 50%;
	float: left;
}

.pager ul li {
	position: relative;
	left: -50%;
	float: left;
}

10. a要素をブロックレベル要素にする

a要素をブロックレベル要素にします。

a要素はインライン要素ですが、インライン要素のままでは上下のpaddingが効かない他、widthheightも指定できないためブロックレベル要素にします。

.pager {
	border: 1px solid #999;
	overflow: hidden;
}

.pager ul {
	background: #EEE;
	list-style: none;
	position: relative;
	left: 50%;
	float: left;
}

.pager ul li {
	position: relative;
	left: -50%;
	float: left;
}

.pager ul li a {
	display: block;
}

11. a要素のテキストのサイズを大きくする

少しテキストを大きくしてみました。好みのサイズに調整しましょう。

.pager {
	border: 1px solid #999;
	overflow: hidden;
}

.pager ul {
	background: #EEE;
	list-style: none;
	position: relative;
	left: 50%;
	float: left;
}

.pager ul li {
	position: relative;
	left: -50%;
	float: left;
}

.pager ul li a {
	display: block;
	font-size: 16px;
}

12. a要素にpaddingを設定しクリックしやすい大きさのボタンにする

a要素に対してpaddingを設定し、テキストの上下左右の部分もクリックできるようにします。

li要素に対してpaddingを設定しても、クリックできる領域は広がりません。
そのため、li要素ではなくa要素に対してpaddingを設定する方が、より良いコーディングと言えるでしょう。

.pager {
	border: 1px solid #999;
	overflow: hidden;
}

.pager ul {
	background: #EEE;
	list-style: none;
	position: relative;
	left: 50%;
	float: left;
}

.pager ul li {
	position: relative;
	left: -50%;
	float: left;
}

.pager ul li a {
	display: block;
	font-size: 16px;
	padding: 0.6em 1em;
}

13. a要素に適用したスタイルをspan要素にも適用する

a要素に適用したスタイルがspan要素にも適用されるよう、セレクタを追加します。

.pager {
	border: 1px solid #999;
	overflow: hidden;
}

.pager ul {
	background: #EEE;
	list-style: none;
	position: relative;
	left: 50%;
	float: left;
}

.pager ul li {
	position: relative;
	left: -50%;
	float: left;
}

.pager ul li span,
.pager ul li a {
	display: block;
	font-size: 16px;
	padding: 0.6em 1em;
}

14. a要素だけ背景色を変更する

a要素だけ背景色を変更するため、ルールセットを分けて記述します。

ついでに、ul要素の仮の背景色をコメントアウトして消しておきます。

.pager {
	border: 1px solid #999;
	overflow: hidden;
}

.pager ul {
/*	background: #EEE;*/
	list-style: none;
	position: relative;
	left: 50%;
	float: left;
}

.pager ul li {
	position: relative;
	left: -50%;
	float: left;
}

.pager ul li span,
.pager ul li a {
	display: block;
	font-size: 16px;
	padding: 0.6em 1em;
}

.pager ul li a {
	background: #EEE;
}

15. a要素とspan要素の角を少しだけ丸める

border-radiusで角を少しだけ丸めます。目を凝らしてやっとわかる程度ですが、少しおしゃれになります。

.pager {
	border: 1px solid #999;
	overflow: hidden;
}

.pager ul {
/*	background: #EEE;*/
	list-style: none;
	position: relative;
	left: 50%;
	float: left;
}

.pager ul li {
	position: relative;
	left: -50%;
	float: left;
}

.pager ul li span,
.pager ul li a {
	display: block;
	font-size: 16px;
	padding: 0.6em 1em;
	border-radius: 3px;
}

.pager ul li a {
	background: #EEE;
}

16. li要素に左右のmarginを設定し、間隔を空ける

左右に1pxのmarginを設定し、間隔を空けます。

.pager {
	border: 1px solid #999;
	overflow: hidden;
}

.pager ul {
/*	background: #EEE;*/
	list-style: none;
	position: relative;
	left: 50%;
	float: left;
}

.pager ul li {
	margin: 0 1px;
	position: relative;
	left: -50%;
	float: left;
}

.pager ul li span,
.pager ul li a {
	display: block;
	font-size: 16px;
	padding: 0.6em 1em;
	border-radius: 3px;
}

.pager ul li a {
	background: #EEE;
}

17. a要素のテキストの色を変える

好みの色に変えましょう。

.pager {
	border: 1px solid #999;
	overflow: hidden;
}

.pager ul {
/*	background: #EEE;*/
	list-style: none;
	position: relative;
	left: 50%;
	float: left;
}

.pager ul li {
	margin: 0 1px;
	position: relative;
	left: -50%;
	float: left;
}

.pager ul li span,
.pager ul li a {
	display: block;
	font-size: 16px;
	padding: 0.6em 1em;
	border-radius: 3px;
}

.pager ul li a {
	background: #EEE;
	color: #000;
}

18. a要素の下線を消す

リンクテキストの下線を消します。

.pager {
	border: 1px solid #999;
	overflow: hidden;
}

.pager ul {
/*	background: #EEE;*/
	list-style: none;
	position: relative;
	left: 50%;
	float: left;
}

.pager ul li {
	margin: 0 1px;
	position: relative;
	left: -50%;
	float: left;
}

.pager ul li span,
.pager ul li a {
	display: block;
	font-size: 16px;
	padding: 0.6em 1em;
	border-radius: 3px;
}

.pager ul li a {
	background: #EEE;
	color: #000;
	text-decoration: none;
}

19. a要素にカーソルが乗った際の背景色を濃くする

多くの場合、ボタンにマウスカーソルが乗ると何らかの変化がおきます。
リンクテキストの下線が消える・下線が付く、リンクテキストの色が変わる、ボタンの色が変わるなど、様々です。

今回は、ボタンの色(背景色)を変えましたので、マウスカーソルを乗せて確認してみましょう。

.pager {
	border: 1px solid #999;
	overflow: hidden;
}

.pager ul {
/*	background: #EEE;*/
	list-style: none;
	position: relative;
	left: 50%;
	float: left;
}

.pager ul li {
	margin: 0 1px;
	position: relative;
	left: -50%;
	float: left;
}

.pager ul li span,
.pager ul li a {
	display: block;
	font-size: 16px;
	padding: 0.6em 1em;
	border-radius: 3px;
}

.pager ul li a {
	background: #EEE;
	color: #000;
	text-decoration: none;
}

.pager ul li a:hover {
	background: #333;
}

20. a要素にカーソルが乗った際のテキストの色を白にする

背景色にあわせて、テキストの色を変更します。

.pager {
	border: 1px solid #999;
	overflow: hidden;
}

.pager ul {
/*	background: #EEE;*/
	list-style: none;
	position: relative;
	left: 50%;
	float: left;
}

.pager ul li {
	margin: 0 1px;
	position: relative;
	left: -50%;
	float: left;
}

.pager ul li span,
.pager ul li a {
	display: block;
	font-size: 16px;
	padding: 0.6em 1em;
	border-radius: 3px;
}

.pager ul li a {
	background: #EEE;
	color: #000;
	text-decoration: none;
}

.pager ul li a:hover {
	background: #333;
	color: #FFF;
}

21. 仮の枠線やコメントアウト部分を消して完成

.pagerに設定していたborder: 1px solid #999;と、
.pager ulでコメントアウトしておいた/* background: #EEE; */を削除すれば完成です。

.pager {
	overflow: hidden;
}

.pager ul {
	list-style: none;
	position: relative;
	left: 50%;
	float: left;
}

.pager ul li {
	margin: 0 1px;
	position: relative;
	left: -50%;
	float: left;
}

.pager ul li span,
.pager ul li a {
	display: block;
	font-size: 16px;
	padding: 0.6em 1em;
	border-radius: 3px;
}

.pager ul li a {
	background: #EEE;
	color: #000;
	text-decoration: none;
}

.pager ul li a:hover {
	background: #333;
	color: #FFF;
}

最後に

今回の例はいかがでしたか?

このページにある手順や記述が100パーセント正しいというわけではありません。大切なのは、それぞれのCSSプロパティの意味を理解して使用することです。

あなたが正しいコーディングを求めてこのページに辿り着いたのなら、このページを読んだ後で、あなたのソースコードを見直してみましょう。このページと同じように、全ての行を説明できますか?

もし、あなたが書いたコードなのに、説明できない行があるようなら、その行のプロパティを再学習してみることをオススメします。

また、別の方法や、より適したコーディングもたくさんあるでしょう。このページを1つの例として、誰かとディスカッションしてみるのも、ステップアップに繋がると思います。

参考

非置換要素の幅を明示せずにフロート · terkel.jp