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

CSSでレスポンシブなページネーションを作成する方法

CSSでレスポンシブなページネーションを作成する

Webサイトでコンテンツが複数ページにわたる場合、ユーザーが前後のページへスムーズに移動できるよう、ページネーション(ページ送り)を設置するのが一般的です。CSSを活用すれば、特別なライブラリを使わずとも、シンプルで使いやすいレスポンシブ対応のページネーションを作成できます。

以下のコード例では、display: inline-block と float: left を組み合わせて、リンクを横一列に並べたページネーションを実装しています。実際にブラウザで実行して、動作を確認してみてください。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         .demo {
            display: inline-block;
         }
         .demo a {
            color: blue;
            float: left;
            padding: 3px 8px;
            text-decoration: none;
         }
      </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">Quiz3</a>
         <a href = "quiz4.html">Quiz4</a>
         <a href = "next.html">></a>
      </div>
   </body>
</html>

コードのポイント

  • .demo(コンテナ): display: inline-block; を指定することで、中身の幅に合わせたブロックとして表示されます。
  • .demo a(リンク): float: left; で各リンクを横並びに配置し、padding: 3px 8px; でクリックしやすい余白を確保しています。
  • text-decoration: none; により、リンクの下線を消してすっきりとした見た目にしています。

より使いやすくする工夫

実務では、ホバー時の背景色変更や、現在閲覧中のページを示すスタイルを追加すると、さらに操作性が向上します。例えば、次のようなCSSを追加するだけで、ユーザーが今どのページにいるのかひと目で把握できるようになります。

.demo a:hover {
  background-color: #ddd;
}
.demo a.active {
  background-color: #4CAF50;
  color: white;
}

  1. CSSで作るレスポンシブ対応のお客様の声（テスティモニアル）セクションの実装方法

    Webサイトに掲載する「お客様の声（テスティモニアル）」は、信頼性を高めるための重要な要素です。CSSを活用すれば、デスクトップでもスマートフォンでも見やすい、レスポンシブなデザインを簡単に実現できます。 この記事では、メディアクエリとfloatを使って、画面幅に応じてレイアウトが自動的に切り替わるテスティモニアルカードの作り方を解説します。 実装のポイント 基本レイアウト： プロフィール画像を float: left; で左に回り込みさせ、名前とコメントを右側に配置します。 円形画像： border-radius: 50%; を指定することで、画像を丸く表示できます。 float の解除：

  2. CSSでレスポンシブなブログレイアウトを作成する方法【完全なコード例付き】

    CSSを使ってレスポンシブなブログレイアウトを作成するには、viewportメタタグの設定と、デバイスの画面幅に応じて柔軟に調整されるレイアウト構造の定義がポイントになります。以下に、ナビゲーションバー・ブログ本文・サイドリンク・フッターを備えた、ブログサイトの完全なコード例を紹介します。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <