HTMLで背景色を自由自在に変更しよう!【サンプルコード付き】
  • facebookページ
  • twitterページ
  • 2020.06.30

    HTMLで背景色を自由自在に変更しよう!【サンプルコード付き】

    背景色を変更する

    背景色はbodyタグにbgcolor属性を指定することで変更可能です。

    ただし、HTML5でこの指定方法は非推奨になっています。

    背景色を指定する場合は、CSSで指定しましょう。

    背景色をCSSで指定する

    背景色をCSSで指定するには「background-colorプロパティ」を使用します。

    色を指定するにはカラーコードやカラーネームを使いましょう。

    カラーコードは、16進数で「#fff(白)」や「#000(黒)」といったように指定します。

    カラーコードは覚える必要はなく、Googleなどで調べると色に対応したカラーコードが見つかるでしょう。

    もしくは、以下のようなサイトで気に入った色を使うのもよいですね。

    HTMLカラーコード: WEB色見本 原色大辞典

     

    カラーネームは、そのままの意味で「red」や「blue」といった色の名前で指定する方法です。

    色の名前で記述するので、ソースコードをパッと見てどんな配色にしているのかがわかりやすいといったメリットがあります。

    カラーネームも次のようなサイトで調べて使うとよいでしょう。

    カラーネーム 147色

     

    カラーコード、カラーネーム以外にも「rgb(a)」「hsl(a)」で指定も可能です。

    rgb(a)は、red, green, blueの三原色を混ぜてできる加法混合方式です。

    red, green, blueそれぞれの色を0〜255の値を指定することで、ひとつのが決まります。

    rgbの後のaは「アルファ(Alpha)」の略で色の透過度を0.1〜1.0で指定できます。

     

    一方、hsl(a)は色相(hue)、彩度(saturation)、輝度(lightness)の3要素で色を指定する方法です。

    色相0~360°の角度の値で指定し、彩度と輝度は0~100%の割合で指定します。

    hslのaもrgbaと同じく色の透過度を指定可能です。

    背景色の指定で覚えておきたい範囲について

    Webページ全体の背景色を指定するのであれば、body要素にbackground-colorプロパティを指定すればOKです。

    そうではなく、ある一定の範囲の背景色を指定したい場合は、任意の要素にbackground-colorプロパティで色を指定しましょう。

    背景色の指定で覚えておきたい範囲について

    背景色を全体に指定する

    背景色を画面全体に指定したい場合は、bodyタグにbackground-colorプロパティを指定すればOKでした。

    ここでは、CSS以外での指定方法について紹介します。

    「bodyタグに直接指定」と「headタグ内にstyleで指定」する方法です。

    bodyタグにbackground-colorプロパティを直接指定するには、次のように記述します。

    headタグ内にstyleで指定するには、次のように記述します。

    記述する場所がheadタグ内なだけで、基本的な記述方法はCSSと同じです。

    どれも背景全体の色が変更できたはずです。

    背景色を一部に指定する

    背景色を全体ではなく一部だけに指定したい場合はどうすればよいでしょうか。

    ひとつは前述したように、任意の要素にbackground-colorプロパティを指定します。

    しかし、例えば画像のように同じ要素内で左右異なる色を指定したい場合もあるかもしれません。

    背景色を一部に指定する

    このように背景色を指定するには、次のように記述します。

    イメージとしては、緑の正方形を作り、その左側にオレンジを被せる感じです。

    少し指定が複雑ですが、覚えておくとページアレンジが効くのでオススメの方法です。

    背景色をグラデーションにする

    背景色がグラデーションになっているサイトは、一気におしゃれ度が増して洗練されたサイトに近づきますよね。

    一見難しそうに見えるグラデーションですが、実装はそんなに難しくありません。

    背景色をグラデーションにするには、background プロパティに「linear-gradient」の値を指定しましょう。

    linear-gradient()関数は2つ以上の色を指定し、連続的な直線の変化から構成される画像を生成する関数のことです。

    そのため、グラデーション以外にもさまざまな画像を作ることができます。

    linear-gradientは次のように記述します。

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

    背景色をグラデーションにする

    角度も指定することでグラデーションのかかり方を変えることも可能です。

    背景色をグラデーションにする

    グラデーションの色を2色以上に増やすこともできます。また、グラデーションを開始する位置も指定可能です。

    また、linear-gradientではなく「radial-gradient」を使うと円形のグラデーションになります。

    背景色をグラデーションにする

    文字の背景色を変更する

    ここまでページ全体や要素の背景色を見てきましたが、文字(テキスト)の背景色も変更可能です。

    変更したい文字要素にbackground-colorプロパティを指定しましょう。

    サンプルコードで確認してみます。

    文字の背景色を変更する

    colorプロパティは文字色を指定するプロパティなので、背景色を変えたい場合はbackground-colorプロパティを使ってください。

    文字の背景色であってもグラデーションをかけることは可能です。

    文字の背景色を変更する

    背景色の範囲を指定する

    背景の適用範囲を指定するには「background-clipプロパティ」を使用します。

    background-clipプロパティで指定できる値は、以下の通りです。

    • border-box:要素の境界ボックスの内部のみ背景を表示
    • padding-box :要素のパディングボック の内部のみ背景を表示
    • content-box :要素のコンテンツボックスの内部のみ背景を表示

    これらの値はカンマ区切りで複数指定もできます。

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

    背景色の範囲を指定する

    それぞれ表示範囲が異なるのがわかります。



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

    この記事をシェア

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









    ABOUT US

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

    READ MORE