<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ピクセルのスペースを入れています。
    スペースは上下・左右，両側に入ります。


    戻る