読み込み中...

【CSS】ページネーションを作成！効果的な5ステップ

CSSページネーションの簡単な作成方法 CSS
2024.02.24
この記事は約12分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、CSSを用いたページネーションの作り方が分かるようになります。

ページネーションは、ウェブサイトにおけるユーザー体験を向上させる重要な要素の一つです。

本記事では、初心者でも理解しやすいように、基礎から応用まで段階的に解説します。

具体的なサンプルコードを交えながら、CSSを使ったページネーションの作成方法を学んでいきましょう。

●CSSとページネーションの基礎

CSS（Cascading Style Sheets）は、ウェブページのデザインを定義するための言語です。

HTMLで構築されたウェブページの見た目を装飾し、より魅力的かつ機能的なデザインを可能にします。

ページネーションにCSSを適用することで、ユーザビリティと視覚的魅力を両立させることができます。

○CSSとは何か？

CSSは、ウェブページのレイアウト、フォント、色などを指定するために用いられます。

HTMLでマークアップされたコンテンツにスタイルを適用することで、ページの見た目を整えることができます。

例えば、テキストの色を変えたり、要素に余白を加えたりすることが可能です。

○ページネーションの役割と重要性

ページネーションは、ウェブページ上でコンテンツを複数のページに分割し、ナビゲーションを提供する機能です。

これにより、ユーザーは必要な情報を効率的に探し出すことができます。

特にコンテンツが多いウェブサイトでは、ページネーションによってユーザーエクスペリエンスが大きく向上します。

○基本的なHTML構造

ページネーションを実装する前に、基本的なHTML構造を理解することが重要です。

HTMLはウェブページの骨格を構成し、各種コンテンツを整理するための言語です。

ページネーションを作成するには、通常、リスト(<ul>, <ol>)とリストアイテム(<li>)を用いて構造を作ります。

各リストアイテムには、ページへのリンク(<a>)を設置します。

この基本的な構造にCSSを適用することで、デザイン性の高いページネーションを作成することができます。

●ページネーションの作成方法

ウェブサイトにおいて、ユーザーが容易にコンテンツを探索できるようにするために、ページネーションは不可欠な要素です。

ここでは、CSSを使用して基本的なページネーションを作成する方法を解説します。

まず、HTMLでページネーションの骨格を作成し、次にCSSでスタイリングを加えていきます。

○サンプルコード1：基本的なページネーション

ここでは、シンプルなページネーションのHTML構造とCSSスタイルを紹介します。

HTMLでは、<ul>と<li>を使用してページネーションのリストを作成します。

CSSでは、リストアイテムに対して基本的なスタイルを適用し、見た目を整えます。

<ul class="pagination">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    ...
</ul>
.pagination li {
    display: inline;
    margin: 0 5px;
}

.pagination a {
    text-decoration: none;
    color: #333;
}

このコードでは、<ul>タグでページネーションのリストを作成し、それぞれのページ番号に<a>タグを使ってリンクを設定しています。

CSSでは、リストアイテムをインラインで表示し、リンクのデフォルトスタイルをオーバーライドしています。

○サンプルコード2：アクティブなページのスタイリング

ユーザーが現在どのページを閲覧しているかを視覚的に表すために、アクティブなページに特別なスタイルを適用することが重要です。

下記のCSSは、アクティブなページにハイライトを加える方法を表しています。

.pagination li.active a {
    color: #fff;
    background-color: #007bff;
    border-radius: 3px;
}

このスタイルでは、.activeクラスが付与されたリストアイテムのリンクに対して、白いテキスト色と青い背景色を設定しています。

これにより、アクティブなページが他のページとは異なる見た目になります。

○サンプルコード3：レスポンシブデザインの対応

ページネーションはレスポンシブデザインに対応している必要があります。

これは、異なるデバイスサイズでページネーションが適切に表示されるようにするためです。

下記のCSSは、レスポンシブデザインを実現する一例を表しています。

