ページネーション

四角枠

  • HTML
  • CSS

四角形で囲われたシンプルなタイプのページネーションです。

See the Pen 【ページネーション】1 by 早稲田電子IT教育センター (@wit-it) on CodePen.

  1. 横並びにするために、<ol>要素には display: flex; を使用しています。
  2. 番号が振られている各リンクである<a>要素には、display: block; を設定しています。

下線

  • HTML
  • CSS

下線をつけたタイプのシンプルなページネーションです。

See the Pen 【ページネーション】2 by 早稲田電子IT教育センター (@wit-it) on CodePen.

  1. 基本的な構成は、ページネーション1とほぼ同様です。
  2. 各項目を下方向の border で設定しています。

円形

  • HTML
  • CSS

各項目が円形タイプになったものです。

See the Pen 【ページネーション】3 by 早稲田電子IT教育センター (@wit-it) on CodePen.

  1. 基本構成はほぼ同じですが、横並びに display: grid; を使用しています。
  2. 各項目には border による線と border-radius: 50%; での角丸設定を使用し円を作っています。
  3. 左右の矢印部分は、::before と ::after を使用し線と四角形を組み合わせて作成しています。