HTMLでボタンの色を変更する方法

PDF形式でダウンロード

共著者 : Travis Boylls

PDF形式でダウンロード

この記事では、HTMLでボタンの色を変更する方法を紹介します。ボタンの色は、プレーンなHTMLまたはHTML5のCSS（カスケーディングスタイルシート）で変更可能です。

方法 1

方法 1 の 2:
HTMLで変更する

1
HTMLの本文に<buttonと記述する　これは、buttonの開始タグです。HTMLの本文は、<body>タグと</body>タグの間の部分になります。本文とは、HTMLを用いてWebページの表示要素を記述する場所のことです。
2
buttonタグ内の「button」の後にstyle=と記述する　これは、buttonタグにstyle要素を与えるということです。style要素は、すべて「=」記号の後に記述します。
3
等号（=）の後に引用符（"）を付ける　buttonタグ内のstyle要素は、すべて引用符で囲みましょう。
4
「style=」の後の引用符にbackground-color: と記述する　これは、ボタンの背景色を変更するための要素です。
5
「background-color:」の後に色名または16進数カラーコードを記述する　色名（「blue」など）または16進数カラーコードを記述してもかまいません。
- 16進数カラーコードを調べるには、ブラウザからhttps://www.google.com/search?q=color+pickerにアクセスしましょう。色は下のスライドバーで、色合いはウィンドウ内の正円で選択することができます。左サイドバーにある6桁のコード（シャープ記号を含む）を選択してコピーし、buttonタグに貼り付けましょう。
- また、背景色を「透明」にすることもできます。^{[1]
  X
  出典文献}
6
背景色の後にセミコロン（;）を記述する　buttonタグ内の各style要素をセミコロンで区切ります。
7
「style=」の後の引用符にborder-color:と記述する　これは、ボタンの枠線の色を指定するための要素です。「style=」の後の引用符の中には、style要素を任意の順番で記述してもかまいません。ただし、各要素はセミコロン（;）で区切る必要があります。
8
枠線の色の色名または16進数カラーコードを記述する　枠線の色名または16進数カラーコードは、「border-color:」要素の後に記述します。
- 枠線を消す場合は、「border-color」要素の代わりにborder:noneと記述しましょう
9
枠線の色の後にセミコロン（;）を記述する　buttonタグ内の各style要素をセミコロンで区切ります。
10
「style=」の後の引用符にcolor: と記述する　これは、ボタンの文字色を変更するための要素です。「style=」の後の引用符の中には、style要素を任意の順番で記述してもかまいません。ただし、各要素はセミコロン（;）で区切る必要があります。
11
色名または16進数カラーコードを記述する　style要素の「color:」の後に記述して、ボタンの文字色を指定します。
12
style要素の後に引用符（"）を記述する　style要素は、すべてbuttonタグ内の「style=」の後に引用符で囲みましょう。style要素をすべて追加し終わったら、最後に引用符（"）を記述してstyle要素を閉じます。
13
style要素の後に>と記述する　buttonの開始タグを閉じます。
14
buttonタグの後にボタンの文字を記述する　buttonの開始タグを作成し終わったら、ボタンに入れる文字をタグの後に記述します。
15
ボタンの文字の後に</button>と記述する　これは、buttonの終了タグであり、記述することでボタンが完成します。HTMLコードは以下のようになります。
```
<!DOCTYPE html>
<html>
<body>
<button style="background-color:red; border-color:blue; color:white">ボタンの文字</button>
</body>
</html>
```
広告

方法 2

方法 2 の 2:
CSSで変更する

1
HTML文書の先頭に<head>と記述する　HTML文書のヘッダを作成します。ヘッダとは、Webページには表示されない情報を記述する場所のことです。ヘッダにはメタデータやページタイトル、スタイルシートが含まれます。
2
<style>と記述する　これは、CSS（カスケーディングスタイルシート）の場所をWebページに追加するためのタグです。このタグは、HTML文書の先頭に記述します。
- HTML文書によっては、外部スタイルシートを用いる場合もあります。その場合は、外部CSSファイルの場所を確認して、その文書のボタンのスタイルシートを編集しなければなりません。
3
styleタグの後の別の行に.button {と記述する　ボタンのスタイルを作成するスタイルシートを開きます。 ^{[2]
X
出典文献}
- また、.button:hover {を開始タグとして別のスタイルシートを作成することにより、ボタンにカーソルを合わせたときにボタンの色を変更させることも可能です。
4
background-color:と記述する　これは、ボタンの背景色を操作するための要素で、ボタンのスタイルシート内の別の行に記述します。
5
色名または16進数カラーコードを記述し、その後にセミコロン（;）を付ける　ボタンのスタイルシート内の「background-color:」要素の後に記述して、ボタンの背景色を指定します。
- 16進数カラーコードを調べるには、ブラウザからhttps://www.google.com/search?q=color+pickerにアクセスしましょう。色は下のスライドバーで、色合いはウィンドウ内の正円で選択することができます。左サイドバーにある6桁のコード（シャープ記号を含む）を選択してコピーしましょう。
- また、背景色に「transparent（透明）」と記述して背景を見えなくすることもできます。
6
border-color:と記述する　これは、ボタンの枠線の色を変更するための要素で、ボタンのスタイルシート内の別の行に記述します。
7
色名または16進数カラーコードを記述し、その後にセミコロン（;）を付ける　ボタンのスタイルシート内の「border-color:」要素の後に記述して、ボタンの枠線の色を指定します。
- 枠線を消す場合は、「border-color:colorname」要素の代わりにborder:none;と記述しましょう。
8
color:と記述する　これは、ボタンの文字色を操作するための要素で、スタイルシート内の別の行に記述します。
9
色名または16進数カラーコードを記述し、その後にセミコロン（;）を付ける　ボタンのスタイルシート内の「color:」要素の後に記述して、ボタンの文字色を指定します。
10
別の行に}と記述する　ボタンのスタイルシートを閉じます。ボタンは、それぞれに固有の名前をつければ、スタイルシートを複数作成することが可能です。
11
CSSが完成したら、</style>と記述する　スタイルシートをすべて作成し終わったら、別の行に「</style>」と記述して、HTML文書のstyleタグを閉じます。
12
</head>と記述する　HTML文書のヘッダを閉じます。
13
HTML文書の本文に<a href="url" class="button">ボタンの文字</a>と記述する　HTML文書のstyleタグで指定したスタイルシートを用いて、HTMLの表示部分にボタンを追加します。「url」はボタンのリンク先URLに置き換えましょう。HTML文書の本文は、<body>タグと</body>タグの間に記述します。HTMLコードは以下のようになります。
```
<!DOCTYPE html>
<html> 
  <head>
    <style>
     .button {
      background-color:blue;
      border-color:red;
      color:white;
      }
    </style>
  </head>
   <body>
      <a href="https://www.wikihow.com" class="button">Home</a>
   </body>
</html>
```
広告