<IMG> タグ オプション解説

 alt 属性 画像の説明(必須)

イメージの読み込みに失敗したときや,テキストブラウザ使用時に表示される。 視覚障害のある方が使用する「テキスト読み上げ機能付きブラウザ」でも有効。 必ず付けるようにしよう!

<img src="flower.jpg" alt="たんぽぽ">
たんぽぽ

 width, height 属性 画像の縦・横サイズ指定

  • width のみ指定した場合,縦横比は保持される。単位はピクセル。
    <img src="flower.jpg" alt="たんぽぽ" width=150>
    たんぽぽ

  • height のみ指定しても,縦横比は保持される。
    <img src="flower.jpg" alt="たんぽぽ" height=50>
    たんぽぽ

  • width, height 両方指定。
    <img src="flower.jpg" alt="たんぽぽ" width=300 height=40>
    たんぽぽ

  • ブラウザの画面の縦横に対する比率を%で指定することも可能。
    <img src="flower.jpg" alt="たんぽぽ" width=20% height=15%>
    たんぽぽ

     border 属性 枠線の指定

    画像周囲の枠線の太さをピクセル単位で指定。 リンクに画像を使用するとき,border=0 とすると,周囲の枠が表示されない。
    <img src="flower.jpg" alt="たんぽぽ" border=10>
    たんぽぽ
     align 属性 画像とテキストの配置指定

    <img src="flower.jpg" alt="たんぽぽ" align=top>
    たんぽぽ このタグの後に続く文字列は画像の上のラインに合います。
    次の行は画像の下に配置されます。


    <img src="flower.jpg" alt="たんぽぽ" align=middle>
    たんぽぽ このタグの後に続く文字列は画像の中央のラインに合います。
    次の行は画像の下に配置されます。


    <img src="flower.jpg" alt="たんぽぽ" align=bottom>
    たんぽぽ このタグの後に続く文字列は画像の下のラインに合います
    次の行は画像の下に配置されます。


    <img src="flower.jpg" alt="たんぽぽ" align=left>
    たんぽぽ 画像が左で,このタグの後に続く文字列は画像の右側に回り込みます。
    次の行は前の文字列に続いて配置されます。
    文字列の回り込みを強制的に中断するには<br clear=all>とします。


    <img src="flower.jpg" alt="たんぽぽ" align=right>
    たんぽぽ 画像が右で,文字列は画像の左側に回り込みます。
    次の行は前の文字列に続いて配置されます。
    文字列の回り込みを強制的に中断するには<br clear=all>とします。


     hspace, vspace 属性 画像とテキスト間の余白指定

    <img src="flower.jpg" alt="たんぽぽ" align=left hspace=30 vspace=10>
    たんぽぽ hspace は文字と画像の水平方向の間隔を
    vspace は垂直方向の間隔を指定します。
    単位はいずれもピクセルです。
    この例では、左右に30ピクセル,上下に10ピクセルのスペースを入れています。
    スペースは上下・左右,両側に入ります。



    戻る