HTML要素のcolorを変更してみよう!文字や背景色に色を指定する方法!
  • facebookページ
  • twitterページ
  • 2020.02.27

    HTML要素のcolorを変更してみよう!文字や背景色に色を指定する方法!

    HTMLでWebサイトを作成する際、デザインが単調だとユーザーがページから離脱してしまう確率が高まる傾向にあります。

    本記事では、Webサイトデザインの基本でもある文字や背景色のカラー変更の方法について解説していきます。

    HTMLで文字のcolorを変更しよう


    まずはHTMLで文字のcolorを変更する方法についてご紹介していきたいと思います。

    「CSSのcolorプロパティ」を利用する方法と「fontタグのcolor属性」を利用する方法が一般的に利用されています。

    CSSのcolorプロパティで変更する

    HTML5で推奨されているCSSのcolorプロパティを使用して文字の色を変更してみたいと思います。

    サンプルではHTMLにdivタグを使用していますが、他の様々な要素に対してcolorプロパティを利用することが可能です。

    index.html

    style.css

    実行した結果が下記の通りとなります。

    文字列の一部だけ色を変更する方法

    文字列の一部だけ色を変更する場合、spanタグをうまく利用して変更する方法が一般的です。

    index.html

    style.css

    実行した結果は下記の通りです。

    fontタグのcolor属性を利用する

    HTMLの文字色を変更する場合、fontタグを使って文字を表示しているのであれば、color属性を利用する方法が一般的です。

    ポテパンダの一言メモ

    HTML5ではfontタグを廃止しています。
    利用自体は出来るため既存コードに対応するための知識として紹介していますが、新規プログラム作成時に利用するのは避けましょう。

    サンプルコードで確認してみましょう

    index.html

    実行した結果が下記の通りです。

    HTMLで背景色のcolorを変更しよう


    次にHTMLで背景色のcolor変更をご紹介していきたいと思います。

    テキストの色変更と同様、利用することも多いため覚えておきましょう。

    bodyタグに背景色を設定しよう

    まず画面全体のテーマとなる色を決定する際、bodyタグの背景色を設定します。

    「bgcolor」属性に任意の色を指定することで、背景色を変更することが可能です。

    index.html

    実行した結果が下記の通りです。

    divタグやpタグに背景色を設定する方法

    HTMLではbodyタグの背景色だけでなく様々な要素の背景色を変更することが可能です。

    CSSのプロパティで「background-color」を利用します。

    ポテパンダの一言メモ

    サンプルでは背景色が変更されていることを判断しやすいようにwidth:100%を指定しています。

    index.html

    style.css

    実行した結果が下記の通りです。

    HTMLで指定出来るcolorタイプ


    HTML要素に対する色の指定方法を各種ご紹介してきましたが、colorプロパティに指定する方法がいくつかあるため最後に説明しておきたいと思います。

    頻繁に利用されるのは「カラーネーム」「カラーコード」「RGB」の3種類です。

    本記事でご紹介したサンプルコードを組み換えて動作を確認してみてください。

    カラーネーム

    カラーネームは今回ご紹介したサンプルコードでも利用していた「red」「yellow」「grey」などの英単語の色名を直接指定する方法です。

    最も手軽で分かりやすい方法ですが、後述する2つに比べると細かい色の調整が出来ないというデメリットもあります。

    カラーコード

    カラーコードはWebサイト上で表現される色を指定するためのコードで、「#」から始まる6桁の16進数で定義されます。

    代表例としては、赤を表す場合「#FF0000」、黄色を表す場合「#FFFF00」のように指定することが可能です。

    RGB

    RGBでは、光の3原色である「赤」「緑」「青」の数値を「0~225」までの値を定義することで色を指定する方法です。

    「RGB(赤の数値, 緑の数値, 青の数値)」のように指定します。

    具体的なサンプルとしては、白色を作りたい場合には「RGB(255, 255, 255)」と指定、黒色を作りたい場合には「RGB(0, 0, 0)」のように指定することでWebサイト上に任意の色を表示することが可能となります。

    さいごに:HTMLでcolorを使いこなし読みやすいサイトデザインを意識しよう


    本記事では、HTML要素に対し色(color)を変更する様々な方法についてご紹介してきました。

    Webサイト作成において、デザインは非常に重要な役割を担っており、プログラマー自身がデザインしない場合でもコーティングするためにcolorの使い方は覚えておかなければならない必須知識の1つです。

    今回ご紹介したサンプルコードの設定を自分自身で変更して、HTMLにおけるcolorの設定方法をしっかりと把握してみてください。



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE