*画像を使う*

必要な画像が全部そろったら、次のステップに進みましょう。

1.背景(壁紙)

壁紙を、実際に使ってみましょう!
テキストエディタとブラウザを起動して、「top.html」を開いてください。

壁紙画像は、<BODY>の属性にbackground="画像ファイル名"を付け足すことで指定します。
(画像名は、あなたの壁紙画像のに直してください)。

<HTML>
  <HEAD>
    <TITLE>ななたぐのへや</TITLE>
  </HEAD>

  <BODY text="blue" bgcolor="yellow" background="wall.gif">
      <CENTER><H1>
          <FONT color=red>ななたぐのへや</FONT>
        (以下略)

では、ブラウザで確認してみましょう。

・・・・・・あれ、壁紙、表示されない。

と、誰でも思うハズです←確信犯か!!( `Д´)=3
ここで、2日目にお話したことを思い出してください!
リンク先にHTML名を指定する場合は、そのHTMLが同じフォルダ内にあることが前提です。
(違うフォルダにあった場合、・・・それは、4日目に登場します!)
・・・そうです。思い出しましたか?ついにこれを、説明するときがきました!

これからする説明をよーくよーく読んでください!!(読まずに質問する人が多くて困っています!!)

相対パス」というキーワードについて、お話しましょう。
●相対パス
相対パス」は、自分から見てどこに相手ファイルが存在するかをしめす書き方です。
たとえば、山田さん家の場所を伝えるのに、
うちのとなりの山田さん」と言うようなものです。

ローカルでのパス構造

たとえばこの場合、「top.html」から見て、「link.html」は同じフォルダ内、いわばおとなりさんです。
<A HREF="link.html">リンクのページ</A>
と書けばリンクできたことは、ご存知のとおりですね。

「top.html」から見て、「wall.gif」はおとなりさんではありません。
「top.html」のおとなりさんは「img」フォルダで、「wall.gif」はその中にあります。
この場合、
<BODY background="img/wall.gif">
となります。

つまり、正解はbackground="img/wall.gif"なのです!

はぁ、謎が解けた・・・ってかんじですかね?(^-^)
それじゃ、さっきのを正しいパスに書き直してみましょう。

<HTML>
  <HEAD>
    <TITLE>ななたぐのへや</TITLE>
  </HEAD>
  
  <BODY text="blue" bgcolor="yellow" background="img/wall.gif">
      <CENTER><H1>
          <FONT color=red>ななたぐのへや</FONT>
        (以下略)

今度はちゃんと表示されたはずですよ(^-^)

「相対パス」について詳しくは、「トピックス」を見てください 「トピックス」相対パス*

また、「相対パス」のほかに「絶対パス」というのがあります。
これもついでに知っておくと良いでしょう。
●絶対パス
絶対パス」は、そのファイルの住所(=アドレス)です。
「うちのとなりの山田さん」じゃなく、ちゃんと「東京都葛飾区亀有○丁目○番地○号の山田さん」と言うようなものです。

ローカルでのパス構造

「Dドライブ の homepageフォルダ の imgフォルダ の wall.gif」の絶対パスは、
D:\homepage\img\wall.gif」です。
※フォルダの仕切りが「/(スラッシュ)」ではなく「\(エンマーク)」なのが特徴です。

相対パスでは <BODY background="img/wall.gif"> でしたが、
絶対パスで書くと
<BODY background="D:\homepage\img\wall.gif">
となります。

しかし、この絶対パスはパソコン内でのアドレスなので、インターネット上では使えません。(当たり前ですね)
もし
<BODY background="D:\homepage\img\wall.gif">
と書いてしまうと、これは
Dドライブのhomepageフォルダのimgフォルダのwall.gifを表示する
という命令になりますので、
ほかの人のパソコンでは「Dドライブにその画像ファイルがない」=「背景が表示されない」となってしまうのです。

そこで、ホームページ作成では、相対パスを使います。
<BODY background="img/wall.gif">
これなら「となりにあるimgフォルダのwall.gifを表示する」という命令ですから、
インターネット上で「top.html」のとなりに「img」フォルダをきちんと置けば、誰が見ても表示されるというわけです
(インターネット上に置く、というのは「アップロード」という作業で、7日目にやります!)。

*ちなみに*
  • 「C:\・・・」「D:\・・・」はパソコン内の絶対パスですが、
    「http://・・・」はインターネット上の絶対パスで、「URL」と呼ばれます。

  • 「URL」について詳しくは、「よくある質問」を見てください よくある質問
あ、あともうひとつ。
bgcolor属性についてです。

「background」と「bgcolor」両方指定があった場合は、「background」が優先です
しかし、何かの理由で画像が表示されなかったとしたら・・・
背景、真っ白になっちゃいますね。
そんなとき、背景に似たような色を「bgcolor」で指定してあれば、
とりあえず真っ白にはならずに済みます。

「wall.gif」は全体的にうす青なので、「yellow」はやめて「#B0C4DE」(うす青)を指定しておこうと思います。

<HTML>
  <HEAD>
    <TITLE>ななたぐのへや</TITLE>
  </HEAD>
  
  <BODY text="blue" bgcolor="#B0C4DE" background="img/wall.gif">
      <CENTER><H1>
          <FONT color=red>ななたぐのへや</FONT>
        (以下略)




Copyright (C) 7tag project dv