日本語

CSSチュートリアル

CSS3チュートリアル

CSS 的高度化

CSS リファレンス

CSS レスポンシブ

CSS - ページネーション：ビギナーズガイド

こんにちは、未来のウェブデザインスーパースターたち！今日は、CSSのページネーションという素晴らしい世界に飛び込みます。コードを書いたことがない方も心配しないでください。このエキサイティングな旅でのあなたの親切なガイドとして、私はここにいます。このチュートリアルの終わりまでに、プロのように美しく機能的なページネーションを作成できるようになります！

CSS - Pagination

ページネーションとは？

まず、ページネーションとは何かについて話しましょう。本を読んでいるとします。すべてのテキストがひとつの終わりのないページに詰まっているのではなく、管理しやすいチャンクに分けられている。それが物理的な世界でのページネーションです。ウェブサイトでは、ページネーションが検索結果やブログ投稿などの長いコンテンツを別々のページに分割するのを助けます。ユーザーに仮想的な「ページをめくる」ボタンを提供するようなものです！

では、袖をまくって始めましょう！

ステップ1：HTMLマークアップを追加

まず第一に、ページネーションの基本構造を作成する必要があります。これをデザインの骨組みと考えましょう。

<div class="pagination">
<a href="#">&laquo;</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">&raquo;</a>
</div>

この例では、クラス「pagination」を持つ <div> を作成しています。中には、ページ番号を表す複数の <a> タグ（リンク）があります。&laquo; と &raquo; は左と右の矢印を表す特殊文字です。カッコいいですね？

ステップ2：CSSクラスを定義

骨組みができたので、少しスタイルを加えましょう。まずはページネーションに形を与えるための基本的なCSSから始めます。

.pagination {
display: inline-block;
}

.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}

これは以下のことを行います：

  • display: inline-block; は、ページネーションコンテナをインライン要素のように振る舞わせながら、幅と高さを設定できるようにします。
  • 我们正在樣式化pagination div中的所有標籤。
  • float: left; はリンクを水平に並べます。
  • padding はテキストの周りに余白を与えます。
  • text-decoration: none; はリンクの下線を削除します。

ステップ3：ページネーションリンクのスタイル

ページネーションリンクを少しもっと魅力的に見せるましょう！

.pagination a.active {
background-color: #4CAF50;
color: white;
}

.pagination a:hover:not(.active) {
background-color: #ddd;
}

このコードは以下の2つのクールなことを行います：

  1. 「アクティブ」なページ（現在のページ）に緑の背景と白いテキストを適用します。
  2. 他のすべてのリンクにホバー効果を追加し、マウスをのせたときに背景色を変更します。

CSSシンプルなページネーション

おめでとうございます！あなたは刚刚简单地功能性页面制作 pagination 做好了。でも、ここで止まらないでください。もっとエキサイティングな変化を見てみましょう！

CSS アクティブでホバー可能なページネーション

ページネーションをよりインタラクティブにしたいですか？これを試してみてください：

.pagination a {
transition: background-color 0.3s;
}

.pagination a.active {
background-color: #4CAF50;
color: white;
}

.pagination a:hover:not(.active) {
background-color: #ddd;
}

transition プロパティは、リンクをホバーしたときにスムーズな色の変化効果を追加します。魔法のようですね！

CSS 角を丸めたアクティブでホバー可能なボタン

ボタンに少し曲线を加えましょう：

.pagination a {
border-radius: 5px;
margin: 0 4px;
}

border-radius はボタンの角を丸め、margin はボタン間にスペースを追加します。カッコよくないですか？

CSS ホバー可能な遷移効果

少しの派手さを加えたいですか？この微妙なスケール効果を試してみてください：

.pagination a {
transition: transform 0.3s;
}

.pagination a:hover {
transform: scale(1.1);
}

今、リンクをホバーすると少し大きくなります。まるでクリックされるのを待っているかのようです！

