画像(イメージ)の表示または挿入に使用するimgタグについて

超初心者でも簡単にできるホームページ作成,HTML基礎講座 EasyStudyHTML

ホームページ作成 HTML基礎講座 imgタグ 画像の表示

画像(イメージ)の表示または挿入の際の回り込みを解除の仕方についても解説



imgタグ:画像の表示 携帯リストマーク clear.gif
【解説】
画像の表示
<img src="(1)">
<img lowsrc="(2)">
(1)画像URL
(2)画像URL(低解像度)主にモノクロ画像に使用するがGIF画像なら問題ないハズです。
※lowsrc指定はsrcで指定された画像より先に表示されます。
サンプルソース
<img src="http://e-html.aofp.net/images/top_b.gif">
<img src="../images/top_b.gif">
画像が何らかの原因で表示出来ない場合の配慮
<img src="http://e-html.aofp.net/images/top_b.gif" alt="top_b.gif">
<img src="../images/top_b.gif" alt="top_b.gif">
<img src="../images/top_top.gif" alt="画像がありません">
alt属性で画像の変わりに表示される代替文字及びマウスを合わせるとコメント表示されます。
pcリストマークサンプル表示
画像サイズ指定
<img src="(1)" width="(2)" height="(3)">
(1)画像URL
(2)横幅(ピクセル値または"%")
(3)縦幅(ピクセル値または"%")
画像の境界線の太さを指定
<img src="(1)" border="(2)">
(1)画像URL
(2)境界線太さ(ピクセル値)
画像の回りに文章を回り込ませます
<img src="(1)" align="(2)">
<img src="(1)" style="float: (2)">
(1)画像URL
(2)位置(キーワード)
キーワード 画像・文章の位置
left 画像を左に、文章を右に配置
right 画像を右に、文章を左に配置
top 注1 画像の上辺を文字の上に合わせる
middle 注1 画像の上下中央に文字の中央を合わせる
bottom 注1 画像の下辺を文字の下に合わせる
texttop 注1 画像の上辺を文字フォントの上限に合わせる
absmiddle 注1 画像の上下中央に、文字の中央を合わせる
absbottom 注1 画像の下辺に、文字フォントの下限を合わせる
none 注2 回り込みしない
※注1:align のキーワードのみ対応
※注2:float のキーワードのみ対応

回り込みを解除方法
  <br clear="(1)">
  (1)解除キーワード
   all:左右の画像への回り込み解除
   left:左にある画像への回り込み解除
   right:右にある画像への回り込み解除
サンプルソース(画像サイズ指定)
<img src="../images/sample_img.gif" width="50" height="50">
サンプルソース(画像境界線の太さ指定)
<img src="../images/sample_img.gif" border="5">
サンプルソース(画像の回りに文章を回り込ませる)
<img src="../images/sample_img.gif" align="left">
pcリストマークサンプル表示

ページトップへ
TOP | 利用規約(免責) | お問合せ

Agora