記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

HTML背景色+背景画像を表示する方法(初心者向け)

背景色、背景画像を指定する方法を紹介。 HTML、CSSを学びたての初心者の方でもこちらの記事をみていただくことで、背景色・背景画像を表示する事ができます。全てサンプルコード付きですので、実際に手を動かして学ぶ事ができますのでご利用ください。

カテゴリ: HTML/CSS

こんにちは!
最近、WEB制作をはじめたけど「背景色ってどうやって表示するの・・?」
「背景画像は表示できるの・・?」「なんとなくは表示できたけど、思ったように表示できない・・!」

そのように悩んでいる初心者WEB製作者の方も多いのではないでしょうか?
背景色、背景画像を表示できるとよりキレイにWEBページを見せる事ができます!
今回は、「背景色の表示方法」「背景画像の表示方法」を中心に詳しく解説していきます。

背景色を指定する方法

背景色の指定方法を解説していきますが、その前にそもそも色(color)について少し触れていきます、知ってる方は読み飛ばして下さい。
色(color)で指定できる色の説明、指定方法の流れで解説していきます。

colorで指定できる色

WEBで色を指定するときに使える記述、主な4種類を解説していきます。

1.カラーネーム 最初から決められている色の名前で、red,blueなど一般的に誰でも連想できる色名です。

red blue orange


2.カラーコード カラーコードは16進数で色を表し、「00,33,66,99,CC,FF」のみを使って色を指定します。カラーネームよりも細かく種類多く色を指定できます。

#FF0000 #0000FF #FF6600

カラーコードは覚える必要はありません、下記を参考にコピペしてみて下さい。 http://www.netyasun.com/home/color.html


3.RGBカラーモデル RGBとは、「R:Red=赤」「G:Green=緑」「B:Blue=青」の3原色を混ぜて作られ様々な色を表現。 rag()の()内に3色の混ぜる色の割合を記入。

rgb(243, 16, 16); rgb(69, 124, 255); rgb(221, 88, 11);

RGBカラーモデルは覚える必要はありません、下記を参考にコピペしてみて下さい。 https://note.cman.jp/color/base_color.cgi


4.RGBAカラーモデル RGBAとは「R:Red=赤」「G:Green=緑」「B:Blue=青」に加えて透明度を指定しします。

rgba(241, 7, 7, 0.59) rgba(30, 122, 255, 0.67) rgba(199, 102, 37, 0.67)

RGBAカラーモデルも覚える必要はありません、下記を参考にコピペしてみて下さい。 https://note.cman.jp/color/base_color.cgi

CSSを指定し背景色を変える方法

CSSを指定し背景色を変更します、CSSプロパティ「background-color」を指定します。

○webページ全体の色を変える方法

サンプルコード表示結果

これを作る↓

テキスト1

テキスト2

テキスト3

テキスト4

テキスト5

HTMLサンプルコード

CSSサンプルコード

※解説
WEBページ全体の色を変更したい場合は、body要素にCSSプロパティ「background-color」を指定します。
「background-color: 〇〇;」〇〇の箇所にお好みの色を指定する事で背景色の指定ができます。

○一部の背景色を変える方法

これを作る↓

テキスト1

テキスト2

テキスト3

テキスト4

テキスト5

HTMLサンプルコード

CSSサンプルコード

※解説
HTMLコード4行目「<p class=”ichigyoume”>テキスト1</p>」、クラス「class=”ichigyoume”」を指定し、CSSで「background-color」を指定する事で、1行目の背景色を変更することができます。
つまり部分的に背景色を変更したい場合は、「背景色を変更したい場所にクラスを指定」→「CSSでbackground-colorを指定」する事で変更する事ができます。

○一部の文字色を変える方法

サンプルコード表記結果

これを作る↓

テキスト1

テキスト2

テキスト3

テキスト4

テキスト5

HTMLサンプルコード

CSSサンプルコード

HTMLコード4行目「<p class=”ichigyoume”>テキスト1</p>」、クラス「class=”ichigyoume”」を指定し、CSSで「color」を指定する事で、1行目の文字色を変更することができます。
つまり部分的に文字色を変更したい場合は、「文字色を変更したい場所にクラスを指定」→「cssでcolorを指定」する事で変更する事ができます。

