CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでページネーションをWebページの中央に配置する方法

Webページ上のページネーション（ページ送り）を中央に配置したい場合は、CSSの text-align プロパティと display: inline-block を組み合わせるのが最もシンプルで確実な方法です。この記事では、実際に動作するサンプルコードをもとに、その仕組みと各スタイルの役割をわかりやすく解説します。

ページネーションを中央揃えにする基本の考え方

中央寄せを実現するポイントは、次の2つです。

  • 親要素（コンテナ）に text-align: center; を指定する
  • ページネーション本体に display: inline-block; を指定する

通常、<div> 要素はブロックレベルのため、親要素の幅いっぱいに広がります。しかし inline-block にすることで、中身のリンク分だけの幅に縮みます。その結果、親要素の text-align: center の効果によって、ページネーション全体が画面中央に配置されるという仕組みです。

実装例：デザイン性のある中央寄せページネーション

以下のコードは、単なる中央寄せにとどまらず、現在ページのハイライト表示、マウスオーバー時の色変化、両端の角丸といった実用的なデザインまで盛り込んだ完全なサンプルです。そのままコピー＆ペーストして動作を確認できます。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .demo {
        display: inline-block;
      }
      .demo1 {
        text-align: center;
      }
      .demo a {
        color: red;
        padding: 5px 12px;
        text-decoration: none;
        transition: background-color 2s;
        border: 1px solid orange;
        font-size: 18px;
      }
      .demo a.active {
        background-color: orange;
        color: white;
        border-radius: 5px;
      }
      .demo a:hover:not(.active) {
        background-color: yellow;
      }
      .demo a:first-child {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
      }
      .demo a:last-child {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Our Quizzes</h2>
    <div class="demo1">
      <div class="demo">
        <a href="prev.html"><</a>
        <a href="quiz1.html">Quiz1</a>
        <a href="quiz2.html">Quiz2</a>
        <a href="quiz3.html" class="active">Quiz3</a>
        <a href="quiz4.html">Quiz4</a>
        <a href="next.html">></a>
      </div>
    </div>
  </body>
</html>

コードのポイント解説

  • .demo1（外側のコンテナ）：text-align: center; を指定することで、内側のページネーション全体が中央に配置されます。中央寄せの要となる部分です。
  • .demo（ページネーション本体）：display: inline-block; により、親要素の幅に依存せず、リンク列の幅ちょうどに収まります。
  • .demo a：各リンクに余白（padding）、オレンジの枠線、下線の除去を設定。transition: background-color 2s; によって、背景色がゆっくりと滑らかに変化します。
  • .demo a.active：現在閲覧中のページを示すスタイルです。オレンジ背景・白文字・角丸で視覚的に強調します。
  • .demo a:hover:not(.active)：:not(.active) を組み合わせることで、現在ページ以外のリンクにマウスを乗せたときだけ背景が黄色に変わります。
  • :first-child / :last-child：先頭と末尾のリンクのみ外側を大きく角丸にすることで、ページネーション全体がひとつのまとまりとして自然に見えます。

まとめ

ページネーションの中央寄せは、「親要素に text-align: center、子要素に display: inline-block」というシンプルな組み合わせだけで実現できます。近年ではFlexboxの justify-content: center を使う方法も一般的ですが、軽量でブラウザ互換性の高いこの手法は、今でも十分に実用価値があります。ぜひ自分のサイトのデザインに合わせて、配色や角丸の大きさを自由にカスタマイズしてみてください。

  1. HTMLとCSSでボタンを中央に配置する方法【状況別テクニック徹底解説】

    HTMLとCSSを使って、ブロック要素やインラインブロック要素のボタンを中央に配置するには、どうすればよいのでしょうか? 一見難しそうに感じますが、要素の種類ごとに適切な方法を知っていれば、どんなボタンでも簡単に中央寄せできます。この記事では、実践的なテクニックをコード例とともにわかりやすく解説します。 インラインブロック要素のボタンを中央に配置する <button>や<a>(リンク)要素は、デフォルトでdisplay: inline-blockが設定されています。インラインブロック要素は、通常のドキュメントフローの中で左から右へと流れるように配置されます。 つ

  2. CSSを使用して画像の中央にテキストを配置する方法

    CSSで画像の中央にテキストを配置する方法 画像の上にテキストを重ねて中央に配置したい場合、CSSのtransformプロパティとpositionプロパティを組み合わせるのが最もシンプルで確実な方法です。親要素を基準に絶対配置したテキストを、translate()で自分自身の半分のサイズ分だけずらすことで、画面サイズに関係なく正確な中央揃えを実現できます。 ポイントとなるCSSの仕組み position: relative; … 親要素（コンテナ）に指定し、テキストの配置基準を作ります。 position: absolute; … テキスト要素を親要素基準の絶対配置にします。 left: