【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

【無料体験・全額返金】圧倒的に効率的なプログラミングスクール

独学でプログラミングを勉強するのは大変じゃないですか?

  • ググるのが面倒
  • エラーの対応に1日消費
  • 重要なコードがわからない

お金はかからないものの、かなり効率が悪いです。

『Time is Money』
時間を節約し、効率的に勉強したいならプログラミングスクールを圧倒的におすすめします。
スクールに通って短期間で集中的に成長しちゃいましょう。

代表的なスクールは以下の2つ。

  • TechAcademy
    web系、アプリ系いずれもOK
    完全オンラインでプログラミングを学習したい方
  • テックキャンプ
    web系、アプリ系いずれもOK
    教室またはオンラインで学習したい方

この2つには以下のような特典もあります。

TechAcademy

  • 1週間の無料体験
  • 1コース申し込むと、もう1コースプレゼント

テックアカデミー

  • 1週間以内に申告あれば全額返金
  • 転職できなかったら全額返金

かなりお得です。

確かにどのスクールも本格的にやれば20~30万くらいかかります。
でも、スキルを身に付けて案件を受注してしまえばすぐに回収できる金額です。

目安の報酬をまとめておくと、

  • ランサーズ:1件10万くらい
  • 中小企業:1件30万くらい
  • 大手企業:桁違い

こんな感じです。
1ヶ月で回収できる料金をケチって、独学をつづけるのはセンスが悪いです。

この無料キャンペーンや全額返金制度はいつまで続くかわかりません。
なので、とりあえず試してみるのが良いかと思います。

TechAcademy:無料で1週間体験
テックキャンプ:全額返金制度

テックキャンプに関しては無料でカウンセリングを受けることができます。
プロのカウンセラーが個別に悩み聞いてくれるので、まずは話をしてみてもいいですね。
(下のバナーから詳細を見れます。)
受講料の割引もあるのでお得です。