コピペでできるページ送り(ページネーション)デザイン一覧[HTML/CSS]

2023年9月26日2023年9月27日

投稿一覧ページネーション

シンプル

<ol class="t8-pager-1">
    <li class="t8-prev-1"><a href="#"><</a></li>
    <li class="t8-now-1"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li class="t8-next-1"><a href="#">></a></li>
</ol>

.t8-pager-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 10px;
    list-style-type: none;
    padding: 0;
}

.t8-pager-1 li{
    padding: 5px 10px;
}

.t8-now-1 {
    font-weight: bold;
}

.t8-pager-1 li:hover {
    background:#808080;
}

円形

<ol class="t8-pager-2">
    <li class="t8-prev-2"><a href="#"><</a></li>
    <li class="t8-now-2"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li class="t8-next-2"><a href="#">></a></li>
</ol>

.t8-pager-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 10px;
    list-style-type: none;
    padding: 0;
}

.t8-pager-2 li{
    border: 2px solid #0d6efd;
    border-radius: 50%;
    padding: 3px 10px;
}

.t8-now-2 {
    background: #0dcaf0;
}

.t8-pager-2 li:hover {
    background:#808080;
}

角丸

<ol class="t8-pager-3">
    <li class="t8-prev-3"><a href="#"><</a></li>
    <li class="t8-now-3"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li class="t8-next-3"><a href="#">></a></li>
</ol>

.t8-pager-3 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 10px;
    list-style-type: none;
    padding: 0;
}

.t8-pager-3 li{
    border: 2px solid #0d6efd;
    border-radius: 10px;
    padding: 3px 10px;
}

.t8-now-3 {
    background: #0dcaf0;
}

.t8-pager-3 li:hover {
    background:#808080;
}

四角

<ol class="t8-pager-4">
    <li class="t8-prev-4"><a href="#"><</a></li>
    <li class="t8-now-4"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li class="t8-next-4"><a href="#">></a></li>
</ol>

.t8-pager-4 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 10px;
    list-style-type: none;
    padding: 0;
}

.t8-pager-4 li{
    border: 2px solid #0d6efd;
    padding: 5px 10px;
}

.t8-now-4 {
    background: #0dcaf0;
}

.t8-pager-4 li:hover {
    background:#808080;
}

平行四辺形

<ol class="t8-pager-4a">
    <li class="t8-prev-4a"><a href="#"><</a></li>
    <li class="t8-now-4a"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li class="t8-next-4a"><a href="#">></a></li>
</ol>

.t8-pager-4a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 10px;
    list-style-type: none;
    padding: 0;
    z-index: 1;
}

.t8-pager-4a li{
    border: 2px solid #0d6efd;
    padding: 5px 15px;
    z-index: 1;
    display: inline-block;
    transform: skewX(-45deg);		
}

.t8-pager-4a li a{
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 0 auto;
    display: inline-block;
    transform: skewX(45deg);
}

.t8-now-4a{
background: #0dcaf0;
}

.t8-pager-4a li:hover {
    background:#808080;
}

連結

<div class="t8-pager-5">
  <ol class="t8-pagenav-5">	
    <li><a href="#"><</a></li>
    <li class="t8-now-5"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">></a></li>	
  </ol>
</div>

.t8-pager-5 {
    display: flex;
    justify-content: center;
}

.t8-pagenav-5 {
    text-align: center;
    display: inline-block;
    padding: 0 25px;
    border: 2px solid #0d6efd;
}

.t8-pagenav-5 li {
    font-size: 1em;
    line-height: 40px;
    display: block;
    float: left;
    padding: 0px 15px;
    color: #595959;
    border-right: 2px solid #0d6efd;
}

.t8-pagenav-5 li:last-child{
    border: none;
}

.t8-pager-5 li:hover {
    background:#808080;
}

.t8-now-5 {
    background: #0dcaf0;
}

連結(角丸)

<div class="t8-pager-6">
  <ol class="t8-pagenav-6">	
    <li><a href="#"><</a></li>
    <li class="t8-now-6"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">></a></li>	
  </ol>
</div>

.t8-pager-6 {
    display: flex;
    justify-content: center;
}

.t8-pagenav-6 {
    text-align: center;
    display: inline-block;
    padding: 0 25px;
    border: 2px solid #0d6efd;
    border-radius: 10px;

}

.t8-pagenav-6 li {
    font-size: 1em;
    line-height: 40px;
    display: block;
    float: left;
    padding: 0px 15px;
    color: #595959;
    border-right: 2px solid #0d6efd;
}

.t8-pagenav-6 li:last-child{
    border: none;
}

.t8-pager-6 li:hover {
    background:#808080;
}

.t8-now-6 {
    background: #0dcaf0;
}

連結(円形)

<div class="t8-pager-7">
  <ol class="t8-pagenav-7">	
    <li><a href="#"><</a></li>
    <li  class="t8-now-7"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">></a></li>	
  </ol>
</div>

.t8-pager-7 {
    display: flex;
    justify-content: center;
}

.t8-pagenav-7 {
    text-align: center;
    display: inline-block;
    padding: 0 25px;
    border: 2px solid #0d6efd;
    border-radius: 35px;

}

.t8-pagenav-7 li {
    font-size: 1em;
    line-height: 40px;
    display: block;
    float: left;
    padding: 0px 15px;
    color: #595959;
    border-right: 2px solid #0d6efd;
}

.t8-pagenav-7 li:last-child{
    border: none;
}

.t8-pager-7 li:hover {
    background:#808080;
}

