CSS を使用したレスポンシブなページネーションを作成する方法を学習します。
ページ数の多い web サイトを持っている場合、各ページにある種のページネーションが欲しいのではないでしょうか：
ページネーションを作るには、HTML のリストをスタイルします：
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li
{display: inline;}
ul.pagination li a {
color:
black;
float: left;
padding: 8px
16px;
text-decoration: none;
}
Try it Yourself ❯
.active クラスで現在のページをハイライト表示し、各ページのリンクの上にマウスを移動したとき、その色を変更するために、
:hover セレクタを使用します：
ul.pagination li a.active {
background-color:
#4CAF50;
color: white;
}
ul.pagination li
a:hover:not(.active) {background-color: #ddd;}
Try it Yourself ❯
"active" および "hover" ボタンの角を丸めたい場合は、border-radius プロパティを追加します:
ul.pagination li a {
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
}
Try it Yourself ❯
ホバー時に、トランジション効果を作成するために、ページリンクに transition プロパティを追加します：
ページネーションにボーダーを追加するには、border プロパティを使用します：
チップ: ページネーションの最初と最後のリンクに角丸のボーダーを追加します：
.pagination li:first-child a {
border-top-left-radius:
5px;
border-bottom-left-radius: 5px;
}
.pagination li:last-child a {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
Try it Yourself ❯
チップ: ページ・リンクのグループにしたくない場合は、margin プロパティを追加します：
ul.pagination li a {
margin: 0 4px; /* 0 is for top
and bottom. Feel free to change it */
}
Try it Yourself ❯
font-size プロパティでページネーションのサイズを変更します：
ページネーションを中央にするには、周りを (<div> のような) コンテナ要素でラップし、text-align:center を追加します。
もう一つのページネーションのバリエーションは、いわゆる「パンくずリスト」と呼ばれるものです：
ul.breadcrumb {
padding: 8px 16px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
Try it Yourself ❯