X
この記事は、経験豊富なwikiHowの編集者と調査員から成るチームによって執筆されています。調査員チームは内容の正確性と網羅性を確認しています。
wikiHowのコンテンツ管理チームは、編集チームが編集した記事を細心の注意を払って精査し、すべての記事がwikiHowの高品質基準を満たしているかどうかを確認しています。
この記事は24,274回アクセスされました。
この記事では、HTMLでボタンの色を変更する方法を紹介します。ボタンの色は、プレーンなHTMLまたはHTML5のCSS(カスケーディングスタイルシート)で変更可能です。
ステップ
方法 1
方法 1 の 2:HTMLで変更する
方法 1
-
1HTMLの本文に<buttonと記述する これは、buttonの開始タグです。HTMLの本文は、<body>タグと</body>タグの間の部分になります。本文とは、HTMLを用いてWebページの表示要素を記述する場所のことです。
-
2buttonタグ内の「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]
-
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:」の後に記述して、ボタンの文字色を指定します。
-
12style要素の後に引用符(")を記述する style要素は、すべてbuttonタグ内の「style=」の後に引用符で囲みましょう。style要素をすべて追加し終わったら、最後に引用符(")を記述してstyle要素を閉じます。
-
13style要素の後に>と記述する buttonの開始タグを閉じます。
-
14buttonタグの後にボタンの文字を記述する 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で変更する
方法 2
-
1HTML文書の先頭に<head>と記述する HTML文書のヘッダを作成します。ヘッダとは、Webページには表示されない情報を記述する場所のことです。ヘッダにはメタデータやページタイトル、スタイルシートが含まれます。
-
2<style>と記述する これは、CSS(カスケーディングスタイルシート)の場所をWebページに追加するためのタグです。このタグは、HTML文書の先頭に記述します。
- HTML文書によっては、外部スタイルシートを用いる場合もあります。その場合は、外部CSSファイルの場所を確認して、その文書のボタンのスタイルシートを編集しなければなりません。
-
3styleタグの後の別の行に.button {と記述する ボタンのスタイルを作成するスタイルシートを開きます。 [2]
- また、.button:hover {を開始タグとして別のスタイルシートを作成することにより、ボタンにカーソルを合わせたときにボタンの色を変更させることも可能です。
-
4background-color:と記述する これは、ボタンの背景色を操作するための要素で、ボタンのスタイルシート内の別の行に記述します。
-
5色名または16進数カラーコードを記述し、その後にセミコロン(;)を付ける ボタンのスタイルシート内の「background-color:」要素の後に記述して、ボタンの背景色を指定します。
- 16進数カラーコードを調べるには、ブラウザからhttps://www.google.com/search?q=color+pickerにアクセスしましょう。色は下のスライドバーで、色合いはウィンドウ内の正円で選択することができます。左サイドバーにある6桁のコード(シャープ記号を含む)を選択してコピーしましょう。
- また、背景色に「transparent(透明)」と記述して背景を見えなくすることもできます。
-
6border-color:と記述する これは、ボタンの枠線の色を変更するための要素で、ボタンのスタイルシート内の別の行に記述します。
-
7色名または16進数カラーコードを記述し、その後にセミコロン(;)を付ける ボタンのスタイルシート内の「border-color:」要素の後に記述して、ボタンの枠線の色を指定します。
- 枠線を消す場合は、「border-color:colorname」要素の代わりにborder:none;と記述しましょう。
-
8color:と記述する これは、ボタンの文字色を操作するための要素で、スタイルシート内の別の行に記述します。
-
9色名または16進数カラーコードを記述し、その後にセミコロン(;)を付ける ボタンのスタイルシート内の「color:」要素の後に記述して、ボタンの文字色を指定します。
-
10別の行に}と記述する ボタンのスタイルシートを閉じます。ボタンは、それぞれに固有の名前をつければ、スタイルシートを複数作成することが可能です。
-
11CSSが完成したら、</style>と記述する スタイルシートをすべて作成し終わったら、別の行に「</style>」と記述して、HTML文書のstyleタグを閉じます。
-
12</head>と記述する HTML文書のヘッダを閉じます。
-
13HTML文書の本文に<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>
広告
出典
このwikiHow記事について
他言語版
English:Change the Button Color in HTML
Bahasa Indonesia:Mengubah Warna Tombol pada HTML
Português:Alterar a Cor de um Botão em HTML
Tiếng Việt:Đổi màu button trong HTML
このページは 24,274 回アクセスされました。
この記事は役に立ちましたか?
広告