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

CSSで「次へ」「前へ」ボタンを作成する方法をわかりやすく解説

Webサイトのページ送りやスライダーなどでよく使われる「次へ（Next）」と「前へ（Previous）」ボタンは、CSSを使えば簡単に美しく作成できます。この記事では、丸型デザインのナビゲーションボタンを実装する具体的なコード例を紹介します。

実装のポイント

ボタンを作成する際の主なポイントは以下の通りです。

  • display: inline-block; を指定して、aタグでもパディングやサイズ調整ができるようにします。
  • border-radius: 50%; を使うことで、正円形のボタンにできます。
  • :hover 疑似クラスで、マウスオーバー時の色変化を設定し、インタラクティブな印象を与えます。
  • 矢印記号はHTMLエンティティ（‹ や ›）を使用すると便利です。

コード例

以下は、「前へ」と「次へ」の丸型ボタンをCSSで作成するサンプルコードです。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
a {
    text-decoration: none;
    display: inline-block;
    padding: 20px;
    font-size: 35px;
    width: 40px;
    text-align: center;
}
.back:hover {
    background-color: #ddd;
    color: black;
}
.next:hover {
    background-color: rgb(121, 37, 133);
    color: white;
}
.back {
    border-radius: 50%;
    background-color: #acacac;
    color: black;
}
.next {
    border-radius: 50%;
    background-color: rgb(68, 30, 112);
    color: white;
}
</style>
</head>
<body>
<h1>Previous and Next Button Example</h1>
<a href="#" class="back">&lsaquo;</a>
<a href="#" class="next">&rsaquo;</a>
</body>
</html>

コードの解説

このコードでは、共通スタイルとして a タグに下線を消す text-decoration: none; を設定し、インラインブロック表示にすることで余白やサイズを自由に制御できるようにしています。フォントサイズを35pxと大きめにすることで、矢印記号が見やすくなります。

「前へ」ボタン（.back）はグレー系の背景色で、ホバー時には明るいグレーに変化します。「次へ」ボタン（.next）は紫系の背景色で、ホバー時にはより明るい紫色に変化し、白い文字色が適用されます。どちらも border-radius: 50% により円形になっています。

表示結果

上記のコードを実行すると、灰色の円形の「‹」ボタンと紫色の円形の「›」ボタンが横並びで表示されます。それぞれにマウスカーソルを合わせると、背景色が変化してホバー効果を確認できます。

応用のヒント

さらに使いやすくしたい場合は、transition プロパティを追加して色変化を滑らかにしたり、box-shadow で立体感を出したりするのもおすすめです。また、アクセシビリティの観点から、aria-label 属性で「前のページ」「次のページ」といった説明を追加しておくと、スクリーンリーダー利用者にも優しい設計になります。

  1. CSSとJavaScriptでリスト表示とグリッド表示を切り替える方法【サンプルコード付き】

    Webアプリケーションや管理画面などでは、コンテンツの表示形式を「リスト表示」と「グリッド表示」で切り替えられるUIがよく使われています。本記事では、CSSとJavaScript（バニラJS）だけを使って、ボタンクリックでリスト表示とグリッド表示を切り替える機能を実装する方法を解説します。実装のポイントこの機能は、以下の3つの要素で構成されています。カラムレイアウト：float を使って各カラムを横並びに配置します切り替えボタン：アクティブ状態のスタイルを持つボタンを配置しますJavaScript関数：カラムの幅（width）を変更し、ボタンの active クラスを付け替えますサンプルコード

  2. CSSとJavaScriptで拡張グリッド（クリックで展開するグリッド）を作成する方法

    CSSとJavaScriptを組み合わせることで、カードをクリックすると詳細パネルが展開される「拡張グリッド（Expanding Grid）」を簡単に実装できます。本記事では、3カラム構成のグリッドを例に、具体的な実装手順をわかりやすく解説します。 実装のポイント クリックイベント：各カラムにonclick属性を設定し、クリックされたカラムに対応するタブを開きます。 表示の切り替え：新しいタブを開く前に既存のタブをすべて非表示にすることで、常に1つのタブだけが展開された状態を保ちます。 閉じるボタン：タブ右上の「×」ボタンをクリックするとパネルが閉じ、元のグリッド表示に戻ります。 サンプル