1999.8.10火NEW
Making of ZK

入門HTML講座

目次 1.HTMLの基本 2.ハイパーリンク 3.ページとテキスト 4.画像 5.リスト 6.テーブル 前ページ 次ページ

4.5 余白

 画像の周囲に余白を設定することができます。画像を1行として扱う場合にも、 テキストの回り込み指定をした場合にも、画像とテキストが接近しすぎていては見苦しいものです。 どちらの場合にも、VSPACE属性で、縦(上下)の余白を、 HSPACE属性で、横(左右)の余白を設定することができます。 ただし、「上だけ/下だけ」や「右だけ/左だけ」という指定はできません。

●画像の貼り込み(image)
<IMG SRC="..." ALT="..." 属性="..."> … 画像を貼り込む。
属 性 VSPACE="n"   〔画像の上下の余白:nピクセル
HSPACE="n"   〔画像の左右の余白:nピクセル

サンプル 4-5 s145img.html(余白)
<HTML>
<HEAD>
  <TITLE>絶景倶楽部【入門HTML講座】</TITLE>
</HEAD>
<BODY>
<H2 ALIGN="Center">入門HTML講座</H2>
<H3>画像(Image)…周囲の余白の指定</H3>
<HR>
<P>
  余白の指定はありません。<BR>
  麗雄です。
  <IMG SRC="img/leo01.jpg" ALT="松島の麗雄" HEIGHT="100" ALIGN="middle">
  「れお」と読みます。<BR>我が家の愛犬です。
<HR>
<P>
  余白は「VSPACE="20"」としました。<BR>
  麗雄です。
  <IMG SRC="img/leo02.jpg" ALT="京浜島の麗雄" HEIGHT="100" ALIGN="middle" VSPACE="20">
  「れお」と読みます。<BR>我が家の愛犬です。
<HR>
<P>
  余白は「HSPACE="30"」としました。<BR>
  麗雄です。
  <IMG SRC="img/leo03.jpg" ALT="椅子の上の麗雄" HEIGHT="100" ALIGN="middle" HSPACE="30">
  「れお」と読みます。<BR>我が家の愛犬です。
<HR>
</BODY>
</HTML>
このリストを表示する (新しいウィンドウを開きます。参照後は、自分で閉じて下さい。)


目次 1.HTMLの基本 2.ハイパーリンク 3.ページとテキスト 4.画像 5.リスト 6.テーブル 前ページ 次ページ
--> 【Making of ZK】へ