HTMLにstyleタグを指定して背景色を変更する方法

CSSファイルを使わずに、HTMLにstyleタグを指定して、背景色を変更する方法を紹介します。

○webページ全体の色を変える方法

サンプルコード表記結果

これを作る↓

テキスト1

テキスト2

テキスト3

テキスト4

テキスト5

HTMLサンプルコード

※解説
bodyタグに「styleタグ」を追加し「background-color」を指定しています、「background-color: 〇〇;」の〇〇にお好みの色を指定する事で、背景色の指定をする事ができます。

○一部の背景色を変える方法

サンプルコード表記結果

これを作る↓

テキスト1

テキスト2

テキスト3

テキスト4

テキスト5

HTMLサンプルコード

※解説
HTMLコード4行目「<p “style=”background-color: #FF0000;”>テキスト1</p>」、スタイルタグ「style=”background-color: #FF0000″」を指定し、CSSで「background-color」を指定する事で、1行目の背景色を変更することができます。
つまり部分的に背景色を変更したい場合は、「背景色を変更したい場所にスタイルタグを指定」→「スタイルタグにbackground-colorを指定」する事で変更する事ができます。

○一部の文字色を変える方法

サンプルコード表記結果

これを作る↓

テキスト1

テキスト2

テキスト3

テキスト4

テキスト5

HTMLサンプルコード

※解説
HTMLコード4行目「<p “style=”color: #FF0000;”>テキスト1</p>」、スタイルタグ「style=”color: #FF0000″」を指定する事で、1行目の文字色を変更することができます。
つまり部分的に文字色を変更したい場合は、「文字色を変更したい場所にスタイルタグを指定」→「スタイルタグにcolorを指定」する事で変更する事ができます。

背景画像を指定する方法

サンプルコード表記結果

HTMLサンプルコード

CSSサンプルコード

※解説
body要素に「background-image : url(画像URL)」を指定する事で画面全体に背景画像を表示するこことができています。
「background-image : url(〇〇);」〇〇内に表示したい写真のファイル名もしくは、画像のURLを記述します。
今は画像が繰り返されて表示されています、ここで自分の好みに応じて表示方法を変更する事ができる、プロパティを紹介します。

繰り返し表示のオプション(background-imge: url(画像ファイルのURL);)

4点のオプションがあります。
1.repeat: デフォルト値。縦と横に繰り返す
2.no-repeat: 繰り返し表示されない
3.repeat-x: 縦方向にのみ繰り返す
4.repeat-y:横方向にのみ繰り返す


繰り返し表示させないno-repeat:を設定してみます。
サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
CSSコード3行目に「background-repeat: no-repeat;」プロパティを指定し、写真が繰り返し表示されなくなりました、用途に合わせて各プロパティを指定してみて下さい。

背景画像のサイズを指定する(background-size: サイズの指定;)

auto: 自動算出される、基本は元画像のサイズ
contain: 元画像の縦横比は保持し、要素に元画像が全て収まるように調整される
cover:元画像の縦横比は保持し、要素にちょうどよいサイズのなる
px: pxで大きさを指定できる
%: %で大きさを指定できる

元画像の縦横比は保持し、背景領域が全て隠れるcover要素を指定してみます。
サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
「 background-size: cover;」を指定する事で、横縦比を保持したまま背景領域が全て隠れるサイズ指定(今回はbody要素全体に)写真を表示する事ができました。

まとめ

今回は、「背景色の表示方法」「背景画像の表示方法」を中心に解説してきました。
ポイントをまとめると

背景色表示方法2点
1.CSSを指定し背景色を変える方法
2.HTMLタグにstyleタグを記述し背景色を変える方法


背景画像の表示方法1点
1.CSSプロパティ「background-imegeタグ」を使用し背景画像を指定します。画像の繰り返しや大きさの指定をし、お好みの表示ができます。

いかがだったでしょうか?
背景色、背景画像を表示できるようになると制作の幅がより一層増えます。
今回の記事を参考にしていただけたら幸いです。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。