【HTML&CSS】background-colorの使い方をわかりやすく説明

こんにちは、@AWAKOJIです。
今日も、薬剤師をしながらプログラミングの勉強をしています。

この記事では、HTMLとCSSを使ってwebサイトに背景の色(background-color)を設定する方法を説明します。説明したあとには、実例としてwebサイト全体に背景色を設定する方法を解説します。

背景色を設定するとガラリとwebサイトのイメージを変えることができるので、ぜひ出来るようになっておきましょう。

参考になれば幸いです。

スポンサーリンク

使用する言語はCSS

背景画像を設定するにはCSSを使います。
CSSとは、webサイトのデザインを担当する言語です。
詳しくはこちらの記事をどうぞ。

CSSとは?書き方を簡単にわかりやすく説明(漫画付)
記事のポイント CSSはWEB上のデザインを担当する言語である プログラミング初心者 『CSS?なんじゃそれ?HTMLとどんな関係があるの?』 こんにちは、AWAKOJIです。 今日も薬剤師をしながらプログラミングの勉...

使用するプロパティはbackground-color

CSSの基本構造は以下の通りです。


セレクタには、表示する場所

プロパティには、表示するもの

値には、表示する内容

を書きます。

そして今回、背景の色を設定するため、プロパティにはbackground-colorを書きます。
つまり背景画像を設定するための基本構造は以下のとおりになります。

background-colorプロパティを使うときの、セレクタと値について説明していきます。

background-colorのセレクタ

background-colorのセレクタには、すべてに要素を書くことができます。

つまり、

body⇒サイト全体に背景色

h1⇒見出しに背景色

table⇒表に背景色

tr⇒表の行ごとに背景色

div⇒ブロックレベル要素に背景色

span⇒インライン要素に背景色

という感じにすべてに場所に背景色を設定できるわけです。

background-colorの値

background-colorで指定できる値は以下の2つです

  • transparent(透明)

それぞれ説明します。

表示したい色を値に書きます。

書き方は、2つあります。

1つ目は、redやblueやyellowといったように色の名前(カラーネーム)を書く方法です。

2つ目は、6ケタ(16進表記)のカラーコード(#000000~#ffffff)で指定する方法です。

あまりマニアックなカラーネームの場合、ブラウザによっては表示されないこともあるので注意しましょう。

transparent(透明)

transparentは透明という意味です。

無色透明で、完全に透けて表示されます。

【実例】サイト全体に背景色を設定する

では、実際にコードを書いてみます。
今回は、webサイト全体に背景色を設定する方法を説明したいと思います。

動画

まず、動画で解説しました。

文章より動画がよければ、ご覧ください。
(僕の初動画なので、声が小さくてわかりづらいかもしれません・・・)

HTMLの書き方

HTMLの書き方は以下の通りです。

背景色を設定する場合、HTMLには特別なことを入力する必要はありません。

ただ、CSSを使うので、headタグ内にCSSファイルを読み込んでおくことが必要です。

CSSの適用方法については下の記事に書いたのでよくわからない方は一読ください。

CSSを反映させる3つの方法を簡単にわかりやすく説明【漫画付】
ブログ初心者 『CSSってどうやってブログに反映させればいいの? だれかわかりやすく教えて。』 こんにちは、AWAKOJIです。今日も薬剤師をやりながらブログを書いています。 ブログの書き方がなんとなくわかってきたとき、次の...

CSSの書き方

CSSの書き方は以下の通りです。

サイト全体に背景色を設定します。

サイト全体は、bodyタグで囲まれています。

そのため、CSSを適用させるのでセレクタ部分はbodyになります。

そして背景色を指定するときに使うbackground-colorを書きます。

今回は、背景色を水色にしたいので値は、aquaと入力します。

結果表示

ブラウザに表示させると、以下のようになります。

※クリックすれば拡大表示されます。

無事、サイト全体に背景色が設定できました。

注意点

サイト全体に背景色を入れる場合、文字色とのバランスを考えるべきです。

あまりきつい色を入れると、文字が読みにくくなります。

今回サンプルで表示したaquaも少し色としては強いので、もう少し弱いazureというのがいいかなと思います。

ブラウザ表示

※クリックすると拡大表示されます。

まとめ

以上、background-colorについて解説しました。

まとめると、

  • 背景色の設定にはCSSを使う
  • プロパティにはbackground-color
  • セレクタはすべての要素
  • 値には色(カラーネーム、カラーコード)、transparent
  • 文字色とのバランスを考える

以上になります。

参考サイト:background-color – MDN – Mozilla

スポンサーリンク

おすすめ記事

フォローする