DEVELOPERS BLOGデベロッパーズブログ

  1. HOME > 
  2. 伊藤 晋之のデベロッパーズブログ > 
  3. html+cssのみで、ページャーを構築しセンタリング配置する

伊藤 晋之のデベロッパーズブログ

伊藤 晋之

2013/02/14

html+cssのみで、ページャーを構築しセンタリング配置する

 

見栄えのいいページャーをhtml+cssのみで実装出来ないかと色々と探っておりまして バシャログさん のサイトが物凄い解りやすかったので参照させていただきました。
ただ、これだとセンタリング配置が出来ないのでさらに コチラのサイト を参照させていただきました。

使い回しが出来るよう調整して、メモ的に置いておきます。(IE7・IE8・FF・Chrome・Safari 確認済み)


/*-
*追加ページャー
*/
#pagerCont {
	position: relative;
	overflow: hidden;
	margin: 10px
}

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

ul.pager li {
	position: relative;
	left: -50%;
	float: left;
	margin-right: 5px;
	border: 1px solid #D0102C;
	font-weight: bold
}

ul.pager li.prev,
ul.pager li.next { border: none }

ul.pager li a {
	position: relative;
	display: block;
	padding: 3px 8px;
	color: #D0102C
}

ul.pager li a:link,
ul.pager li a:visited { text-decoration: none }

ul.pager li a:hover,
ul.pager li a:active {
	background-color: #F9A8B4;
	text-decoration: none
}

ul.pager li em {
	display: block;
	padding: 3px 8px;
	background: #D0102C;
	color: #FFFFFF
}

関連エントリー