|
★ テキストや画像にリンク先の措定 >> A要素
★ A要素の A は anchorの略 >> リンク要素
★ 画像の表示はIMG要素 IMG は 「imageの略」
◇テキストや画像にリンク先を指定する ２
>> 画像リンク
画像の表示はIMG要素にSRC属性を記述 >> <IMG SRC>
１．画像にリンク先を指定
例えば当サイトTOPページへの画像リンク >> 
▼
■基本文型
<A HREF="移動先のURL">
<IMG SRC="画像ファイル名（URL）" WIDTH="画像の幅"
HEIGHT="画像の高さ" ALT="代替テキスト">
***テキスト（画像の説明）***
</A>
画像のwidth属性と、height属性は、省略可能なようですが、指定があると、ブラウザは容易に、画像サイズが確定でき、画像の読込から表示までの時間が短縮できるようです。
■IMG要素必須属性
SRC属性 （SouRCe＝ソースの略） >> <IMG SRC>
<IMG SRC>に記述するバナーのサイズはピクセルまたは％指定
■"移動先のURL"の記述方法
絶対パス（フルパス）と相対パス >> 詳細はAll About様
▼
★ 画像リンクあれこれ ★
WWW入門で超有名な「とほほ」様のサイトは
「リンクはご自由にどうぞ。必要であればバナーを使用ください。」・・・となっております。
早速リンクアイコン（リンクバナー）を頂戴し、貼り付けてみます。
単純に画像を貼り付ける場合、<IMG SRC>を使いますが、画像をクリックしてリンクの場合、貼り付けた画像を、<A HREF>〜</A>の<A HREF>にリンク先URLを記述して、画像<IMG SRC>の記述を挟みます
ます。
▼
◇ソース表示
<A HREF="http://www.tohoho-web.com/">
<IMG SRC="tohoho.gif" WIDTH="88" HEIGHT="31"
ALT="とほほ"><A>
▼
▲上記ソース表示の内
"tohoho.gif"・・・バナーアイコンの名前です。
WIDTH="88" HEIGHT="31"・・・バナーアイコンのサイズです。
２．画像やテキストにリンク先の説明を表示させたい
必須属性 ・・・ALT属性 と TITLE属性
次は、アイコン、テキストそれぞれにマウスを乗せてみて下さい。
テキストリンクの方に説明用の吹き出しが現れます。
▼
◇ソース表示
▼左のアイコン
<A HREF="http://www.tohoho-web.com/">
<IMG SRC="tohoho.gif" WIDTH="88" HEIGHT="31"
ALT="とほほのバナーだよ"></A>
▼右のテキスト
<A HREF="http://www.tohoho-web.com/"
TITLE="とほほのテキストバナーだよ">とほほのWWW入門</A>
▲▼ ALT属性とTITLE属性は、画像が表示されないときの代替テキストになります。画像リンクに必須のALT属性を記述していますが、説明の吹き出しは現れません。
ALT="とほほのバナーだよ"
・・・バナー用吹き出し＝ALT属性
TITLE="とほほのテキストバナーだよ"
・・・テキスト用吹き出し＝TITLE属性
３．リンク先ページの開き方を指定したい
・・・TARGET属性（非推奨属性）
リンク先ウィンドウの開き方の指定は、TARGET属性を用います。
▼は新窓で開く "_blank" を記述した場合です。
"_blank"指定は、新窓で開きます。試しに、下記のアイコンをクリックして見ると判りますが、ブラウザの「戻る」ボタンが、グレイアウトになります。(文法検証 >> 減点-1)
▼
◇ソース表示
<A HREF="http://www.tohoho-web.com/" TARGET="_blank">
<IMG SRC="tohoho.gif" WIDTH="88" HEIGHT="31"
ALT="とほほのWWW入門"></A>
◆TARGET属性の種類
TARGET="_blank"・・・_blank は、リンク先ページの開き方を指定する属性値です。
他に"_self" "_parent" "_top"等があります。
◆●は非推奨属性
W3C勧告 「HTML4.01 及び XHTML1.0」＝TARGET属性は非推奨。
▼
▼
IMG要素豆知識
IMG要素は空要素タグのため終了タグはありません。
◆１．画像に枠を表示・・・ >> IMG要素にBORDER属性
通常、画像に枠を表示するときは、IMG要素にBORDER属性を指定（BORDER="1"以上）します。
また、画像にリンクを指定すると、画像に枠線が付いてしまいます。
ほとんどのサイト運営者は、この画像枠を、見栄えなどの面から、外部（またはHTML文書内）スタイルシートに、次のような、画像リンクの枠線非表示設定をしていると思われます。
img { border-width : 0 ;}
または
img { border-style : none ;}
スタイルシートに、画像の枠線非表示を設定していても、STYLE属性に枠線のスタイルを指定すると、画像に枠線を表示することができます。
画像に枠線のソース表示
<IMG SRC="children.gif" WIDTH="113" HEIGHT="96"
ALT="サンプル画像だよ"
STYLE="border-style:solid;border-color:#990000;
border-width:2px;">
関連 >> TABLE以外の方法で枠＝罫線の表示
◆２．画像周りのテキスト位置・・・ >> IMG要素にALIGN属性
画像左寄せ、テキスト右・・・ALIGN="left"
画像右寄せ、テキスト左・・・ALIGN="right"
画像の上部にテキストを揃える・・・ALIGN="top"
画像の中央部にテキストを揃える・・・ALIGN="middle"
画像の下部にテキストを揃える・・・ALIGN="bottom"（既定値）
▼
HTML定義「HTML4.01 Transitional」では、IMG要素におけるテキストの位置指定は、スタイルシートの設定を推奨しています。
▼
画像を右寄せ・・・img {float: right;}
画像を左寄せ・・・img {float: left;}
画像の上部にテキストを揃える
・・・img {vertical-align: top;}
画像の中央部にテキストを揃える
・・・img {vertical-align: middle;}
画像の下部にテキストを揃える
・・・img {vertical-align: bottom;}
もっと詳しく知りたい→ WWWG vertical-align
▼作例は、vertical-align: middle;
サンプル画像だよ
◆画像の横（隣に）に配置するテキストの回り込み指定
・・・回り込み指定 << >> テキストの回り込み解除
▼作例は、float: left;
サンプル画像だよ サンプル画像だよ
サンプル画像だよ サンプル画像だよ
サンプル画像だよ サンプル画像だよ
サンプル画像だよ サンプル画像だよ
サンプル画像だよ サンプル画像だよ
サンプル画像だよ サンプル画像だよ
サンプル画像だよ サンプル画像だよ
サンプル画像だよ サンプル画像だよ
◆画像の位置指定 >> ブロックレベル要素にTEXT-ALIGN属性
▼作例は、text-align:center
◇画像位置指定のソース表示
<P STYLE="text-align:center;">
<IMG SRC="children.gif" WIDTH="113" HEIGHT="96" ALT="サンプル画像だよ"
STYLE="border-style:solid;border-color:#990000;
border-width:2px;">
</P>
|
