1999.8.10火NEW
Making of ZK

入門HTML講座

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

4.6 リンクボタンと枠線

　画像をリンクボタンとして使用することもできます。 <A HREF="...">タグと </A>タグの間に、テキストの代りに <IMG SRC="..." ALT="...">タグで画像を指定するだけです。 リンクボタンに設定されたテキストに下線が表示されるように、 リンクボタンに設定された画像には枠線か表示されます。四角い画像であれば、 あまり気になるものではありませんが、透過GIF形式の自由な輪郭の画像に四角い枠が付くのは、 かなり不自然な表示で見苦しいものです。そのような場合に、枠線を指定する BORDER属性を記述します。 「BORDER="0"」とすることで、 リンクボタン画像の周囲の枠線を消しすっきりとした表示にすることができます。
　一方、意図的に枠線を付けることもできます。リンクボタンに設定していない単なる画像は、 通常、枠線なしで表示されますが、BORDER属性を記述することで、 枠線を付けることができます。属性値は、枠線の太さ（ピクセル）になります。

●画像の貼り込み（image）枠線の設定
<IMG SRC="..." ALT="..." 属性="..."> … 画像を貼り込む。
属　性 BORDER="n" 　　〔枠線：nピクセル（="0"で枠線消去）〕

　サンプル「s146img1.html」と「s146img2.html」は、相互リンクになっています。 表示のされ方を確認しましょう。

サンプル 4-6-1 s146img1.html（枠線）
<HTML>
<HEAD>
  <TITLE>絶景倶楽部【入門HTML講座】</TITLE>
</HEAD>
<BODY>
<H2 ALIGN="Center">入門HTML講座</H2>
<H3>画像（Image）…枠線の指定</H3>
<HR>
<P>
  通常の画像の貼り込みでは、何も指定しないと枠線は表示されません。<BR>
  左の画像は、BORDER属性は指定していません。
  右の画像は、「BORDER="5"」と指定しました。<BR>
<P ALIGN="center">
  <IMG SRC="img/leo01.jpg" ALT="松島の麗雄" HEIGHT="100">
  <IMG SRC="img/leo02.jpg" ALT="京浜島の麗雄" HEIGHT="100" BORDER="5"><BR>
<P>
  リンクボタンは、何も指定しないと枠線が表示されます。
  リンクボタンをクリックして下さい。
  <A HREF="s146img2.html"><IMG SRC="img/leo_nxt1.gif" ALT="次ページへ"></A>
</BODY>
</HTML>
このリストを表示する （新しいウィンドウを開きます。参照後は、自分で閉じて下さい。）

サンプル 4-6-2 s146img2.html（枠線）
<HTML>
<HEAD>
  <TITLE>絶景倶楽部【入門HTML講座】</TITLE>
</HEAD>
<BODY>
<H2 ALIGN="Center">入門HTML講座</H2>
<H3>画像（Image）…枠線の指定</H3>
<HR>
<P>
  通常の画像の貼り込みでは、何も指定しないと枠線は表示されません。<BR>
  今度は、左の画像に「BORDER="10"」と指定しました。
  右の画像には、BORDER属性はありません。<BR>
<P ALIGN="center">
  <IMG SRC="img/leo01.jpg" ALT="松島の麗雄" HEIGHT="100" BORDER="10">
  <IMG SRC="img/leo02.jpg" ALT="京浜島の麗雄" HEIGHT="100"><BR>
<P>
  リンクボタンには、「BORDER="0"」を指定しました。
  リンクボタンをクリックして下さい。
  <A HREF="s146img1.html"><IMG SRC="img/leo_prv1.gif" ALT="前ページへ" BORDER="0"></A>
</BODY>
</HTML>
このリストを表示する （新しいウィンドウを開きます。参照後は、自分で閉じて下さい。）

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