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

CSSでinput type="button"をスタイリングする方法

CSSでinput type="button"をスタイリングする

HTMLのinput type="button"は、フォームの送信ボタンやリセットボタンとしても利用できる汎用的なボタン要素です。CSSを組み合わせることで、Webページ上のあらゆるボタンの見た目を自由にカスタマイズできます。

以下のコードでは、属性セレクターinput[type=button]を使用して、ページ内のすべてのボタンに対して一括でスタイルを適用しています。実際にコードを実行して、表示を確認してみてください。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         input[type=button] {
            background-color: orange;
            border: none;
            text-decoration: none;
            color: white;
            padding: 20px 20px;
            margin: 20px 20px;
            cursor: pointer;
         }
      </style>
   </head>
   <body>
      <p>以下のフォームに入力してください</p>
      <form>
         <label for = "subject">科目</label>
         <input type = "text" id = "subject" name = "sub"><br><br>
         <label for = "student">学生名</label>
         <input type = "text" id = "student" name = "stu"><br>
         <input type = "button" value = "ボタン">
      </form>
   </body>
</html>

主なCSSプロパティの解説

  • background-color: orange; … ボタンの背景色をオレンジに設定します。
  • border: none; … デフォルトの枠線を消し、フラットなデザインにします。
  • color: white; … 文字色を白にして、背景色とのコントラストを確保します。
  • padding / margin: … ボタンの内外に余白を設け、押しやすいサイズと配置に調整します。
  • cursor: pointer; … マウスホバー時にカーソルが指の形に変わり、クリックできることを視覚的に伝えます。

ポイント

属性セレクター[type=button]を使うと、クラス名を追加しなくても特定の種類の入力要素だけをまとめて装飾できます。より細かく制御したい場合は、:hoverや:activeなどの擬似クラスを組み合わせると、ホバーやクリック時の変化も表現でき、ユーザー体験の向上につながります。

  1. CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説

    CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-

  2. CSSでラベルのスタイルを設定する方法｜色分けラベルの作り方

    CSSを使用すれば、<span>タグにクラスを割り当てるだけで、色分けされた見やすいラベル（バッジ）を簡単に作成できます。ステータスやカテゴリの表示に役立つため、Webアプリケーションや管理画面などでよく使われるテクニックです。 サンプルコード 以下は、CSSでラベルのスタイルを設定する具体的なコード例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"