HTMLでページングの機能を実装したいと思っていませんか？

コンテンツによっては、長い文章を複数ページに分割した方がユーザーの可読性が増えることがあります。

そんな時にページングを活用できれば、サイトの利便性が高まりますよね。

今回は、HTMLを使ってページングを実装させたいという方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、HTMLを使ったページングについての理解が深まりますよ。

ぜひ最後まで読んでくださいね！

ページングとは？どういう時に使うもの？

そもそも、ページングとはどういったものなのでしょうか？

ページングとは、Webサイト上のコンテンツが縦長になってしまい、中身が把握しづらい時に、複数ページに分割して移動できるようにした機能のことです。

検索結果一覧やカテゴリ一覧など、数が多いリストを表示する際によく使われます。

ページングの形は、ページ番号を横に並べたものが一般的で、一目でページ数がどのくらいあるのか把握できるメリットがあります。

現在、何ページ目を閲覧しているのか、分かりやすくする効果もありますね。

ページ番号とともに、「前のページ」「次のページ」という、別のリンクを用意する場合が多いです。

また、リスト形式のコンテンツ以外に、ニュース記事などの長い文章のコンテンツを分割するときにも活用されます。

コンテンツ下部にある広告や、他の情報の視認性を高める効果も期待できますよ。

HTML・CSSを使ったページングの作り方

実際に、HTMLとCSSを使って、ページングを作成してみましょう。

今回は、HTMLのリストを使ってページングを実装します。

<ul class="example">
<li>前へ</li>
<li class="this">1</li>
<li><a href="page-2.html">2</a></li>
<li><a href="page-3.html">3</a></li>
<li><a href="page-2.html">次へ</a></li>
</ul>

CSSには以下のように記述します。

.example {
list-style: none;
}

.example li {
display: inline-block;
height: 30px;
width: 30px;
text-align: center;
line-height: 30px;
font-size: 12px;
border: 1px #ccc solid;
border-radius: 5px;
}

.example li a{
display: block;
text-decoration: none;
color: #333;

}

.example .this {
background-color: #777;
color: #fff;
}

「list-style-type: none;」でリストの先頭にあるマークをなくし、「display: inline-block;」を使って横並びに配置します。

リストの幅と高さを揃え、周囲を枠線で囲うように指定しています。

リンクの下線は「text-decoration: none;」で消すことができますね。

現在のページが分かるように、HTMLで「class=”this”」を指定し、背景色と文字色を変えました。

これで、基本的なページングの表示ができました。

サイトのデザインに合わせて、CSSで調整してみてくださいね。

<link rel=”prev”>と<link rel=”next”>

個々のページに、<link rel=”prev”>と<link rel=”next”>を指定することで、ページ同士の関係を示すことができます。

1ページ目には、「rel=”prev”」のみ、最後のページには「rel=”next”」のみを指定します。

以前は、この指定によって、SEOの面で良い効果が得られましたが、Googleがサポートをやめてしまったため、それほど期待できなくなりました。

メリットは少ないですが、慣習的なものと考え、記述しておくのも良いでしょう。

まとめてページングを設定する

前述のように、HTMLとCSSのみでページングを作成する場合、各ページごとに別々の記述をする必要があります。

1ページ目と2ページ目で「前へ」と「次へ」のリンク先は異なりますし、現在のページを示す背景色の場所も変わりますよね。

これでは、ページ数が多いほど作業量が増えてしまいます。

解決策として、JavaScriptなどのプログラムを用いる方法があります。

プログラムを使用すれば、HTMLとCSSの記述を変えることなく各ページに応じて表示やリンク先を変更することができます。

「ページング」「ページネーション」などで検索すると、JavaScriptプラグインやjQueryプラグインを探すことができますよ。

プログラムの知識がない場合にも、これらを使えば、簡単な記述でページングを実装可能です。

また、WordPressを使用している場合、ほとんどのテーマで記事一覧にページング機能が実装されています。

個別記事を分割したいときにも、WordPressのプラグインを追加することで、簡単にページングを設置することが可能です。

興味がある方は、ぜひ調べてみてくださいね。

ページング機能は必要かどうか

記事一覧など、項目が多いコンテンツでは、ページングはとても便利な機能です。

ですが、ニュース記事など1つのコンテンツを複数ページに分割することは、あまり推奨されていません。

ユーザーの多くは、複数ページをたどっていくコンテンツより、1ページにまとめられているコンテンツを好む傾向が強いからです。

このことは、Googleの調査でも明らかになっています。

https://webmaster-ja.googleblog.com/2011/12/blog-post.html

これを受けて、Googleでは、複数ページにまたがる記事について、「すべて表示するページ」が存在する場合には、そちらを優先して表示するように対応しているそうです。

HTMLで<link rel=”canonical”>の設定をすることで、「すべて表示するページ」を指定することができます。

ただ、コンテンツの中身によっては、ロード時間が長くなってしまうこともあります。

コンテンツ表示までの時間が長いほど、ユーザーの離脱率が増え、SEOにマイナスの影響を与えます。

そもそも、Webサイトのユーザーが複数ページの表示を好んでいる場合もあります。

そういう場合には、ページング実装は効果的です。必要に応じて、使用するのが良いでしょう。

ちなみに、複数ページに分けた場合に、個々のページの<link rel=”canonical”>で1ページ目を指定することは、正確ではないため行わないようにしましょう。

まとめ：ページングは本当に必要か判断して使うことが大事

今回は、HTMLを使って、複数ページのページング機能を実装する方法を解説しました。

HTMLとCSSでも作成できますが、プログラムやプラグインを導入することで、複数ページのページング実装を、まとめて設定することができます。

1つのコンテンツを複数ページに分けることは、基本的に好ましくありません。

ですが、適切な場所であれば、ユーザーの利便性が高まる効果がありますので、ぜひ利用してみてくださいね。

ページングを作成する上で、今回の記事が参考になれば幸いです。

＼プログラミングスクールを比較／