@media screen and (max-width: 600px) {
    .pagination li {
        display: block;
        margin-bottom: 5px;
    }
}

このメディアクエリは、画面の幅が600ピクセル以下の場合に適用されます。

この状況では、リストアイテムをブロック要素として表示し、各アイテムを縦に並べます。

○サンプルコード4：アイコンを使ったページネーション

アイコンを使用することで、ページネーションに視覚的なアピールを加えることができます。

ここでは、Font Awesomeのアイコンを使用したページネーションの例を紹介します。

<ul class="pagination">
    <li><a href="#"><i class="fas fa-angle-left"></i></a></li>
    ...
    <li><a href="#"><i class="fas fa-angle-right"></i></a></li>
</ul>

Font Awesomeのアイコンをリンクの中に埋め込むことで、矢印アイコンを使用して前後のページへのナビゲーションを提供します。

これにより、ユーザーは直感的にページ間を移動できます。

●ページネーションの応用例

ページネーションをさらに発展させるためには、動的な機能やインタラクティブな要素を組み込むことが重要です。

ここでは、JavaScriptやAPIを利用して、より高度なページネーションの応用例をいくつか紹介します。

○サンプルコード5：動的なページ数の表示

大量のデータを扱うウェブサイトでは、ページ数が動的に変わることがあります。

下記のサンプルコードでは、JavaScriptを使用して動的にページ数を計算し、ページネーションを生成する方法を表しています。

function createPagination(totalItems, itemsPerPage) {
    const pageCount = Math.ceil(totalItems / itemsPerPage);
    for (let i = 1; i <= pageCount; i++) {
        const li = document.createElement('li');
        li.innerHTML = `<a href="#">${i}</a>`;
        document.querySelector('.pagination').appendChild(li);
    }
}

この関数は、合計アイテム数と1ページあたりのアイテム数を引数に取り、必要なページ数を計算します。

その後、ページ数に応じて<li>要素を動的に生成し、ページネーションに追加します。

○サンプルコード6：JavaScriptとの組み合わせ

ページネーションとJavaScriptを組み合わせることで、ページ遷移時にページの再読み込みを防ぎ、よりスムーズなユーザーエクスペリエンスを提供することができます。

下記のサンプルでは、クリックイベントを利用してページ内容を動的に切り替える方法を表しています。

document.querySelector('.pagination').addEventListener('click', function(e) {
    e.preventDefault();
    if (e.target.tagName === 'A') {
        const pageNum = e.target.textContent;
        loadPageContent(pageNum);
    }
});

function loadPageContent(page) {
    // ここで指定されたページのコンテンツを読み込む
}

このコードでは、ページネーションのリンクがクリックされたときに、そのページ番号に基づいて特定のコンテンツを読み込むloadPageContent関数を呼び出します。

○サンプルコード7：APIとの連携で動的なページネーション

ウェブAPIと連携することで、サーバーからデータを取得し、それに基づいてページネーションを動的に生成することが可能です。

下記のサンプルでは、APIからデータを取得し、ページネーションを更新する一連の処理を表しています。

function fetchPageData(page) {
    fetch(`https://example.com/api/data?page=${page}`)
        .then(response => response.json())
        .then(data => {
            updatePageContent(data);
            updatePagination(data.totalPages);
        });
}

function updatePagination(totalPages) {
    const pagination = document.querySelector('.pagination');
    pagination.innerHTML = '';
    for (let i = 1; i <= totalPages; i++) {
        const li = document.createElement('li');
        li.innerHTML = `<a href="#">${i}</a>`;
        pagination.appendChild(li);
    }
}

このコードでは、APIからデータを取得し、そのデータに基づいてページコンテンツとページネーションを更新します。

APIの応答に含まれるtotalPagesを使用して、必要なページ数を計算し、ページネーションを再構築します。

●注意点と対処法

ページネーションをデザインする際には、いくつかの重要な注意点があります。

これらの注意点を適切に理解し、対処することで、より使いやすく、アクセスしやすいページネーションを作成することができます。

