ホームページ作成講座 -入門編-第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タグ」には他にも便利な「属性」があるんだ | |
え? |
まとめ
- 「htmlタグ」「bodyタグ」は省略可能ではあるが、省略はしない方が無難
- 背景色は「bodyタグ」の「bgcolor属性」で設定する
- 背景画像は「bodyタグ」の「background属性」で設定する
- ファイルを指定する方法には「相対パス」と「絶対パス」がある
- 「スタイルシート(CSS)」を用いると、より高度なデザインができる
スポンサーリンク