ページネーション 丸

ページネーション 丸


<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 class="Pagination-Item">
			<a class="Pagination-Item-Link" href="/page1/">
				<span class="material-symbols-outlined">keyboard_double_arrow_left</span>
			</a>
		</li>
		<li class="Pagination-Item">
			<a class="Pagination-Item-Link" href="/page1/"><span>1</span></a>
		</li>
		<li class="Pagination-Item">
			<a class="Pagination-Item-Link isActive" href="/page2/"><span>2</span></a>
		</li>
		<li class="Pagination-Item">
			<a class="Pagination-Item-Link" href="/page3/"><span>3</span></a>
		</li>
		<li class="Pagination-Item">
			<a class="Pagination-Item-Link" href="/page4/"><span>4</span></a>
		</li>
		<li class="Pagination-Item">
			<a class="Pagination-Item-Link" href="/page5/"><span>5</span></a>
		</li>
		<li class="Pagination-Item">
			<a class="Pagination-Item-Link" href="/page5/">
				<span class="material-symbols-outlined">keyboard_double_arrow_right</span>
			</a>
		</li>
	</ul>
</nav>


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

.Pagination {
	display: flex;
	border: solid 1px #999;
	border-radius: 9999px;
	overflow: hidden;
	}
.Pagination > * + * {
  border-left: solid 1px #999;
}
.Pagination-Item-Link {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 45px;
  height: 45px;
  background: #fff;
  font-size: 16px;
  color: #111;
  font-weight: bold;
  transition: all 0.15s linear;
	}
.Pagination-Item-Link-Icon {
  width: 20px;
	}
.Pagination-Item-Link.isActive {
  background: #111;
  color: #fff;
  pointer-events: none;
	}
.Pagination-Item-Link:not(.isActive):hover {
  background: #111;
  color: #fff;
	}
.material-symbols-outlined {
  font-variation-settings:
  'wght' 200,
	}
a:hover {
	text-decoration: none;
	}

TOP