PDF形式でダウンロード PDF形式でダウンロード

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

方法 1
方法 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 の 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;
          }
        </style>
      </head>
       <body>
          <a href="https://www.wikihow.com" class="button">Home</a>
       </body>
    </html>
    
    広告

関連記事

USBメモリーに音楽を入れるUSBメモリーに音楽を入れる
Nintendo SwitchをDiscordに配信するNintendo SwitchをDiscordに配信する
HPでスクリーンショットを撮るHPでスクリーンショットを撮る
Windows PCでコマンドプロンプトからexeを実行するWindows PCでコマンドプロンプトからexeを実行する
2台のパソコンを接続する2台のパソコンを接続する
マウスの代わりにキーボードでクリックするマウスの代わりにキーボードでクリックする
ノートパソコンのカメラで写真を撮るノートパソコンのカメラで写真を撮る
AdBlockを無効にするAdBlockを無効にする
2台のモニターを設定する2台のモニターを設定する
LANケーブルで2台のパソコンを接続するLANケーブルで2台のパソコンを接続する
ゼロになったノートパソコンのバッテリーを復活させるゼロになったノートパソコンのバッテリーを復活させる
パソコンにヘッドセットを接続するパソコンにヘッドセットを接続する
特定のウェブサイトにアクセスできない問題を解決する特定のウェブサイトにアクセスできない問題を解決する
ワイヤレスキーボードをパソコンに接続するワイヤレスキーボードをパソコンに接続する
広告

このwikiHow記事について

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

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

広告