HTMLボタンにカスタムカラーを設定したいですか？いつものグレーのボタンが嫌なら、HTMLでもCSS（カスケーディングスタイルシート）でも簡単に違う色を作ることができます。このWikiHowでは、HTMLボタンの色を変更する方法をご紹介します。
方法1
HTMLを使う
-
HTMLの本文に<button>と入力します。これがHTMLコードのボタンタグの始まりです。HTMLのボディとは、<body>タグと</body>タグの間の部分のことです。ボディは、HTMLを使ってウェブ・ページの目に見える要素を配置する場所です。
-
ボタン・タグの "button "の後にstyle=と入力します。これは、ボタン・タグにスタイル要素があることを示します。すべてのスタイル要素は「=」記号の後に配置されます。
-
イコール（=）記号の後に引用符（"）を追加します。HTMLのボタン・タグのスタイル要素は、すべて引用符で囲んでください。
-
style="の後の引用符の中にbackground-color:と入力します。この要素はボタンの背景色を変更するために使用します。
-
background-color:」の後に色名または16進コードを入力します。色の名前（例：青）または16進数を入力することができます。
- 16進数コードを見つけるには、ウェブブラウザにアクセスしてください。下部のスライダーバーを使って色を選ぶ。ウィンドウの丸で色合いを選択する。左側のサイドバーにある6桁のコード（ポンド記号を含む）をハイライトしてコピーし、ボタン・タグに貼り付けます。
- 背景色として "transparent "を使用することもできます。
-
.HTMLボタン・タグ内の異なるスタイル要素を区切るには、セミコロン（;）を使用します。
-
style="の後の引用符の中に border-color: と入力します。この要素は、ボタンの周りの境界線の色を決定するために使用されます。style="の後の引用符の中には、どのような順番でスタイル要素を記述してもかまいません。各要素はセミコロン（;）で区切る必要があります。
-
ボーダーカラーの色名または16進コードを入力します。ボーダーの色名または16進コードは "border-color: "要素の後に記述します。
- ボーダーを消したい場合は、"border-color: "要素の代わりにborder:noneと入力します。
-
ボーダー・カラーの後にセミコロン（;）を入力します。セミコロンを使って、HTMLボタン・タグ内の異なるスタイル要素を区切ります。
-
style="の後に引用符で囲んでcolor:と入力します。この要素は、.HTMLタグのテキストの色を変更するために使用されます。 style="の後の引用符の中に、スタイル要素を任意の順序で配置することができます。各要素はセミコロン（;）で区切る必要があります。
-
色の名前または16進コードを入力します。これはstyle要素の "color: "の後に記述します。これでボタンのテキストの色が決まります。
-
すべてのスタイル要素の後に引用符（"）を入力します。すべてのスタイル要素は、ボタン・タグの「style=」の後に引用符で囲んでください。すべてのスタイル要素を追加し終えたら、最後に引用符（"）を入力してスタイル要素を閉じます。
-
スタイル要素の後に > と入力します。これで冒頭のボタンタグが閉じます。
-
ボタンタグの後にボタンテキストを入力します。ボタンの開始タグを作成し終えたら、タグの後にボタンに入れたいテキストを入力します。
-
ボタンのテキストの後に</button>と入力します。これがボタンの閉じタグです。これでボタンは完成です。HTMLコードは次のようになります。<!DOCTYPE html> <html> <body> <button style="background-color:red;border-color:blue;color:white">ボタンのテキスト</button> </body> </html>
方法2
CSSを使う
-
.HTML文書の先頭に<head>と入力する。これでHTML文書のheadが作成されます。ドキュメントのheadは、ウェブページに表示されない情報が置かれる場所です。これにはメタデータ、ページのタイトル、スタイルシートなどが含まれます。
-
<style>と入力します。このタグは、ウェブ・ページにカスケード・スタイル・シート（CSS）の場所を追加します。このセクションはHTML文書の先頭に記述します。
- HTML文書の中には、外部のスタイル・シートを使用するものもあります。その場合は、外部CSSファイルの場所を見つけ、そのドキュメント上でボタン・スタイル・シートを編集する必要があります。
-
スタイル・セクションの後に.button {と入力してください。これで、スタイルを作成するボタンのスタイル・シートが開きます。
- また、.button:hover {を開始タグとして別のスタイル・シートを作成することで、マウス・カーソルをボタンの上に置いたときにボタンの色が変わるようにすることもできます。
-
background-color:と入力します。これはボタン・スタイル・シートの別の行に記述します。この要素はボタンの背景色を制御します。
-
色の名前または16進数コードの後にセミコロン（;）を入力します。ボタン・スタイル・シートの "background-color: "要素の後に入力します。これはボタンの背景色を指定します。
- 16進コードを見つけるには、ウェブ・ブラウザで「16進コード」にアクセスしてください。下部にあるスライダー・バーを使って色を選びます。ウインドウ内の円を使用して色合いを選択します。左側のサイドバーにある6桁のコード（ポンド記号付き）をハイライトしてコピーします。
- 背景を見えなくするには、背景色として「transparent」と入力することもできます。
-
border-color: と入力します。この要素はボタンの周りのボーダーの色をコントロールします。ボタンのスタイル・シートの別の行に入力してください。
-
色の名前または16進数コードの後にセミコロン（;）を続けて入力します。これでボタンの周りのボーダーの色が決まります。これはボタンのスタイル・シートの "border-color: "要素の後に記述します。
- 枠線を消したい場合は、"border-color:colorname "要素の代わりにborder:none;と入力します。
-
color:」と入力します。これをスタイル・シート内の別の行にタイプします。この要素はボタンのテキストの色を制御します。
-
色の名前または16進数コードの後にセミコロン（;）を続けて入力します。これでボタン内のテキストの色が決まります。ボタンのスタイル・シートでは、"color: "要素の後に記述します。
-
別の行に「}」と入力します。これでボタンのスタイル・シートが閉じます。各ボタンに固有の名前を付ける限り、複数のボタン・スタイル・シートを作成することができます。
-
CSSが完成したら</style>と入力します。すべてのスタイル・シートの作成が終わったら、別の行に「</style>」と入力して、HTML文書のスタイル・セクションを閉じます。
-
</head>とタイプする。これでHTML文書のheadが閉じます。
-
HTML文書の本文に<a href="url" >button text</a>と入力します。これで、HTML文書のスタイル・セクションで指定されたスタイル・シートを使って、HTMLの可視部分にボタンが追加されます。url "はボタンがリンクするウェブアドレスに置き換えてください。HTML文書の本文は、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" >ホーム</a> </body> </html>
コメント
最新を表示する
NG表示方式
NGID一覧