＜VSPACE HSPACE タグ で遊ぼう＞
V は Vertical（バーティカル、垂直の、縦の）H は Horizontal（ホリゾンタル、水平の、横の）に由来していると思われます。SPACE（スペース）は空間です。VSPACEは縦の空間、HSPACEは横の空間を指定できるということですね。VSPACE="10" とか HSPACE="10" などのように、ピクセル数を続けて書くことで、画像の周囲に空間ができます。
さっそく練習してみましょう。お好みの画像をご用意ください。普通に画像を置いた場合と、画像の周囲に空白を置いた場合を比較してみたいので、ふたつのケースのタグを書いてみました。例によって画像の名前の部分は、皆さんの身近にある画像名をお使いください。まずは空白がなく、画像がくっついて表示されるタグの例です。
<html>
<head>
<title>
空白を置いて紅白を観るのよ、空腹じゃない時に(^o^)
</title>
</head>
<body>
まずはイメージをそのまま並べた例です。<br>
<img src="otogo.jpg"><img src="hyotan.jpg"><br>
<img src="tsukimi.jpg"><br>
このように画像がくっついて並びます。ちょっと見た目が悪いですね。<br>
</body>
</html>
spacea.htm とでも名付けて保存し、ブラウザで確認してみましょう。
くっついた画像が三つ表示されていますね。
次に、画像の周囲に適度な空白をおき、画像と画像を空白で仕切ってみるタグを書いてみます。
<html>
<head>
<title>
空白を置いて紅白を観るのよ、空腹じゃない時に(^o^)
</title>
</head>
<body>
今度はVSPACEとHSPACEを使います。<br>
<img src="otogo.jpg" VSPACE="5" HSPACE="15"><img src="hyotan.jpg" VSPACE="5" HSPACE="15"><br>
<img src="tsukimi.jpg" VSPACE="5" HSPACE="15"><br>
今度は画像の周囲に空白が誕生しました。<br>
</body>
</html>
spaceb.htm とでもして保存し、ブラウザで確認してみましょう。
画像の縦方向に５ピクセル、横方向に１５ピクセルずつの空白を指定しています。画像と画像がくっついて表示されるよりも、適度に空白が置いてあったほうが見やすいと思いませんか。
＜画像の周りにテキストの回り込みをさせよう / なんて素敵ストな＞ (^_^;
ALIGNタグの復活や
さて今度は、以前に学習した ALIGN（アライン）タグをあわせて使ってみましょう。これは揃え（そろえ）のタグでした。文字を右寄せ、左寄せ、中央寄せに指定する時に使うものでしたよね。画像の場合でも使えます。そのうえに、その画像の側面にテキストを表示させることも可能にしてくれます。
まずは、画像の側面にテキストを１行だけ表示させればいい場合です。
align="top" とすれば画像の側面の上部にテキストが、
align="middle" とすれば画像側面の中央にテキストが、
align="bottom" とすれば画像側面の下部にテキストが１行だけ表示されます。
テキストが１行で表示しきれない場合、残ったテキストは画像の下に表示されるようになります。下の実践例では、画像の垂直方向に対しての中央に、テキストを表示させる場合でタグを書いてみます。
<head>
<title>
空白を置いて紅白を観るのよ、空腹じゃない時に(^o^)
</title>
</head>
<body>
今度は画像を左に寄せ、空白をおき、画像の右側面に１行テキストを中央に置きま
す。<br>
<img src="otogo.jpg" align="middle" vspace="5" hspace="15">
乙子神社草庵は、良寛さまが晩年を過ごした場所です。この場合１行だけが画像の
側面に表示されます。"middle" を "top" や "bottom" に変更することも可能です。
はみだした文は画像の下に続きます。複数のテキストを側面に表示させる時は、
別のタグを用います。
</body>
</html>
これを spacec.htm とでもして保存し、ブラウザで確認してみましょう。
さて、今度は、画像を左右どちらかに寄せた上で、側面に複数行のテキストを置いてみます。こうすると、画像の周囲にテキストを回り込ませるように表示させることができます。こんなタグを書いてみました。
<head>
<title>
空白を置いて紅白を観るのよ、空腹じゃない時に(^o^)
</title>
</head>
<body>
今度は画像を左に寄せ、空白をおき、画像の右側面に複数行のテキストを
置きます。<br>
<img src="otogo.jpg" align="left" vspace="5" hspace="15">
乙子神社草庵は、良寛さまが晩年を過ごした場所です。足腰が弱り、
五合庵で暮らすのが大変になりましたので、周囲の人々の勧めで
乙子神社のわきの草庵に暮らすことになりました。良寛さまはお坊さん
でしたから、神社の境内で暮らせたのは宗派を超えた存在であったことが
うかがえます。<br>
このように align タグをいっしょに使うと、画像を左右に寄せたうえで、
テキストを複数行にわたって画像の側面に表示させることができます。
側面に表示しきれない文は画像の下に表示されます。画像の周囲にテキスト
を回り込ませるように表示できるわけです。
</body>
</html>
spaced.htm とでもして保存し、ブラウザで確認してみてください。
こんなふうに、画像の周囲にテキストが回り込むように表示されました。
では、本日最後の練習です。回り込みのカットの実践です。上の例で画像の側面に複数行のテキストを置いていますが、この画像側面に表示されるテキストを特定の位置で強制的に改行させ残りのテキストを画像側面ではなく、画像の下から続けて表示させてみます。つまり、画像の周囲にテキストを回り込ませる解除を途中で行い、普通に画像の下にテキストを続けて置いてみようということです。これをやるには、改行を行うタグの <BR>の親戚、<BR CLEAR="ALL">というタグを使います。<BR>同様、ペアにして使わなくてもいいタグです。
<html>
<head>
<title>
空白を置いて紅白を観るのよ、空腹じゃない時に(^o^)
</title>
</head>
<body>
今度は画像を左に寄せ、空白をおき、画像の右側面にテキストを置きます。<br>
さらに、側面のテキスト回り込みを途中で中止させます。<br>
<img src="otogo.jpg" align="left" vspace="5" hspace="15">
乙子神社草庵は、良寛さまが晩年を過ごした場所です。足腰が弱り、
五合庵で暮らすのが大変になりましたので、周囲の人々の勧めで
乙子神社のわきの草庵に暮らすことになりました。良寛さまはお坊さん
でしたから、神社の境内で暮らせたのは宗派を超えた存在であったことが
うかがえます。<br clear="all">
このようにアライン・タグとブレイククリア・タグをいっしょに使うと、
画像側面に表示されるテキストの途中で改行して、残りを画像の下に
表示させることができます。これを、回り込みのキャンセルとか、
回り込みカットと呼んでいるようです。
</body>
</html>
spacee.htmとでもして保存して、ブラウザで確認してみましょう。
<br clear="all">の他にも、"right"や"center"もありますが、今回は割愛します。
では、今回はここまでとします。次回からリンクの書き方に移りたいと思います。
ご質問、ご感想、間違いのご指摘などは、恐れ入りますが NIFTY SERVE内のFROM40PC会議室にてお願いします。
