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

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

はじめに
●HTMLページネーションとは
●ページネーションの基本構造
- ○HTMLコード
- ○CSSコード
●ページネーションの使い方
- ○基本的な使い方
- ○応用例
●注意点
●ページネーションのカスタマイズ
- ○デザインの変更
- ○機能の追加
まとめ

はじめに

この記事では、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;
}

●注意点

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

アクセシビリティ

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

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

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

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

○デザインの変更

ページネーションのデザインは、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();
        // ここにコンテンツを切り替える処理を記述
    });
});