<装飾しよう>

 ここでは、ページを色々飾り付けて少しにぎやかにしてみましょう。

●背景に色をつけよう

 なにも指定していないと背景色はブラウザで設定してある色を表示します。
そこで、他の色を表示するように設定してみましょう。それには、<BODY>タグのオプションとして次のように設定します。

<BODY BGCOLOR="#B0E0E6">
こんにちは
</BODY>

 どうですか。背景に色がつきましたね。
この色の指定は文字の色指定と同じで、色の英語名を半角文字で記述してもOKですよ。ちなみに、上の背景と同じ色を英語名で記述すると次のようになります。

<BODY BGCOLOR="POWDERBLUE">
こんにちは
</BODY>

 ただし、色によってはブラウザが対応していないものもあるので、出来ればRGBで指定したほうが良いでしょう。

●背景に画像を貼ろう

 今度は、背景に画像を貼ってみましょう。
使用する絵は、別に画像データを用意しなければなりません。HTMLで使う画像データは、”GIF”または”JPEG”という規格の物しか使えません。ウインドウズの壁紙などに使っている”BMP”という物は使用できないので、他に使える画像をもっていない方はこのサイトの「フリー素材集」で適当なものをダウンロードしてみて下さい。(ダウンロードの仕方は、Internet Explorerの方は画像の上で右クリック → 「名前を付けて画像を保存」を左クリック → 保存する場所を指定して「保存」を左クリック。Netscape Navigatorの方は画像の上で右クリック → 「画像を名前を付けて保存」を左クリック → 保存する場所を指定して「保存」を左クリックです。)
 用意した画像は、とりあえず作成中のドキュメントと同じフォルダに入れておいて下さい。そして、たとえば画像の名前が”kabe_01.gif”というものであれば次のように記述します。

<BODY BACKGROUND="kabe_01.gif">
こんにちは<BR>
</BODY>

 指定した壁紙が背景として表示されましたね。この場合の記述で注意しなければいけないのが、画像ファイルの名前です。上記の画像の名前は「kabe_01.gifですが、これを「kabe_01.GIFと勝手に大文字にしてしまうと同一ファイル名とみなされず、画像が表示されません。「"」で囲む部分では常に注意が必要です。

 背景に画像を指定すると、通常は画像が画面いっぱいに敷き詰められ、画面をスクロールすると背景画像もスクロールします。背景をスクロールしない設定もあります。(Internet Explorer)

<BODY BACKGROUND="kabe_01.gif" BGPROPERTIES=FIXED>
こんにちは<BR>
</BODY>

 スクロールボタンが出るまで”こんにちは<BR>”をコピー&貼り付けして確認してみましょう。
また、スタイルシートを使うと一部だけに表示する事も出来ますので、興味がある人はそちらもご覧下さい。

 さて、ここでは画像データをHTMLドキュメントと同じフォルダに入れていましたが、場合によっては別の場所に保存しなければならない場合もあります。これから、その場合の記述の仕方を説明します。基本的には、HTMLドキュメントの場所と画像データの場所の相対的な位置関係によります。

 次にいくつか例をあげます。”A”、”B”、”C”等はそれぞれフォルダ名を表します。

1. folder_1.gif (2110 バイト)
フォルダ”B”にドキュメントがあり、フォルダ”D”に画像ファイルがある場合

<BODY BACKGROUND="D/画像.gif">

2. folder_2.gif (2099 バイト)
フォルダ”A”にドキュメントがあり、フォルダ”D”に画像ファイルがある場合

<BODY BACKGROUND="B/D/画像.gif">

3. folder_3.gif (2099 バイト)
フォルダ”E”にドキュメントがあり、フォルダ”F”に画像ファイルがある場合

<BODY BACKGROUND="../F/画像.gif">

4. folder_4.gif (2105 バイト)
フォルダ”B”にドキュメントがあり、フォルダ”E”に画像ファイルがある場合

<BODY BACKGROUND="../C/E/画像.gif">

5. folder_5.gif (2103 バイト)
フォルダ”E”にドキュメントがあり、フォルダ”B”に画像ファイルがある場合

<BODY BACKGROUND="../../B/画像.gif">

 この様に、同じフォルダの中の下位フォルダにあるファイルを指定する場合

下位フォルダ名/ファイル名

 別のフォルダにあるファイルを指定する場合

「../../同位フォルダ名/下位フォルダ名/ファイル名」
「../同位フォルダ名/ファイル名」
「../同位ファイル名」

という様に記述します。(”../”は、実際は半角文字で記入します。)この記述する方法を「相対パス」で記述と言います。これに対し、ファイルの場所を”url(http://www.・・・)”で指定する方法を「絶対パス」で記述と言います。これは他でも使いますので、よく理解するようにしましょう。

●仕切線を引こう

 仕切線を引くには<HR>タグを使います。このタグは<BR>タグと同じく単独で使用します。
また、<HR>タグには次のようなオプションがあります。

COLOR="色指定"・・・線の色を指定する。[RGBで指定](InternetExplorer)
SIZE="ピクセル数"・・・線の太さを指定する。
WIDTH="ピクセル数,画面幅に対する割合%"・・・線の長さを指定する。
ALIGN="LEFT,CENTER,RIGHT"・・・線の位置を指定する。[左,中央,右]
NOSHADE・・・線を影無しに指定[記述するだけでOK]

 では、実際に試して見ましょう。

<HR WIDTH="150" ALIGN="CENTER">
<HR COLOR="#0000FF" SIZE="5" WIDTH="200" ALIGN="CENTER">
<HR SIZE="10" WIDTH="100" ALIGN="LEFT">
<HR SIZE="10" WIDTH="100" ALIGN="LEFT" NOSHADE>

この仕切線をいろいろ組み合わせる事で画面に面白い効果をつける事も出来そうですね。


メニュー / 基礎 / 文字 / 装飾 / 画像 / リンク / テーブル / フレーム / フォーム / ステップ