ページ送りのサンプル

ページ送りのサンプル 01

display: inline;の宣言が有ったりしてセンタリングしたサンプル。
コードの改行によって生じるすき間対策が必要。

« 前
1
2
3
4
5
6
3
4
5
6
3
4
5
6
3
4
5
6
次 »

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;
}

ページ送りのサンプル 01´

複数行対策しなければCSSは気持ちシンプルに。

HTMLは01のclass属性値が違うだけなので省略

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;
}

ページ送りのサンプル 02

01 のデザイン違い

« 前
1
2
3
4
5
6
3
4
5
6
3
4
5
6
3
4
5
6
次 »

HTMLは01のclass属性値が違うだけなので省略

CSS +

#main ul.pageNav02 {
	margin: 0 0 10px;
	padding: 10px 10px 5px;
	background: #fff;
	border: 1px solid #ccc;
	text-align: center;
}

#main ul.pageNav02 li {
	display: inline;
	margin: 0 2px;
	padding: 0;
}

#main ul.pageNav02 li span,
#main ul.pageNav02 li a {
	display: inline-block;
	margin-bottom: 5px;
	padding: 5px 13px;
	background: #eeeff7;
	text-decoration: none;
	vertical-align: middle;
}

#main ul.pageNav02 li a:hover {
	color: #000;
	background: #ccf;
	border-color: #00f;
}

ページ送りのサンプル 03

floatプロパティを使ってせこせこ。floatでセンタリングする方法が有った気がしたけど~~忘れｒｙ~~ あ、あった。↓
hail2u.net - Weblog - floatで並べたリストのセンタリング

« 前
1
2
3
4
5
6
次 »

« 前
1
2
3
4
5
6
3
4
5
6
3
4
5
6
3
4
5
6
次 »

HTML +

<ul class="pageNav03">
<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.pageNav03 {
	/zoom: 1;
	overflow: hidden;
	margin: 0 0 10px;
	padding: 10px;
	background: #eee;
}

#main ul.pageNav03 li {
	float: left;
	margin: 0 1px 1px 0;
}

#main ul.pageNav03 li span,
#main ul.pageNav03 li a {
	float: left;
	padding: 5px 10px;
	background: #fff;
}

#main ul.pageNav03 li a:hover {
	background: #ffc;
}

ページ送りのサンプル 04

floatプロパティを使ってせこせこ。をデザイン変えてみただけ。

« 前
1
2
3
4
5
6
次 »

« 前
1
2
3
4
5
6
3
4
5
6
3
4
5
6
3
4
5
6
次 »

HTMLは03のclass属性値が違うだけなので省略

CSS +

#main ul.pageNav04 {
	/zoom: 1;
	overflow: hidden;
	margin: 0 0 20px;
	padding: 0;
	background: #fff;
}

#main ul.pageNav04 li {
	float: left;
	margin: 0 5px 5px 0;
}

#main ul.pageNav04 li span,
#main ul.pageNav04 li a {
	float: left;
	padding: 5px 12px;
	background: #e1ebfa;
	border: 1px solid #339;
	color: #000;
}

#main ul.pageNav04 li span {
	background: #fff;
}

#main ul.pageNav04 li a:hover {
	background: #ccf;
	border-color: #000;
}

ページ送りのサンプル 04´

floatプロパティを使ってセンタリングしたバージョンも用意してみました。複数行になった場合にちょっと位置が違ってたりしますね。。。むー
あと、div要素を追加しないと厳しい。

« 前
1
2
3
4
5
6
次 »

« 前
1
2
3
4
5
6
3
4
5
6
3
4
5
6
3
4
5
6
次 »

HTML +

<div class="pageNav04c">
<ul>
<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>
</div>

CSS +

#main .pageNav04c {
	/zoom: 1;
	position: relative;
	overflow: hidden;
	margin: 0 0 10px;
	padding: 10px;
	background: #eee;
}


#main .pageNav04c ul {
	position: relative;
	left: 50%;
	float: left;
}

#main .pageNav04c ul li {
	position: relative;
	left: -50%;
	float: left;
	margin: 0;
}

#main .pageNav04c li span,
#main .pageNav04c li a {
	display: inline-block;
	margin: 0 1px 1px 0;
	padding: 1px 8px;
	background: #fff;
	border: 1px solid #aaa;
	text-decoration: none;
	vertical-align: middle;
}

#main .pageNav04c li a:hover {
	background: #eeeff7;
	border-color: #00f;
}

ページ送りのサンプル色々です。

ページ送りのサンプル 01

HTML +

CSS +

ページ送りのサンプル 01´

CSS +

ページ送りのサンプル 02

CSS +

ページ送りのサンプル 03

HTML +

CSS +

ページ送りのサンプル 04

CSS +

ページ送りのサンプル 04´

HTML +

CSS +