ホームページ作成講座 -入門編-第6講

第6講では、背景色や背景画像の設定について解説します。 第5講をまだお読みでない方は、先に第5講をお読みください。

スポンサーリンク

背景に色を付けよう

タケシ <html>〜</html> は「HTML文書」であることを指定する「タグ」なんだ
サトシ じゃあ これを書かないと「HTML文書」にならないのか
タケシ 実は「htmlタグ」は「開始タグ」も「終了タグ」も省略できるんだ
サトシ ええ?!!!
じゃあ いきなり <head> や <body> から書き始めてもいいのか?
タケシ 更に「bodyタグ」も「開始タグ」と「終了タグ」が省略できるんだ
サトシ なんだよ・・・  それならなんで わざわざ面倒くさい事を教えたんだよ
タケシ でも省略はしない方がいいんだ
見栄えが悪くなるし 「titleタグ」は省略してはいけない事になってるから
事実上は <html> や <body> も省略してはいけないんだ
サトシ へえ・・・  そうなのか
で <body>〜</body> タグはどんな意味があるんだ?
タケシ たしか第2講でチラッと言った気がするけど
" <body> と </body> の間にあるものが「HTML文書」だよ "  という意味になるんだ
サトシ へえ・・・  これもあまり意味さなそうだな・・・
タケシ いやいやいや・・・
「bodyタグ」は、前講で教えた「属性」を設定する事で ページの背景に色を付けたりする事ができるんだぞ
サトシ 背景色? どうやるの?! 教えてくれ!
タケシ えーとだな・・・

「bodyタグ」に「bgcolor属性」を指定する事でページに背景色を設定できます。 「bgcolor属性」を指定しない場合は、通常は白色になりますが、古いブラウザでは灰色等になる事もあります。

<html><body bgcolor="#000000"><font color="#ffffff">テストです。</font></body></html>

「bgcolor="***"」という形で設定します。「***」は先ほど解説した「カラーコード」です。 実行すると、次のようになります。(ページ全体が真っ黒になります)

テストです。


サトシ 凄い!凄すぎるぜ!!
タケシ じゃあ 今度は画像を背景にしてみよう
サトシ 画像を背景にする事もできるの?!
タケシ おう!  もちのろんだ

背景に画像を設定する事もできます。 ただし、実験するためには画像ファイルを予め用意する必要があります。 練習用の物を用意しておりますので、必要ならばお使い下さい。 上記のリンクをクリックし、画像を表示させたら、その上で右クリックし「名前を付けて画像を保存(S)」を選択して下さい。 保存する場所は「test.htm」を保存した「hp」フォルダです。 「ファイル名(N)」を「back」、「ファイルの種類(T)」を「gif」として、「保存(S)」ボタンをクリックしましょう。

<html><body background="./back.gif">テストです。</body></html>

背景画像を設定するには「background属性」を「background="***"」という形で設定します。 「***」は画像ファイルへの「相対パス」もしくは「絶対パス」になります。

「相対パス」とは、「test.htm」から見た「back.gif」までの道のりの事です。 今回は同じ「フォルダ」内なので、そのまま「back.gif」と書くか「./back.gif」などと書きます。 最初の「.(ドット)」を忘れると「絶対パス」の意味になりますので、注意が必要です。 もし、「hp」フォルダの中に「hp2」フォルダを作って、その中に「back.gif」を保存している場合は、「hp2/back.gif」「./hp2/back.gif」などと設定します。 反対に「hp2」フォルダ内に「test.htm」があって、「hp」フォルダ内に「back.gif」がある場合は、「../back.gif」と設定します。 「../」は、1つ前(上)の「フォルダ」という意味です。

「絶対パス」とは、「Cディスク」など、最も前の位置から「back.gif」までの道のりの事です。 ホームページのアドレスで「http://〜/back.gif」というのがありますが、これを「絶対パス」と呼びます。 インターネット上に公開した際には「絶対パス」で指定することもありますが、今は「絶対パス」で指定する必要はありません。

背景画像は、連続的に並んで表示されます。実行すると、次のようになります。

テストです。

「background属性」を設定した場合には同時に「bgcolor属性」も設定する事が推奨されています。 インターネット上では、画像を読み込むまでに少し時間がかかってしまう事があるため、背景画像が表示されるまで「bgcolor属性」で設定した色で代用します。 今回サンプルで使用した画像は「透過」処理が行われており、色のついていない部分は透明になっています。 そのため、「bgcolor属性」と組み合わせると2色を表現する事ができます。

<html><body bgcolor="#ccffff" background="./back.gif">テストです。</body></html>

テストです。


サトシ 背景画像は 右下に1つだけ表示したりする事はできないのか?
タケシ 鋭いな  確かにそういう事もできるんだが HTMLだけではダメなんだ
サトシ どういうこと?
タケシ 「スタイルシート(CSS)」というのを利用しなくちゃいけないんだ
「スタイルシート」はちょっと難しいから また今度教えてやるよ
サトシ それなら仕方ないな・・・
とりあえず カラフルなホームページになってきたぞ!
「bodyタグ」って面白いぜ!
タケシ 「bodyタグ」には他にも便利な「属性」があるんだ
サトシ え?

第7講:ページ全体の文字色を設定しようへ続く

まとめ

  • 「htmlタグ」「bodyタグ」は省略可能ではあるが、省略はしない方が無難
  • 背景色は「bodyタグ」の「bgcolor属性」で設定する
  • 背景画像は「bodyタグ」の「background属性」で設定する
  • ファイルを指定する方法には「相対パス」と「絶対パス」がある
  • 「スタイルシート(CSS)」を用いると、より高度なデザインができる

スポンサーリンク