初心者必見!HTMLページネーションの作り方・使い方を徹底解説

HTMLページネーションの作成例HTML
この記事は約7分で読めます。

 

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

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

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

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

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

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

この記事を読めば、HTMLページネーションの作り方や使い方が理解できるようになります。

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

はじめに

この記事では、HTMLページネーションの作り方や使い方、注意点、カスタマイズ方法を初心者目線で分かりやすく徹底解説します。

サンプルコードや応用例も豊富に紹介しています。

●HTMLページネーションとは

ページネーションとは、ウェブサイトのコンテンツを複数のページに分割し、それらのページを簡単に移動できるようにするためのナビゲーションです。

これにより、ユーザーは簡単にコンテンツを読み進めることができます。

●ページネーションの基本構造

ページネーションを作成するには、HTMLとCSSのコードを組み合わせる必要があります。

○HTMLコード

下記のサンプルコードは、基本的なページネーションのHTMLコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ページネーションサンプル</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</body>
</html>

○CSSコード

下記のサンプルコードは、基本的なページネーションのCSSコードです。

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}

.page-item {
    display: inline;
}

.page-link {
    position: relative;
    display: block;
    padding: 0.5em 0.75em;
    margin-left: -1px;
    line-height: 1.25;
    color: #007bff;
    background-color: #fff;
    border: 1px solid #dee2e6;
    text-decoration: none;
}

.page-link:hover {
    color: #0056b3;
    background-color: #e9ecef;
    border-color: #dee2e6;
}

●ページネーションの使い方

○基本的な使い方

上記のHTMLとCSSコードを使って、ページネーションをウェブサイトに追加できます。

HTMLコードをページネーションを表示したい場所に追加し、CSSコードをウェブサイトのスタイルシートに追加してください。

○応用例

ページネーションをカスタマイズすることで、さまざまなデザインや機能を追加できます。

例えば、現在のページを強調表示するには、下記のようなHTMLコードを使います。

...
<ul class="pagination">
    ...
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    ...
</ul>
...

そして、下記のようなCSSコードを追加します。

.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

●注意点

ページネーションを使用する際には、下記の点に注意してください。

  1. アクセシビリティ

    ページネーションを使用すると、一部のユーザーにとってアクセスしにくくなる場合があります。
    そのため、適切なaria属性を使用してアクセシビリティを向上させることが重要です。
  2. SEO

    ページネーションはSEOに影響を与える可能性があります。
    適切なリンク構造を維持し、rel=”prev”およびrel=”next”属性を使用して、検索エンジンがページ間の関係を理解できるようにしてください。
  3. レスポンシブデザイン

    ページネーションは、デバイスの画面サイズに応じて適切に表示される必要があります。
    メディアクエリを使用して、ページネーションが異なるデバイスでうまく機能するように調整してください。

●ページネーションのカスタマイズ

○デザインの変更

ページネーションのデザインは、CSSを変更することで簡単にカスタマイズできます。

例えば、ボタンの色や形状を変更したい場合は、下記のようなCSSコードを追加します。

.page-link {
    color: #fff;
    background-color: #f06;
    border-radius: 50%;
}

.page-link:hover {
    color: #fff;
    background-color: #c05;
    border-color: #c05;
}

○機能の追加

JavaScriptを使用して、ページネーションに動的な機能を追加することもできます。

例えば、ページ番号をクリックしたときにページがリロードされずにコンテンツが切り替わるようにする場合、下記のようなJavaScriptコードを追加します。

document.querySelectorAll('.page-link').forEach(function(link) {
    link.addEventListener('click', function(event) {
        event.preventDefault();
        // ここにコンテンツを切り替える処理を記述
    });
});

まとめ

この記事では、HTMLページネーションの作り方や使い方、注意点、カスタマイズ方法を初心者目線で分かりやすく徹底解説しました。

サンプルコードや応用例を参考にして、自分のウェブサイトにページネーションを追加してみてください。