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

CSSで境界線付きボタングループを作成する方法

CSSの border プロパティを使用すると、境界線（ボーダー）付きのボタングループを簡単に作成できます。ボタンを横並びに配置しながら、それぞれに枠線を設定することで、見た目が統一されたナビゲーションやツールバーのようなUIを実現できます。

以下のコードを実行して、実際の表示結果を確認してみましょう。

サンプルコード

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

コードのポイント

  • border: 3px solid blue; — 各ボタンに太さ3pxの青色の実線の境界線を設定しています。
  • float: left; — ボタンを横方向に並べて配置するために使用しています。
  • padding: 20px; — ボタン内部に余白を持たせ、クリックしやすい大きさにしています。
  • .mybtn — ボタングループを囲む親要素のクラスで、背景色をオレンジ色に変更しています。

このように、border プロパティと float を組み合わせるだけで、シンプルな境界線付きボタングループを作成できます。デザインに合わせて、境界線の色や太さ、背景色を自由に変更してみてください。

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

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

  2. CSSだけでトグルスイッチ（オン／オフボタン）を作成する方法

    CSSだけを使ってトグルスイッチ（オン／オフボタン）を作成する方法を紹介します。チェックボックスと <span> 要素を組み合わせることで、JavaScriptに頼らずに滑らかなアニメーション付きのスイッチを実装できます。 完成コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>