CSSページ付けの例
CSSを使用してレスポンシブページ付けを作成する方法を学びます。
単純なページ付け
たくさんのページがあるウェブサイトがある場合は、各ページに何らかのページ付けを追加することをお勧めします。
例
.pagination {
display: inline-block;
}
.pagination a {
color:
black;
float: left;
padding: 8px
16px;
text-decoration: none;
}
アクティブでホバブルなページネーション
.active
クラスで現在のページを強調表示し、:hover
セレクターを使用して、マウスをページ上に移動するときに各ページリンクの色を変更します。
例
.pagination a.active {
background-color:
#4CAF50;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
丸みを帯びたアクティブでホバー可能なボタン
border-radius丸みを帯びた「アクティブ」ボタンと「ホバー」ボタンが必要な場合は、プロパティを追加します。
例
.pagination a {
border-radius: 5px;
}
.pagination a.active {
border-radius: 5px;
}
ホバブルトランジション効果
プロパティをページリンクに追加してtransition、ホバーにトランジション効果を作成します。
例
.pagination a {
transition: background-color .3s;
}
ボーダーページネーション
プロパティを使用しborderて、ページネーションに境界線を追加します。
例
.pagination a {
border: 1px solid #ddd; /* Gray
*/
}
丸みを帯びた境界線
ヒント：ページネーションの最初と最後のリンクに丸い境界線を追加します。
例
.pagination a:first-child {
border-top-left-radius:
5px;
border-bottom-left-radius: 5px;
}
.pagination
a:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
リンク間のスペース
ヒント：marginページリンクをグループ化しない場合は、プロパティを追加します。
例
.pagination a {
margin: 0 4px; /* 0 is for top
and bottom. Feel free to change it */
}
ページ付けサイズ
font-sizeプロパティを使用してページネーションのサイズを変更します。
例
.pagination a {
font-size: 22px;
}
中央のページネーション
ページネーションを中央に配置するには、コンテナ要素（<div>など）を次のようにラップします。text-align:center
例
.center {
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";
}