ＨＰに背景（壁紙）を貼ろう

パソコン　レスキュー隊

ホームページの初歩の初歩

１.デスクトップの「私のHP」フォルダの中に背景に使う画像ファイルをコピーしよう

画像はGIFやJPGがHPでよく使われます。BMPやTIFFファイルはファイルサイズが大きすぎるのでHPでは不適当ですので、画像ソフトでファイルの種類を変更しましょう。やり方はここを見てください。

HPで画像を表示するには、HTMLファイルがある場所と画像ファイルの置く場所の関係が重要です。なれないうちはHTMLファイルと画像ファイルを同じ場所に保存するとわかりやすいですが、管理の面からは画像ファイルは別のフォルダを作ってそこに保存するといいと思います。

この例では「test.html」と同じ場所（デスクトップの「私のHP」フォルダの中）に画像ファイル（haikei01.gif）を置きます。

３.メモ帳を使って下のようにHTMLを書き換えてみよう。

　
「表示」→「ソース」とクリックすると、メモ帳が起動してHTMLソースが見られます。
以前作成したHTMLファイルに下のように書き加えます。（赤い部分）
もちろん、新しくHTMLファイルを作成してもOKです。

タグ、ファイル名は必ず半角、タグは大文字でも小文字でもかまいませんが、サーバによってはファイル名の大文字、小文字を厳格に区別しますので、ファイル名は小文字に統一した方がまちがいありません。

<HTML>
<HEAD>
<TITLE>練習HP</TITLE>
</HEAD>
<BODY BACKGROUND="haikei.gif">
画像と背景の貼り付けの練習
 
<IMG SRC="gazou01.gif">
 
貼り付けテストの画像
 
<IMG SRC="images/gazou02.gif">
 
imagesフォルダに入れた画像
</BODY>
</HTML>

haikei.gifは背景用の画像ファイルです。
お好きなものにしてください。
ここでは、例として右のような背景（壁紙）の画像を使いました。

背景に使う画像も通常の画像と同じです。
これがタイル状に並んで背景に見えるだけです。

４.ファイルを上書き保存しよう。

　
「ファイル」→「上書き保存」してブラウザの「更新」ボタンを押すと、下のように表示されると思います。背景が出ましたか？

　万一、背景が出ないときはタグやファイル名をもう一度確認しましょう。一文字でも違うとエラーです。全角、半角に注意。タグは大文字、小文字は関係ありませんが、ファイル名は大文字、小文字を厳密に区別します。

　画像と背景の貼り付けの練習
　
貼り付けテストの画像

　
　imagesフォルダに入れた画像

「test.html」ファイルと「haikei.gif」ファイルはデスクトップの「私のHP」フォルダの中にあります。つまり、同じ場所です。そのため画像を表示するためのタグは下のように、直接ファイル名を指定して書きます。
（すべて半角英数字を使うこと、タグ部分は大文字でも小文字でもOK）

<BODY BACKGROUND="haikei.gif">

フォルダに画像ファイルを入れた場合は、「フォルダ名／画像ファイル名」にします。
「test.html」ファイルと「images」フォルダは同じ場所にありますが、「haikei.gif」は「images」フォルダの中にありますので、下のように書きます。「／」（スラッシュ）は「○○の中」と言う意味、と考えてください。

<BODY BACKGROUND="images/haikei.gif">