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

CSSでページネーションリンクの間にスペースを追加する方法

Webサイトのページネーション(ページ送り)は、複数のページを快適に行き来するための重要なUI要素です。しかし、デフォルトの状態ではリンク同士がくっついてしまい、見た目が窮屈になったり、クリックしづらくなったりすることがあります。

この記事では、CSSを使ってページネーションリンクの間に適切なスペースを追加する方法を、実際に動作するサンプルコードとともにわかりやすく解説します。

実装のポイント

  • display: inline-block; — 各リンクをインラインブロック要素にすることで、paddingやmarginなどのボックスモデル関連プロパティが正しく反映されます。
  • padding: 5px 12px; — リンクの内側に余白を設け、クリックしやすい広めの領域を確保します。
  • :hover と .active — マウスオーバー時や現在閲覧中のページに背景色を変えることで、視認性と操作性が向上します。
  • :first-child / :last-child — 先頭と末尾のリンクだけ角丸を大きくすることで、デザインにまとまりとアクセントを加えます。

サンプルコード

次のコードを実行すると、リンク間にスペースのあるページネーションが表示されます。コードをそのままHTMLファイルとして保存し、ブラウザで開けば動作を確認できます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .demo {
            display: inline-block;
         }
         .demo a {
            color: red;
            padding: 5px 12px;
            text-decoration: none;
            transition: background-color 2s;
            border: 1px solid orange;
         }
         .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 = "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>
   </body>
</html>

コードの解説

このサンプルでは、.demo a に対して padding: 5px 12px; を指定しています。これにより、各リンクの上下に5px、左右に12pxの余白が生まれ、隣接するリンクとの間に自然なスペースが確保されます。

さらに余白を広げたい場合は、margin-right を追加する方法もあります。例えば margin-right: 8px; を指定すれば、リンク同士の間隔をより細かく調整できます。

また、transition: background-color 2s; を指定することで、ホバー時の背景色がゆっくりと変化する滑らかなアニメーション効果を実現しています。a:hover:not(.active) のセレクタにより、現在のページ(アクティブなリンク)以外にのみホバー効果が適用される点もポイントです。

まとめ

ページネーションのリンク間にスペースを追加するには、display: inline-block と padding(必要に応じて margin)を組み合わせるのが基本です。ホバー時の色変化や角丸のデザインを加えることで、ユーザーにとって押しやすく見やすいナビゲーションを作成できます。ぜひ自分のサイトに合わせて数値を調整してみてください。

  1. CSSを使って画像の上にボタンを重ねて表示する方法

    CSSで画像の上にボタンを配置する方法 画像の中央にボタンを重ねて表示したい場合、親要素にposition: relativeを指定し、ボタン側にposition: absoluteを指定するのが基本のテクニックです。さらにtransform: translate(-50%, -50%)を組み合わせることで、ボタンを画像のど真ん中に正確に配置できます。 以下は、CSSを使用して画像の上にボタンを追加する具体的なコード例です。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport&quo

  2. CSSでホバー時にトランジション（アニメーション）を追加する方法を解説

    CSSでホバー時にトランジション（滑らかなアニメーション効果）を追加するには、transitionプロパティと:hover疑似クラスを組み合わせて使用します。あらかじめ要素にtransitionを設定しておくことで、ホバー時の変化が瞬時に切り替わるのではなく、指定した時間をかけてスムーズに変化するようになります。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1&q