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

CSSでボタンに角丸を追加する方法【border-radiusの使い方】

ボタンに丸みを帯びた角（角丸）を追加するには、CSSの border-radius プロパティを使用します。このプロパティに値を指定するだけで、四隅の角が滑らかに丸くなり、デザインの印象が柔らかくモダンになります。

基本の書き方

border-radius の値には、ピクセル（px）、パーセンテージ（%）、em などの単位を指定できます。値が大きいほど、角の丸みが強くなります。

border-radius: 15px;

実装例

以下のコードを実行すると、角丸のボタンを確認できます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .button {
            background-color: yellow;
            color: black;
            text-align: center;
            font-size: 15px;
            padding: 20px;
            border-radius: 15px;
         }
      </style>
   </head>
   <body>
      <h2>実行結果</h2>
      <p>下のボタンをクリックして結果を確認してください：</p>
      <button class = "button">Result</button>
   </body>
</html>

border-radiusの応用テクニック

1. 値を変えて丸みを調整する

値を大きくするほど角は丸くなります。例えば border-radius: 50px; と指定すると、より大きな丸みが得られます。

2. 完全な円形のボタンを作る

正方形のボタンに border-radius: 50%; を指定すると、完全な円形のボタンになります。

.circle-button {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

3. 四隅ごとに個別に丸みを設定する

スペース区切りで4つの値を指定すると、左上・右上・右下・左下の順にそれぞれ異なる丸みを設定できます。

border-radius: 15px 0 15px 0;

まとめ

ボタンの角丸は border-radius プロパティ一行で簡単に実装できます。値や単位を工夫することで、ピル型・円形などさまざまなデザインに対応できるので、ぜひ活用してみてください。

  1. CSSで検索ボタンを作成する方法｜サンプルコード付きで解説

    CSSを使えば、テキスト入力欄と検索アイコンボタンを組み合わせた、おしゃれで使いやすい検索フォームを簡単に作成できます。ここでは、Font Awesomeのアイコンを活用した検索ボタンの実装例を、実際のコードとともに紹介します。実装例（サンプルコード）以下は、CSSを使用して検索ボタンを作成するためのコード例です。<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1">

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

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