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

CSSでボタンの背景色を変更する方法【初心者向け解説】

CSSでボタンの背景色を変更するには、background-colorプロパティを使用します。このプロパティに任意のカラーコードやカラー名を指定するだけで、ボタンの見た目を簡単にカスタマイズできます。

background-colorプロパティの基本

background-colorは、要素の背景色を設定するためのCSSプロパティです。ボタン以外にも、divやリンクなど、あらゆるHTML要素に適用できます。値には「yellow」のようなカラー名のほか、「#ff0000」のような16進数カラーコードや、「rgb(255, 255, 0)」のようなRGB値も指定可能です。

サンプルコード

以下のコードを実行すると、黄色い背景のボタンが表示されます。.btnクラスに対して背景色、文字色、テキストの配置、フォントサイズをまとめて指定しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .btn {
            background-color: yellow; /* 背景色を黄色に設定 */
            color: black;             /* 文字色を黒に設定 */
            text-align: center;       /* テキストを中央揃え */
            font-size: 13px;          /* フォントサイズを13pxに */
         }
      </style>
   </head>
   <body>
      <h2>実行結果</h2>
      <p>下のボタンをクリックして結果をご確認ください：</p>
      <button class = "btn">Result</button>
   </body>
</html>

ポイント解説

  • background-color：ボタンの背景色を指定します。
  • color：ボタンの文字色を指定します。背景色とのコントラストを意識すると読みやすくなります。
  • text-align：ボタン内のテキスト位置を調整します。
  • font-size：文字サイズを変更できます。

ホバー時（マウスオーバー時）に色を変えたい場合は、:hover疑似クラスを使って.btn:hover { background-color: orange; }のように指定すると、よりインタラクティブなボタンを作成できます。

  1. CSSでプレースホルダーの色を変更する方法｜::placeholder疑似要素の使い方

    CSSで入力フォームのプレースホルダー（placeholder）の文字色を変更するには、::placeholder 疑似要素を使用します。ただし、ブラウザによって対応状況が異なるため、Internet Explorer や旧 Microsoft Edge 向けのベンダープレフィックスも併せて指定しておくと、より多くの環境で意図した色が反映されます。それぞれのセレクタの役割は以下の通りです。::placeholder … 標準的な疑似要素（Chrome・Firefox・Safari などの主要ブラウザに対応）:-ms-input-placeholder … Internet Explorer 1

  2. CSSのcaret-colorプロパティでキャレット（テキストカーソル）の色を変更する方法

    テキスト入力時に表示される挿入キャレット（テキストカーソル）の色を変更するには、CSSのcaret-colorプロパティを使用します。このプロパティを使うことで、input要素やtextarea要素などの編集可能な要素において、デフォルトの黒いカーソルを任意の色にカスタマイズできます。caret-colorプロパティの基本caret-colorプロパティには、以下のような値を指定できます。任意の色：red、chartreuse、#ff0000 などの色名やカラーコードtransparent：キャレットを非表示にする（透明化）auto：ブラウザのデフォルト設定に従う例1：キャレットの色を変更する