[パーツ]ページナビゲーション アクティブとホバーで角丸背景が出るページナビ

CSS HTML
 2018.02.14
 2018.03.22

アクティブとホバーで角丸背景が出るページナビ

アクティブとホバーで角丸背景が出るレスポンシブ対応のページナビデザインです。

browser:  65 11 20 10 
ニャン易度 
<nav class="cp_navi">
	<div class="cp_pagination">
		<a class="cp_pagenum prev" href="#">prev</a>
		<span aria-current="page" class="cp_pagenum current">1</span>
		<a class="cp_pagenum" href="#">2</a>
		<a class="cp_pagenum" href="#">3</a>
		<a class="cp_pagenum" href="#">4</a>
		<a class="cp_pagenum" href="#">5</a>
		<a class="cp_pagenum" href="#">6</a>
		<a class="cp_pagenum" href="#">7</a>
		<a class="cp_pagenum" href="#">8</a>
		<a class="cp_pagenum" href="#">9</a>
		<a class="cp_pagenum" href="#">10</a>
		<a class="cp_pagenum next" href="#">next</a>
	</div>
</nav>
nav.cp_navi *, nav.cp_navi *:after, nav.cp_navi *:before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
nav.cp_navi a {
	text-decoration: none;
}
nav.cp_navi {
	margin: 2em 0;
	text-align: center;
}
.cp_navi .cp_pagination {
	display: inline-block;
	margin-top: 2em;
	padding: 0 0.5em;
}
.cp_navi .cp_pagenum {
	font-size: 1em;
	line-height: 50px;
	display: block;
	float: left;
	transition: 400ms ease;
	letter-spacing: 0.1em;
	color: #37474F;
	border-radius: 0.3em;
	width: 50px;
	height: 50px;
	margin: auto .5em;
	border: 2px solid transparent;
}
.cp_navi .cp_pagenum:hover,
.cp_navi .cp_pagenum.current {
	color: #37474F;
	border: 2px solid #3F51B5;
	border-radius: 0.3em;
}
.cp_navi .cp_pagenum.prev,
.cp_navi .cp_pagenum.next {
	color: #ffffff;
	background-color: #3F51B5;
	border-radius: 0.3em;
	line-height: 45px;
}
.cp_navi .cp_pagenum.prev:hover,
.cp_navi .cp_pagenum.next:hover {
	color: #3F51B5;
	border: 2px solid transparent;
	background-color: #9FA8DA;
}
@media only screen and (max-width: 960px) {
	.cp_navi .cp_pagination {
		margin-top: 50px;
		padding: 0 10px;
	}
	.cp_navi .cp_pagenum {
	font-size: 0.8em;
	line-height: 25px;
	width: 45px;
	height: 25px;
	margin: auto .1em;
	}
	.cp_navi .cp_pagenum.prev,
	.cp_navi .cp_pagenum.next {
		padding: 0 25px 0 5px;
		line-height: 1.5em;
	}
}
@media only screen and (min-width: 120px) and (max-width: 767px) {
	.cp_navi .cp_pagenum {
	display: none;
	}
	.cp_navi .cp_pagenum:nth-of-type(2) {
	position: relative;
	padding-right: 20px;
	}
	.cp_navi .cp_pagenum:nth-of-type(2)::after {
	font-size: 1.2em;
	position: absolute;
	top: 0;
	left: 25px;
	content: '...';
	}
	.cp_navi .cp_pagenum:nth-child(-n+3),
	.cp_navi .cp_pagenum:nth-last-child(-n+3) {
		display: block;
	}
	.cp_navi .cp_pagenum:nth-last-child(-n+4) {
		padding: 0 5px;
	}
	.cp_navi .cp_pagenum:nth-last-child(-n+4)::after {
		content: none;
	}
}

copypet.jp

CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか?