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

CSSでボタンに色付きの境界線（ボーダー）を追加する方法

ボタンに色付きの境界線を追加したい場合は、CSSの border プロパティを使用します。border プロパティでは、境界線の「太さ」「スタイル」「色」をまとめて指定できるため、1行のコードで簡単にデザインをカスタマイズできます。

borderプロパティの基本構文

border プロパティは以下のように記述します。

border: 太さ スタイル 色;

たとえば border: 3px dashed blue; と指定すると、「太さ3px・破線（dashed）・青色」の境界線が適用されます。スタイルには solid（実線）、dashed（破線）、dotted（点線）、double（二重線）などがあります。

実装例

次のコードは、黄色い背景のボタンに青色の破線ボーダーを追加したサンプルです。

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

コードのポイント解説

  • background-color: yellow; … ボタンの背景色を黄色に設定しています。
  • padding: 20px; … ボタン内側の余白を確保し、押しやすく見やすいサイズにしています。
  • border-radius: 15px; … 角を丸くすることで柔らかい印象を与えています。
  • border: 3px dashed blue; … この記事のメインとなる部分です。太さ3pxの青色の破線ボーダーをボタン全体に適用します。

このように border プロパティを活用すれば、ボタンの輪郭を目立たせたり、サイトのテーマカラーに合わせた装飾を加えたりすることができます。色やスタイル、太さを組み合わせて、自分好みのボタンデザインを作ってみてください。

  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