ページ送りのサンプル4種+2

10月27日（火）00:33

category: CSSテンプレート, ビジュアル・小技

ページ送りず、随分間が空いてしまった・・・何て言う現実。
気付けば冬間近ですね。

久々の更新が、特別目新しくもなんともないんですが、自分なりのページ送りサンプルを作ってみました。
ホントは最初のだけ有れば事足りてるんですけど、ボリューム感を出す為に4種類+2にしてみました。

地味にサンプル作ってたら時間取られたので、解説は軽めですが続きにて。

---- こっから続き

今回作っておきたかったのは、センタリングさせたページ送りっす。
とても似たようなエントリーが有るので、下記も参考にしてみるといいかと。

各サンプル共通で以下のスタイルが当たってます。

#main ul,
#main ul li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

では、01以外はおまけなので解説は01のみで行っきます。
HTMLソースは以下のような感じです。

<ul class="pageNav01">
<li><a href="1.html">&laquo; 前</a></li
><li><a href="1.html">1</a></li
><li><span>2</span></li
><li><a href="3.html">3</a></li
><li><a href="4.html">4</a></li
><li><a href="5.html">5</a></li
><li><a href="6.html">6</a></li
><li><a href="3.html">次 &raquo;</a></li>
</ul>

リストをインラインにして並べた時に生じる余白対策をしている以外は普通のリストです。
CSSは以下のような感じ。

#main ul.pageNav01 {
	margin: 0 0 10px;
	padding: 10px 10px 5px;
	background: #eee;
	text-align: center;
}
 
#main ul.pageNav01 li {
	display: inline;
	margin: 0 2px;
	padding: 0;
}
 
#main ul.pageNav01 li span,
#main ul.pageNav01 li a {
	display: inline-block;
	margin-bottom: 5px;
	padding: 1px 8px;
	background: #fff;
	border: 1px solid #aaa;
	text-decoration: none;
	vertical-align: middle;
}
 
#main ul.pageNav01 li a:hover {
	background: #eeeff7;
	border-color: #00f;
}

#main とかは適所書き換える感じでお願いします。
ボクのサンプルではFx2対策していないので、必要な場合a要素とspan要素に display: -moz-inline-box; の宣言を入れてもらえると素敵だと思います。

また、装飾用のスタイルが結構当たっていますが、ポイントとなる宣言は、ul要素のtext-align: center;とli要素のdisplay: inline;、a要素とspan要素のdisplay: inline-block;辺りです。
あと、vertical-align: middle;は特定のフォント対策で、何も無いと次とかの部分だけ1pxくらいずれてしまうのを防ぐためです。

ちょっと違った方法として、複数行になるほどページ分割しなかったり、極端に検索結果が多くなる場合は...とかで切ってしまう場合、サンプルの01´みたいにすれば気持ち細かい調整が減るので心なしか楽になります。

01´のCSSは以下の様になってます。

#main ul.pageNav01s {
	margin: 0 0 10px;
	padding: 12px;
	background: #f3f3f3;
	text-align: center;
}
 
#main ul.pageNav01s li {
	display: inline;
	margin: 0 1px;
	padding: 0;
}
 
#main ul.pageNav01s li span,
#main ul.pageNav01s li a {
	display: inline-block;
	padding: 1px 8px;
	background: #fff;
	border: 1px solid #ccc;
	vertical-align: middle;
	text-decoration: none;
}
 
#main ul.pageNav01s li a:hover {
	background: #efefef;
}

ざっとこんな感じです。

最近、ふとCSS関連で困って調べごとすると、ヨモツネットに助けられてる気がする今日この頃。

それにしても、更新率が落ちている言い訳をいつの日か・・・っ

各種SBMに追加