CSS分ページの例
- 前のページ CSS ボタン
- 次のページ CSS マルチカラム
CSSを使ってリスポンシブな分ページを作成する方法を学びます。
シンプルな分ページ
ウェブサイトに多くのページがある場合、各ページに分ページ機能を追加したいかもしれません：
インスタンス
❯
.pagination {
}
.pagination a {
color: black;
display: inline-block;
padding: 8px 16px;
float: left;
}
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; /* グレー */
}
角の丸み
ヒント：ページの最初および最後のリンクに角の丸みを追加：
インスタンス
.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、自由に変更可能 */
}
ページサイズ
以下を使用して font-size 属性を変更してページのサイズを調整：
インスタンス
.pagination a {
font-size: 22px;
}
中央に配置されたページ
ページを中央に配置するには、設定された text-align:center のコンテナ要素（例えば <div>）で囲まれています：
インスタンス
.center {}}
text-align: center;
}
パンくず
ページネーションの別の形式は「パンくず」(breadcrumbs)と呼ばれています：
インスタンス
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";
}
- 前のページ CSS ボタン
- 次のページ CSS マルチカラム