○レスポンシブデザイン時の注意点

レスポンシブデザインでは、異なるデバイスや画面サイズに対応するため、ページネーションのデザインも動的に変更する必要があります。

特に、小さな画面ではページ数が多くなるとページネーションが画面に収まらない可能性があるため、ページ数を動的に調整するか、または「前へ」「次へ」のみのシンプルなナビゲーションにするなどの工夫が必要です。

○クロスブラウザ対応のポイント

異なるブラウザ間で一貫した表示を実現するためには、クロスブラウザ対応が重要です。

特に、古いブラウザでは最新のCSSプロパティがサポートされていない場合があるため、フォールバックスタイルを用意するなどの対策が必要です。

例えば、CSS Grid Layoutを使用する場合、Flexboxなどの代替レイアウトを用意することで、古いブラウザでも適切に表示されるようにします。

○アクセシビリティを考慮したデザイン

アクセシビリティを考慮したページネーションのデザインは、すべてのユーザーが快適にナビゲーションできるようにするために重要です。

具体的には、画面読み上げソフトウェアを使用するユーザーのために、適切なARIA（Accessible Rich Internet Applications）マークアップを使用します。

また、色覚異常のユーザーを考慮して、色だけでなく形やテキストでも情報を伝えるようにします。

例えば、アクティブなページを示す際には、色だけでなく太字やアンダーラインを使用して目立たせることが効果的です。

●カスタマイズ方法

ページネーションのカスタマイズは、ウェブサイトのデザインに合わせて、見た目や機能を調整する重要なプロセスです。

ここでは、カラーとフォントの変更、クリエイティブなデザインへの応用、パフォーマンスの最適化という3つの観点からカスタマイズ方法を解説します。

○カラーとフォントの変更

ページネーションの視覚的な魅力を高めるためには、カラーとフォントの変更が効果的です。

ウェブサイトの全体的なデザインテーマに合わせて、ページネーションの色やフォントを調整します

例えば、下記のCSSコードはページネーションのリンクにカスタムカラーとフォントを適用する方法を表しています。

.pagination a {
    color: #4a90e2; /* リンクの色 */
    font-family: 'Open Sans', sans-serif; /* フォントの種類 */
    font-size: 14px; /* フォントサイズ */
}

このコードでは、ページネーションのリンクに特定の色とフォントを適用し、ウェブサイトの全体的なスタイルとの調和を図っています。

○クリエイティブなデザインへの応用

標準的なページネーションのデザインを超え、よりクリエイティブなアプローチを取ることも可能です。

例えば、アイコンや図形を用いたデザインや、マウスオーバー時にアニメーションを加えることで、ユーザーの興味を引きつけることができます。

下記のCSSコードは、マウスオーバー時にリンクの背景色が変わるアニメーションを加える例です。

.pagination a:hover {
    background-color: #eaeaea; /* 背景色 */
    transition: background-color 0.3s; /* アニメーションの時間 */
}

このスタイルでは、ユーザーがリンクにマウスを合わせた際に、背景色がスムーズに変化します。

○パフォーマンスの最適化

ページネーションのパフォーマンスを最適化することは、ウェブページのロード時間を短縮し、ユーザーエクスペリエンスを向上させるために重要です。

CSSとJavaScriptを最小限に抑え、不要なコードは削除します。

また、CSSスプライトやSVGを使用することで、リクエスト数を減らし、さらなるパフォーマンス向上を図ることができます。

まとめ

この記事を通じて、CSSを使用したページネーションの作成方法から応用例、さらには注意点と対処法までを解説しました。

基本的な構造からクリエイティブなデザインへの応用、さらにはアクセシビリティやパフォーマンスの最適化に至るまで、ページネーションを効果的に実装するための幅広い知識を紹介しました。

これらの知識を活用することで、どのようなウェブサイトにも適応可能な、使いやすく効果的なページネーションを実現できるでしょう。