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

PDF形式でダウンロード

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

方法 1

方法 1 の 2:

HTMLで変更する

PDF形式でダウンロード

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

PDF形式でダウンロード

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