画像（イメージ）の表示方法を学習します。
画像の表示 <img src="xxx">
<img src="img/benishijimi_120x90.jpg"> と入力します。
"img/benishijimi_120x90.jpg" は表示したい画像ファイルのフォルダ/画像ファイル名を指定します。
必ず " (ダブルクォーテーション)でフォルダ/画像ファイル名を囲みます。
代替テキストの入力 alt属性
<img src="jpg/benishijimi_120x90.jpg" alt="紅シジミ 表示サイズ:120x90"> と入力します。
alt属性がなくても画像は表示されますが、画像が何らかの理由で表示出来なかった時の為、
また検索エンジン対策としても有効なので、alt属性の記述が推奨されています。
画像の表示サイズの指定 widht属性、height属性
<img src="jpg/benishijimi_120x90.jpg" alt="紅シジミ 表示サイズ:120x90"
width="120" height="90" と入力します。
この画像ファイルは横120px、縦90pxなので画像本来の表示サイズになります。この指定は省略できますが、
画像が読み込み終わるまで続きの表示が止まりますから、widht属性、height属性は必ず記述しましょう。
縮小表示してみます。
<img src="jpg/benishijimi_120x90.jpg" alt="紅シジミ 表示サイズ:60x45"
width="60" height="45"> と入力します。
次に拡大表示してみます。
<img src="jpg/benishijimi_120x90.jpg" alt="紅シジミ 表示サイズ:240x180"
width="240" height="180"> と入力します
縮小表示では殆ど気にならないのですが、拡大表示では画像が汚くなりますから、素直に大きさにあった画像を用意した方がいいでしょう。
ちょっとお遊びで縦方向のみ縮小表示してみます。
<img src="jpg/benishijimi_120x90.jpg" alt="紅シジミ 表示サイズ:120x45"
width="120" height="45"> と入力します。
縦方向のみ縮小表示されました。
画像とテキストの位置を指定 align属性
すでにお気づきでしょうが、画像に対するテキスト位置が、画像の右下になっています。
これはalign属性の設定で変更することが出来ます。
align="bottom" テキストを画像に下揃え。align属性を指定しないとこのbottomになります。
<img src="jpg/benishijimi_120x90.jpg" alt="紅シジミ 表示サイズ:120x90"
width="120" height="90" align="bottom"> と入力します。
align="middle" テキストを画像に中央揃え。
<img src="jpg/benishijimi_120x90.jpg" alt="紅シジミ 表示サイズ:120x90"
width="120" height="90" align="middle"> と入力します。
align="top" テキストを画像に上揃え。(ちょっとテストです。
このメッセージは画像の右側に表示されるでしょうか？それとも下でしょうか？)
<img src="jpg/benishijimi_120x90.jpg" alt="紅シジミ 表示サイズ:120x90"
width="120" height="90" align="top"> と入力します。
画像とテキストの回り込みを指定 align属性
前項目の画像とテキストの位置を指定では、テキストは一行分しか右側に表示されませんでしたが、
これでは複数行になるテキストでは格好悪くて使えません。
そこで、同じくalign属性を設定します。
align="left"画像をテキストの左側に表示。
<img src="jpg/benishijimi_120x90.jpg" alt="紅シジミ 表示サイズ:120x90"
width="120" height="90" align="left"> と入力します。
(ちょっと、テストです。この後テキストの回り込みはどの様になるのでしょう？続けて回り込むのか、画像に下になるのか？)
回り込みを解除します。
align="left"画像をテキストの左側に表示。
<img src="jpg/benishijimi_120x90.jpg" alt="紅シジミ 表示サイズ:120x90"
width="120" height="90" align="left"> と入力します。
(ちょっと、テストです。この後テキストの回り込みはどの様になるのでしょう？続けて回り込むのか、画像に下になるのか？)
画像、テキストの入力はそのままですが、<br clear="left">(ちょっと、テスト...)と入力しています。
この<br clear="left">で回り込みを解除します。
画像を右側に表示してみます。
align="right"画像をテキストの右側に表示。
<img src="jpg/benishijimi_120x90.jpg" alt="紅シジミ 表示サイズ:120x90"
width="120" height="90" align="right"> と入力します。
同じく<br clear="right">を指定して、右回り込みを解除しています。
また、解除には<br clear="all">の指定も可能です。
画像の余白を指定 hspace属性、vspace属性
前項目の画像とテキストの回り込みを指定では、画像とテキストの間に間隔がなくってちょっと圧迫感あります。
紅シジミばかりでは飽きてきましたので、画像を変えます。
左右の余白を指定するには、hspace属性を指定します。左右で同じ余白になり、別々の値は指定できません。
<img src="jpg/koneko2_120x90.jpg" alt="２匹の子猫 表示サイズ:120x90"
width="120" height="90" align="left" hspace="10" と入力します。
上下の余白を指定するには、vspace属性を指定します。上下で同じ余白になり、別々の値は指定できません。
<img src="jpg/koneko2_120x90.jpg" alt="２匹の子猫 表示サイズ:120x90"
width="120" height="90" align="left" vspace="20"> と入力します。
hspace属性とvspace属性とも一緒に指定してみます。
<img src="jpg/koneko2_120x90.jpg" alt="２匹の子猫 表示サイズ:120x90"
width="120" height="90" align="left" hspace="10" vspace="10"> と入力します。
圧迫感がなくなり良い感じになりました。
画像に枠線を付ける border属性
画像に枠線を付けてみます。
枠線を付けるには、border属性を指定します。色の指定はできません。
<img src="jpg/koneko2_120x90.jpg" alt="２匹の子猫 表示サイズ:120x90"
width="120" height="90" align="left" hspace="10"
vspace="10" border="10"> と入力します。
学習の為、枠線を10pxと太くしました。
ここでちょっと注意があります。
前項目のhspace属性とvspace属性、そしてborder属性をそれぞれ10px指定していますから、
画像領域のサイズは、横方向120px(画像のサイズ)+10px*2(左右の余白)+10px*2(枠線)=160px、
縦方向90px(画像サイズ)+10px*2(上下の余白)+10px*2(枠線)=130pxと、本来の画像サイズより大きくなっています。
そのため、テキストサイズが少なくなることを意識する必要があります。
border属性は、今はあまり指定して枠線を付けることはしないで、
border="0"として、枠線を付けない指定にすることが多いようです。
なお、省略するとborder="0"を指定したときと同じになります。
リンクについて <a href="xxxxx"></a>
画像をクリックするとオリジナル画像が閲覧できます。
クリックする前に注意して下さい。画像サイズ：2240 x 1680 ドット,画像容量:1.69 MB (1,774,981 バイト)です。
ダウンロードには時間がかかりますので、覚悟してから画像をクリックして下さい。
<a href="jpg/koneko2_org.jpg"><img src="jpg/koneko2_120x90.jpg"
alt="２匹の子猫 表示サイズ:2240 x 1680 ドット,画像容量:1.69 MB (1,774,981 バイト)"
width="120" height="90" align="left" hspace="10"
vspace="10"></a> と入力します。
alt属性では、リンク先の画像の説明、サイズ、容量を記述しました。
ここでは、border属性を省略しています。border属性を省略するとリンク付き画像の場合、枠線が付きます。
ついでに紅シジミのオリジナル画像のリンクしておきます。
<a href="jpg/benishijimi_org.jpg"><img src="jpg/benishijimi_120x90.jpg"
alt="紅シジミ 表示サイズ:2240 x 1680 ドット,画像容量:1.67 MB (1,754,572 バイト)"
width="120" height="90" align="left" hspace="10" vspace="10" border="0"></a>
画像をクリックするとオリジナル画像が閲覧できます。
クリックする前に注意して下さい。画像サイズ：2240 x 1680 ドット,画像容量:1.67 MB (1,754,572 バイト)です。
こちらは、border属性をborder="0"として、枠線が表示されないようにしました。