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丸みを帯びた「アクティブ」および「ホバー」ボタンが必要な場合のプロパティ：
ホバー可能なトランジション効果
追加transitionプロパティをページ リンクに追加して、ホバー時の遷移効果を作成します。
縁取りされたページネーション
使用borderページネーションに境界線を追加するプロパティ:
丸みを帯びた境界線
ヒント：ページネーションの最初と最後のリンクに丸い境界線を追加します。
例
.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ページ リンクをグループ化しない場合のプロパティ:
ページネーションのサイズ
でページネーションのサイズを変更します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";
}
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。