背景を設定する [タグ編]

背景を変えてみよう – 色指定

背景の初期設定は白(#FFFFFF)ですが、これを好みの色に変更したり、背景に画像を使用したりすることができます。

ここではタグで直接編集する方法を紹介します。メモ帳などを起動して、以下のように入力してください。

操作手順

デスクトップから[スタート]→[プログラム]→[アクセサリ]→[メモ帳]でメモ帳を起動する。

起動したら、以下の文字を入力するか、コピーして貼付(コピー&ペースト)をする。

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta
http-equiv=“Content-Type” content=“text/html; charset=Shift_JIS”>
<meta
http-equiv=“Content-Style-Type” content=“text/css”>
<title>背景を変えてみよう</title>
</head>
<body bgcolor=#fff4dd>
</body>
</html>

このタグのサンプルはこちら

記述手順

<body>というタグに「bgcolor=””」という属性をつけて色を指定することで、背景色を設定できます。

赤字の部分を任意の「#(シャープ)+任意の6桁のカラーコード」に変更してください。

背景を変えてみよう – 背景画像を指定する

背景は色指定だけでなく、画像を使用することもできます。

記述手順

<body>というタグに「background=””」という属性をつけて背景画像の場所を指定することで、背景を設定できます。

赤字の部分を変更します。使用したい背景画像の場所を相対パスまたは絶対パスで記述します。(以下の例は相対パス)

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta
http-equiv=“Content-Type” content=“text/html; charset=Shift_JIS”>
<meta
http-equiv=“Content-Style-Type” content=“text/css”>
<title>背景を変えてみよう</title>
</head>
<body bgcolor=“#fff4dd” background=“img/03005.gif”>
</body>
</html>

このタグのサンプルはこちら

色の見本が欲しい

カラーチャート (紹介サイトへ)

色を表す#FFFFFFっとかって何ですか。

色のカラーコード

色の指定をするとき、原色のような白や黒、赤などは白(white)、黒(black)、赤(red)のように指定できますが、より繊細な色を表現するにはさらに細かく色を指定することが必要になってきます。

そこでHTMLでは、色の指定を16進数で指定することが決められています。

6ケタのこの文字を2文字ずつに分け、最初の2文字が、さらに真ん中の2文字が、最後の2文字がというように色の三原色を指定します。

各2文字は「00〜FF」までが割り当てられ、FFがそのケタの原色(最初の2文字なら赤)で、00に近づくにつれて、色が薄くなります。

よって、例えば原色のは「#FF0000」、は「#00FF00」、は「#0000FF」となり、これらの組み合わせで色が指定できます。

ちなみに白は「#FFFFFF」、黒は「#000000」です。

なお、これらのカラーコードを調べたいときは上のカラーチャートを参考にしてください。

カッコイイ背景画像の素材が欲しい

WEB素材 (紹介サイトへ)

  • 牛飼いとアイコンの部屋
  • 無料壁紙専門「無料職人!」
  • 無料壁紙(ホームページ用) - 0円のWEB素材屋さん
  • 背景画像素材館 - モグボックス
  • フリー素材:背景画像 - 谷口印刷
  • WEB素材 - D.T.Ag
背景を指定するタグの書き方

HTMLタグ辞典

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSSを優しく学ぶには

created by Rinker
¥2,178 (2020/07/07 17:29:29時点 Amazon調べ-詳細)

WordPressで簡単にブログを書いてみたい方

最新情報をチェックしよう!