CSS 枠線を追加したページネーション

ページネーションをより目立たせるために、枠線を追加しましょう：

.pagination a {
border: 1px solid #ddd;
}

この簡単な行が、各リンクの周りに薄い灰色の枠線を追加します。如此小さな変更が大きな違いをもたらすのは驚きですね！

CSS 角を丸めた枠線

枠線を少し柔らかくしたいですか？これを試してみてください：

.pagination a {
border-radius: 50%;
}

これで、-square ボタンが完璧な円形に変わります。どれだけクールでしょうか？

CSS リンク間のスペース

時々、少しの余裕が必要です：

.pagination a {
margin: 0 4px;
}

これで、各リンクの間に小さなギャップが追加され、ページネーションがより広々とした感じになります。

CSS ページネーションのサイズ

一寸法に合いません。サイズを調整する方法を学びましょう：

.pagination a {
font-size: 22px;
padding: 10px 20px;
}

これらの値を試してみて、デザインに最適なサイズを見つけてください！

CSS 中央に配置したページネーション

ページネーションをページの中央に配置したいですか？

.pagination {
text-align: center;
}

この簡単な行で、ページネーションブロック全体を中央に揃えます。魔法ですね！

CSS ネクストとプレviousボタンを追加したページネーション

ナビゲーションボタンを追加しましょう：

<div class="pagination">
<a href="#">&laquo; Previous</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">Next &raquo;</a>
</div>
.pagination a:first-child,
.pagination a:last-child {
background-color: #f1f1f1;
font-weight: bold;
}

これで、「Previous」と「Next」ボタンが追加され、異なるスタイルで表示されます。

CSS パンくずを追加したページネーション

ユーザーに現在のページ位置を示したいですか？これを試してみてください：

<div class="pagination">
<a href="#">&laquo;</a>
<a href="#">1</a>
<a href="#" class="active">2</a>
<a href="#">3</a>
<a href="#">&raquo;</a>
<p>Page 2 of 3</p>
</div>
.pagination p {
margin-left: 10px;
display: inline-block;
}

これで、現在のページと総ページ数を示すテキストインジケータが追加されます。

CSS リストスタイルのページネーション

最後に、リストスタイルのページネーションを試みましょう：

<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#" class="active">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
.pagination {
list-style-type: none;
padding: 0;
}

.pagination li {
display: inline-block;
}

これで、きれいなリストスタイルのページネーションレイアウトが作成されます。

そして、それで終わりです、皆さん！CSSのページネーションのインとアウトを学びました。これらの技術をマスターする鍵は練習です。ですから、これらのスタイルを試してみて、組み合わせて、自分だけのユニークなページネーションデザインを作成してみてください。あなたが次のウェブデザインの大物になるかもしれません！

ハッピーコーディング、そして、あなたのページは常に完璧にページネーションされていることを祈っています！

方法 説明
シンプルなページネーション 最小限のスタイルを持つ基本的なページネーション
アクティブでホバー可能なページネーション インタラクティブなページネーション vớiホバー効果
角を丸めたアクティブでホバー可能なボタン 角を丸めたページネーションボタン
ホバー可能な遷移効果 スムーズな遷移効果を持つページネーション
枠線を追加したページネーション リンクの周りに枠線を追加したページネーション
角を丸めた枠線 完璧な円形のボタンを持つページネーション
リンク間のスペース リンクの間にスペースを追加したページネーション
ページネーションのサイズ ページネーション要素のサイズを調整
中央に配置したページネーション ページの中央に配置されたページネーション
ネクストとプレviousボタンを追加したページネーション ナビゲーションボタンを追加したページネーション
パンくずを追加したページネーション ページ位置を示すテキストインジケータを追加したページネーション
リストスタイルのページネーション 無秩序リストを使用したページネーションレイアウト

Credits: Image by storyset

前のチュートリアル:
CSS - ボタン
次のチュートリアル:
CSS - 変数