コピペでできる！CSSとhtmlだけのレスポンシブ対応ページナビゲーションデザイン4選

CSS HTML
 2018.02.14
 2018.03.17

必ずといって作るのに案外デザインをストックしていないページナビゲーション。
レスポンシブ対応のページナビゲーションデザインを4つご紹介。
カスタマイズも比較的簡単なので、ストックしてみてはいかがでしょう？

browser:  65 11 20 10 

レスポンシブ対応ページナビゲーションデザイン[5種]

角丸が可愛いページナビ

ニャン易度 
<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;
	height: 70px;
	margin-top: 2em;
	padding: 0 25px;
	border-radius: 35px;
	background-color: #eeeeee;
}
.cp_navi .cp_pagenum {
	font-size: 1.2em;
	line-height: 70px;
	display: block;
	float: left;
	padding: 0 25px;
	transition: 400ms ease;
	letter-spacing: 0.1em;
	color: #595959;
}
.cp_navi .cp_pagenum:hover,
.cp_navi .cp_pagenum.current {
	color: #ffffff;
	background-color: #00BCD4;
}
.cp_navi .cp_pagenum.prev:hover,
.cp_navi .cp_pagenum.next:hover {
	color: #00BCD4;
	background-color: transparent;
}
@media only screen and (max-width: 960px) {
	.cp_navi .cp_pagination {
		height: 50px;
		margin-top: 50px;
		padding: 0 10px;
		border-radius: 25px;
	}
	.cp_navi .cp_pagenum {
	font-size: 0.8em;
	line-height: 50px;
	padding: 0 15px;
	}
	.cp_navi .cp_pagenum.prev,
	.cp_navi .cp_pagenum.next {
		padding: 0 10px;
	}
}
@media only screen and (min-width: 120px) and (max-width: 767px) {
	.cp_navi .cp_pagenum {
	display: none;
	padding: 0 14px;
	}
	.cp_navi .cp_pagenum:nth-of-type(2) {
	position: relative;
	padding-right: 50px;
	}
	.cp_navi .cp_pagenum:nth-of-type(2)::after {
	font-size: 1.2em;
	position: absolute;
	top: 0;
	left: 45px;
	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-right: 14px;
	}
	.cp_navi .cp_pagenum:nth-last-child(-n+4)::after {
		content: none;
	}
	.cp_navi .cp_pagenum.prev,
	.cp_navi .cp_pagenum.next {
		padding: 0 5px;
	}
}

シンプルなページナビ

ニャン易度 
<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;
	background-color: #8BC34A;
}
.cp_navi .cp_pagenum {
	font-size: 1em;
	line-height: 2.5em;
	display: block;
	float: left;
	padding: 0 25px;
	transition: 400ms ease;
	letter-spacing: 0.1em;
	color: #ffffff;
}
.cp_navi .cp_pagenum:hover,
.cp_navi .cp_pagenum.current {
	font-weight: bold;
	color: #ffffff;
	background-color: #C5E1A5;
}
.cp_navi .cp_pagenum.prev:hover,
.cp_navi .cp_pagenum.next:hover {
	color: #C5E1A5;
	background-color: transparent;
}
@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: 2.5em;
	padding: 0 15px;
	}
	.cp_navi .cp_pagenum.prev,
	.cp_navi .cp_pagenum.next {
		padding: 0 10px;
	}
}
@media only screen and (min-width: 120px) and (max-width: 767px) {
	.cp_navi .cp_pagenum {
	display: none;
	padding: 0 14px;
	}
	.cp_navi .cp_pagenum:nth-of-type(2) {
	position: relative;
	padding-right: 50px;
	}
	.cp_navi .cp_pagenum:nth-of-type(2)::after {
	font-size: 1.2em;
	position: absolute;
	top: 0;
	left: 45px;
	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-right: 14px;
	}
	.cp_navi .cp_pagenum:nth-last-child(-n+4)::after {
		content: none;
	}
	.cp_navi .cp_pagenum.prev,
	.cp_navi .cp_pagenum.next {
		padding: 0 5px;
	}
}

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

ニャン易度 
<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: 50%;
	width: 50px;
	height: 50px;
	margin: auto .5em;
}
.cp_navi .cp_pagenum:hover,
.cp_navi .cp_pagenum.current {
	font-weight: bold;
	color: #ffffff;
	background-color: #EC407A;
	border-radius: 50%;
}
.cp_navi .cp_pagenum.prev:hover,
.cp_navi .cp_pagenum.next:hover {
	color: #EC407A;
	background-color: transparent;
	border-radius: 50%;
}
@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;
	border-radius: 0.3em;
}
	.cp_navi .cp_pagenum.prev,
	.cp_navi .cp_pagenum.next {
		padding: 0 25px 0 0;
	}
	.cp_navi .cp_pagenum:hover,
	.cp_navi .cp_pagenum.current {
		border-radius: 0.3em;
	}
	.cp_navi .cp_pagenum.prev:hover,
	.cp_navi .cp_pagenum.next:hover {
		border-radius: 0.3em;
	}
}
@media only screen and (min-width: 120px) and (max-width: 767px) {
	.cp_navi .cp_pagenum {
	display: none;
	border-radius: 0.3em;
	}
	.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;
	}
	.cp_navi .cp_pagenum:hover,
	.cp_navi .cp_pagenum.current {
		border-radius: 0.3em;
	}
	.cp_navi .cp_pagenum.prev:hover,
	.cp_navi .cp_pagenum.next:hover {
		border-radius: 0.3em;
	}
}

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

ニャン易度 
<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

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