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

CSSで角丸のアクティブボタンとホバーボタンを作成する方法

Webサイトのナビゲーションやページネーションなどで活躍する「角丸ボタン」。CSSを使えば、画像やJavaScriptに頼らず、アクティブ状態とホバー状態を持つ角丸ボタンを簡単に作成できます。

ホバー効果を追加するには:hoverセレクターを使用し、角丸のデザインにはborder-radiusプロパティを使用します。以下のコードを実行して、実際の動作を確認してみてください。

使用する主なCSSの仕組み

:hoverセレクター

マウスカーソルが要素の上に乗ったときのスタイルを定義します。今回の例では「a:hover:not(.active)」という書き方で、アクティブなリンク以外にだけホバー効果を適用しているのがポイントです。

border-radiusプロパティ

要素の四隅を丸くするためのプロパティです。値が大きいほど丸みが強くなり、たとえば「50%」を指定すると完全な円形になります。ここでは「5px」を指定して、控えめで洗練された角丸を実現しています。

実装例

<!DOCTYPE html>
<html>
   <head>
      <style>
         .demo {
            display: inline-block;
         }
         .demo a {
            color: red;
            padding: 5px 12px;
            text-decoration: none;
            border-radius: 5px; /* 角丸を設定 */
         }
         .demo a.active {
            background-color: orange;
            color: white;
            border-radius: 5px;
         }
         .demo a:hover:not(.active) {
            /* アクティブ以外のリンクにマウスが乗ったとき */
            background-color: yellow;
         }
      </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" class="active">Quiz4</a>
         <a href="next.html">></a>
      </div>
   </body>
</html>

コードのポイント解説

  • display: inline-block; … インライン要素であるaタグにpaddingを正しく反映させるために指定しています。
  • .demo a.active … 現在閲覧中のページ（Quiz4）を示すリンクに、オレンジ色の背景と白い文字を設定しています。
  • .demo a:hover:not(.active) … アクティブ以外のリンクにマウスが乗った際だけ背景色を黄色へ変化させます。これにより、ユーザーは現在位置を見失うことなく操作できます。
  • border-radius: 5px; … 通常時・アクティブ時の両方に角丸を適用し、デザイン全体に統一感を持たせています。

このように:hoverセレクターとborder-radiusプロパティを組み合わせるだけで、視認性が高く使いやすいナビゲーションボタンを純粋なCSSのみで構築できます。配色や角丸の大きさを調整すれば、さまざまなサイトのデザインに合わせたカスタマイズも自由自在です。

  1. HTMLとCSSでサインアップフォームを作成する方法【初心者向け】

    HTMLとCSSを組み合わせることで、モダンで使いやすいサインアップ（新規登録）フォームを簡単に作成できます。この記事では、メールアドレスとパスワードの入力欄、「ログイン状態を保持」チェックボックス、さらに登録・キャンセルボタンを備えた実用的なフォームを、実際のコード例とともにわかりやすく解説します。 サインアップフォームの完全なコード例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> body{ font-family: Seg

  2. CSSでボタンを上下左右の中央に配置する方法【Flexbox活用】

    CSSでボタンを垂直方向・水平方向の中央に配置するには、Flexbox（フレックスボックス）を使うのが最も簡単で確実な方法です。親要素にdisplay: flex;を指定し、justify-content: center;で水平方向の中央揃え、align-items: center;で垂直方向の中央揃えを実現できます。 コード例 <!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Ve