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

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

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

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

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

関連記事

How to

USBメモリーに音楽を入れる

How to

特定のウェブサイトにアクセスできない問題を解決する

How to

HPでスクリーンショットを撮る

How to

ファンクションキーを解除する

How to

ノートパソコンのカメラで写真を撮る

How to

パソコンにヘッドセットを接続する

How to

Windows PCでコマンドプロンプトからexeを実行する

How to

Chromeでタブを切り替える

How to

CapsLockを解除する

How to

大容量の動画ファイルをメールで送る

How to

Webページの画像を一括保存する

How to

パソコンのRAMを確認する

How to

ゼロになったノートパソコンのバッテリーを復活させる

How to

パソコンにBluetoothが搭載されているかを確認する
広告

このwikiHow記事について

Travis Boylls
共著者 ::
IT専門家
この記事の共著者 : Travis Boylls. テクノロジーに関する記事の執筆、ソフトウェアー関連のカスタマーサポート、そしてグラフィックデザインの実務経験を持つトラヴィス・ボイルスは、wikiHowにてテクノロジー記事の制作と編集者の業務を担当しています。パイクスピーク・コミュニティー・カレッジにてグラフィックデザインを学び、Windows、macOS、Android、iOS、Linuxのシステムに精通しています。
カテゴリ: コンピューター
このページは 547 回アクセスされました。

この記事は役に立ちましたか?

広告