.t8-now-7 {
    background: #0dcaf0;
}

連結(平行四辺形)

<div class="t8-pager-8">
  <ol class="t8-pagenav-8">	
    <li><a href="#"><</a></li>
    <li class="t8-now-8"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
   <li><a href="#">></a></li>	
  </ol>
</div>

.t8-pager-8 {
    display: flex;
    justify-content: center;	
}

.t8-pagenav-8 {
    text-align: center;
    display: inline-block;
    padding: 0 25px;
    border: 2px solid #0d6efd;
}

.t8-pagenav-8 li {
    font-size: 1em;
    line-height: 40px;
    display: block;
    float: left;
    padding: 0px 15px;
    color: #595959;
    border-right: 2px solid #0d6efd;
    display: inline-block;
    transform: skewX(-45deg);
}

.t8-pagenav-8 li a{
    	display: inline-block;
	transform: skewX(45deg);
}

.t8-pagenav-8 li:last-child{
    border: none;
}

.t8-pager-8 li:hover {
    background:#808080;
}

.t8-now-8 {
    background: #0dcaf0;
}

アンダーライン

<ol class="t8-pager-9">
    <li class="t8-prev-9"><a href="#"><</a></li>
    <li class="t8-now-9"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li class="t8-next-4"><a href="#">></a></li>
</ol>

.t8-pager-9 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 10px;
    list-style-type: none;
    padding: 0;
}

.t8-pager-9 li{
border-bottom: 2px solid #0d6efd;
padding: 5px 10px;
}

.t8-now-9 {
    border-bottom:2px solid #0dcaf0 !important;
}

.t8-pager-9 li:hover {
    background:#808080;
}

アンダーライン(連結)

<div class="t8-pager-10">
  <ol class="t8-pagenav-10">	
    <li><a href="#">prev</a></li>
    <li class="t8-now-10"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">next</a></li>	
  </ol>
</div>

.t8-pager-10 {
    display: flex;
    justify-content: center;
}

.t8-pagenav-10 {
    text-align: center;
    display: inline-block;
    padding: 0 25px;
    border-bottom: 2px solid #0d6efd;    
}

.t8-pagenav-10 li {
    font-size: 1em;
    line-height: 40px;
    display: block;
    float: left;
    padding: 0px 15px;
    color: #595959;  
}

.t8-pagenav-10 li:last-child{
    border: none;
}

.t8-now-10 {
    order-bottom:2px solid #0dcaf0 !important;
}

.t8-pager-10 li:hover {
    background:#808080;
}

.t8-now-10 {
    border-bottom:2px solid #0dcaf0 !important;
}

記事内ページネーション

ページ移動

.t8-pager-11 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0 10px;
    list-style-type: none;
}

.t8-pager-11 li{
    border: 2px solid #0d6efd;
    padding: 5px 15px;
}

.t8-prev-11 {
    float: left;
}

.t8-next-11 {
    float: right;
}

.t8-now-11 {
    background: #0dcaf0;
}

ページ移動(二段)

.t8-pager-12 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;    
    gap: 0 10px;
    list-style-type: none;
}

.t8-pager-12 li{
    padding: 5px 15px;
}

.t8-prev-12 {
    float: left;
    border-bottom: 1px solid #808080;
    padding-bottom: 20px;
}

.t8-prev-12 a {
    margin-bottom: 20px;
}

.t8-next-12 a{
    float: right;
}

.t8-now-12 {
    background: #0dcaf0;
}

サムネイル付き

<ol class="t8-pager-13">
<li class="t8-prev-13"><span> <　</span>
<img src="http://temp8.plat4.net/wp-content/uploads/2023/09/mt-sample-background.jpg" data-cat-id="">
<a href="#">　前の記事　</a>
</li>

<li class="t8-next-13"><span> 次の記事　</span>
<img src="http://temp8.plat4.net/wp-content/uploads/2023/09/mt-sample-background.jpg" data-cat-id="">
<a href="#">　>　</a></li>
</ol>

.t8-pager-13 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0 10px;
    list-style-type: none;
}

.t8-pager-13 li{
    padding: 5px 15px;
}

.t8-prev-13 {
    float: left;
    display: flex;
    align-items: center;
}

.t8-prev-13 img {
    width:30%;
    height:30%;
}

.t8-next-13 {
    float: right;
    display: flex;
    align-items: center;
}

.t8-next-13 img {
    width:30%;
    height:30%;
}

.t8-now-13 {
    background: #0dcaf0;
}

サムネイル付き(二段)

<ol class="t8-pager-14">
<li class="t8-prev-14"><span> <　</span>
<img src="http://temp8.plat4.net/wp-content/uploads/2023/09/mt-sample-background.jpg" data-cat-id="">
<a href="#">　前の記事　</a>
</li>

<li class="t8-next-14"><span> 次の記事　</span>
<img src="http://temp8.plat4.net/wp-content/uploads/2023/09/mt-sample-background.jpg" data-cat-id="">
<a href="#">　>　</a></li>
</ol>

.t8-pager-14 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 0 10px;
    list-style-type: none;
}

.t8-pager-14 li{
    padding: 5px 15px;
}

.t8-prev-14 {
    float: left;
    display: flex;
    align-items: center;
}

.t8-prev-14 img {
    width:30%;
    height:30%;
}

.t8-next-14 {
    float: right;
    display: flex;
    align-items: center;
    justify-content: right;
}

.t8-next-14 img {
    width:30%;
    height:30%;
}

.t8-now-14 {
    background: #0dcaf0;
}

URLをコピーしました！