ページネーションの論理パズル的な考え方

こんにちは！

マーケティング部受託プロダクトチームのインターン生、村高歩夢です！

WEBページを複数に分けるときに用いられるページネーション。

Googleの検索結果ページの下にあるページ変更の機能ですね。

このページネーションの作成、すごいスカッとする爽快感というか、歯に挟まったささみがスッと取れるような気持ちよさがあるんですよ。

ページネーションはJavaScriptなどの動的な言語とHTML/CSSを用いて作成しますが、今回はHTML/CSSの部分の考え方を説明したいと思います。

各ボタンにクラスと呼ばれるステータスを付与して、クラスを指定し、命令する

この流れでページネーションを作成していきます。

なんでクラス必要なの？ボタンに命令すりゃええやんと思うかもしれません。

クラスは同じボタンに二つのクラスを付与することができます。

従って、クラスを用いると

〇〇クラスかつ××クラスの時はこの命令に従ってください

のように、ボタンの状態により命令を切り替えることができるのです。

ページネーションがあるということはページが複数あります。

1ページ目に滞在している時の1ボタンと2ページ目に滞在している時の1ボタンで命令を変えたい！ということが起こります。

これを可能にするために各ボタンにクラスを付与していきます。

今回は

各数字のページボタンにpage

前へボタンにprev

後ろボタンにnext

今いるページのボタンにcurrent

のクラスを付与する

という感じですね。

勘がいい人はわかるかもしれませんが

currentクラスは他のクラスと同時に付与されるクラスです。

現在滞在しているページが1ページ目なら1のボタンはpageとcurrentクラスどちらも付与されますよね。

同様に

現在滞在しているページが2ページ目なら2のボタンはpageとcurrentクラス

となります。

加えて、現在いるページは状況によって変わります。

つまり、クラスには

静的なクラスpageとprevとnext

動的なクラスcurrent

があるわけです。

ちなみにクラスを動的にするためにJavaScriptを使います。今回は無視です。

このクラスに命令をしてページネーションを作成します。

さて、どんな命令が必要でしょうか。

ページネーションの機能を分割していきましょう。

ページネーションを作るには以下の課題をクリアしなければいけません。

1ページ目に滞在している場合は前へボタンは表示しない

1ページ目以外に滞在している場合は前へボタンを表示する

現在しているページのボタンは色を濃くする

滞在していないページのボタンはマウスオーバー機能がある

これらの課題をクリアするためには以下の命令が必要です。

ボタンを表示しない

ボタンを表示する

ボタンの色を濃くする

ボタンにマウスオーバー機能をつける。

１ページ目に滞在しているときは、以下の図のように各ボタンに命令を与えます。

同様に2ページ目,3ページ目にいる場合も ボタンにクラスを付与し、クラスに命令していくのです。

う〜ん。説明下手。このクラスを利用するだけで複雑なことができる。

論理パズルに成功したようなスッキリ感を説明したかったのですが、、

---

■ガーディアン主力ソリューション→OWLet

■新サービスリリースのお知らせ

WEB業界を変える！育てて成果を上げるサブスク型HPサービス

→SCSC (スクスク)

ガーディアンのインターン制度→こちら

村高歩夢の紹介ページ→こちら