ページネーション 角

ページネーション 角


<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

<nav id="Pnavi" aria-label="Local Navigation">
	<ul class="pagination">
		<li><a href="#"><span aria-hidden="true">&laquo; </span></a></li>
		<li><a href="#"><span class="visuallyhidden">page </span>1</a></li>
		<li><a href="#" aria-current="page"><span class="visuallyhidden">page </span>2</a></li>
		<li><a href="#"><span class="visuallyhidden">page </span>3</a></li>
		<li><a href="#"><span class="visuallyhidden">page </span>4</a></li>
		<li><a href="#"><span aria-hidden="true"> &raquo;</span></a></li>
	</ul>
</nav>


.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: auto;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
	}

nav#Pnavi {
	display: flex;
	justify-content: center;
	border-top: 1px solid #eee;
	margin-top: 1em;
	padding-top: .5em;
	}

.pagination {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	}

.pagination li {
	margin: 0 1px;
	}

.pagination a {
	display: block;
	padding: .5em 1em;
	border: 1px solid #999;
	border-radius: .2em;
	text-decoration: none;
	}

.pagination a[aria-current="page"] {
	background-color: #333;
	color: #fff;
	}

TOP