<< HTML テーブル(表) tr th td 属性 align valign | Home | スタイルシート(CSS) >>

HTML 画像の配置 img要素

ブラウザーに画像を表示させるには、img要素を使用します。

img要素は、それだけでは何も表示できないので、属性と組み合わせて使用します。

src属性: この属性で画像がある位置を相対パス絶対パスのURLで指定します、src属性がないと画像の場所が特定できないのでimg要素には必須の属性です。
相対パス絶対パスが解らない方はリンク先を参照

alt属性: この属性は、画像を表示できないテキストブラウザや音声ブラウザ等のために画像の意味を表す代替テキストを入れます、ユーザビリティのためにもimg要素に必須の属性です。

width属性: 画像の幅をピクセル(%)で指定します。

height属性: 画像の高さをピクセル(%)で指定します。
width属性とheight属性は必須ではありませんが指定した方が表示するまでの時間が短いようです。
また画像のサイズをそのまま入れる必要もありません。
ただ、画像のサイズと違う値を指定すると見栄えが良くないので、通常Webデザイナーは、同じ値を指定するか画像自体を加工します。

実際には次のようになります。
<img src="画像のURL" alt="代替テキスト" width="画像の幅" height="画像の高さ">
また、XHTMLの場合は、次のようにタグを閉じる前に半角スペースを入れてから「/」スラッシュを入れる必要があります。
<img src="画像のURL" alt="代替テキスト" width="画像の幅" height="画像の高さ" />

それでは次のようなimg要素を表示してみましょう。
<img src="http://img-cdn.jg.jugem.jp/272/1474973/20091013_1058320.gif" alt="ファイル階層" width="400" height="400" />
すると下のように画像が表示されます。
ファイル階層

ちなみに使用できる画像のタイプは、GIF画像、JPEG画像、PNG画像ですが、一部のブラウザはPNG画像をサポートしていないため、画像を表示できないことがあるので注意が必要です。

alt属性に適当なテキストがない場合、特に意味のない画像を入れたときなどは、「alt=""」のようにしてalt属性を必ず入れるようにしましょう。

Calendar

    123
45678910
11121314151617
18192021222324
252627282930 
<< June 2017 >>

Recent Entries


Categories


Archives


Profile


Valid XHTML 1.0 Transitional

Valid CSS!

Comments

Leave Comment










Trackbacks

Trackback URL

Recent Comments

Recent Trackbacks