課題１７　ホームページにはりつけた画像に余白を付けるには？

今日の研修内容

　ホームページに貼り付いている画像と画像が接触してしまったり、画像と文字がすぐ隣で読みにくかったりして、レイアウトがうまくいかないときがあります。画像の上下、左右に空白をもたせて、ゆとりあるホームページを作成しましょう。

＜手順＞

（１）sample2.htmの読み込み

通信講座で研修するフロッピィディスクをセットします。
メモ帳を開き、「ファイル」「開く」で、「sample2.htm」を指定します。

（２）HTMLの書きかえ

以下に示す赤の部分を書き加えます。

：
<CENTER><H2>岐阜県図書館ホームページ</H2></CENTER>
<IMG SRC="img0016.jpeg" ALIGN="left" VSPACE="20" HSPACE="20">
ALIGN="left"<BR>
と記述すると<BR>
こうなります。<BR CLEAR=all>
<IMG SRC="img0016.jpeg" ALIGN="right" VSPACE="20" HSPACE="20">
ALIGN="right"<BR>
と記述すると<BR>
こうなります。<BR CLEAR=all>
<IMG SRC="img0016.jpeg" ALIGN="left" VSPACE="20" HSPACE="20">
<IMG SRC="img0016.jpeg" ALIGN="right" VSPACE="20" HSPACE="20">
両方記述すると、このようになります。画像が両方に表示されていますね。ここでは、改行
を使わなかったので、間に文字が入っていきます。<BR CLEAR=all>
<CENTER>
<FONT SIZE=5 COLOR=#FF0100>Gifu Prefectural Library</FONT>
</CENTER>
：

「ファイル」「上書き保存」の順に指定し、ファイルを更新します。

（３）Netscapeで、「sample2.htm」を読み込みます。画像の周りに空白ができているのが確認できます。

ワンポイントアドバイス
　もちろん、 VSPACE、HSPACEの片方のオプションだけでも使えます。その後にある数字の20は、ピクセル(コンピュータでの文字や絵を構成する最小の単位）です。数字を変えたり、片方のオプションにしたりして、表示がどう変化するかみてみましょう。

＜まとめ＞

　<IMG SRC>のタグにVSPACEやHSPACEのオプションをつけることで、画像の上下、左右に空白（マージン）を作ることができます。これによって、安定感のあるホームページを作成することができます。

　　＜キーワード＞
　　VSPACE="n" nピクセルの空白を画像の上下につくる
　　HSPACE="n" nピクセルの空白を画像の左右につくる

作成者	柳瀬　元
所　属	不破中学校

通信講座	岐阜県教育センター
第３章　ホームページの作成

第３章 ホームページの作成

第３章　ホームページの作成