画像を表示する

画像を表示する【<img>】

ブラウザで表示した時の見え方

ソースサンプル（HTML)

<img src="./img/rose.gif" alt="薔薇" width="200" height="140">

ソースサンプル（XHTML)

<img src="./img/rose.gif" alt="薔薇" width="200" height="140" />

[ 黒※説明中のタグ紫※省略可能なタグ赤※変更可能緑※文章など ]

解説

「src」と「alt」属性は必須です。
「alt」属性は画像を表示出来ない場合に、代わりのテキストを指定する属性です。意味を持たないマークなどで画像を使用している場合は、記号などを入れると良いでしょう。
「width」「heigth」属性はなるべく指定しましょう。画像のサイズを指定しておくと、画像の表示スペースを確保できますから、画像の後に続く内容を早く表示させることができます。逆に指定がないと、画像がダウンロードされるまで、画像以降の内容は表示されないということになります。
音声や点字で表現されることもありますので、適切なものを指定しましょう。
画像について説明を付け加えたい場合は「title」属性を使いましょう。
この薔薇の画像はサンプル集用に作ったものです。よろしければお持ち帰りの上ご利用ください。
(※1)これらは非推奨属性です。できるだけCSSで設定しましょう。

オプション
src	画像ファイル名	画像ファイルをを指定する	<img src="./rose.gif">
alt	代替テキスト	画像のかわりに表示するテキストを指定する	<img src="./rose.gif" alt="薔薇">
hspace (※1)	ピクセル	画像の横方向の余白を指定する	<img src="./rose.gif" hspace="5">
vspace (※1)	ピクセル	画像の縦方向の余白を指定する	<img src="./rose.gif" vspace="5">
width	ピクセルまたは％	画像の横の表示サイズを指定する	<img src="./rose.gif" width="200">
height	ピクセルまたは％	画像の縦の表示サイズを指定する	<img src="./rose.gif" height="140">
border (※1)	ピクセル	画像の周りの枠の太さを指定する	<img src="./rose.gif" border="1">
align (※1)	top middle bottom left right	画像の上部、中央、下部(初期値)に表示画像を左端、右端に寄せてテキストを逆に表示	<img src="./rose.gif" align="top">
属性名	値	機能	例

AICHAN WEB(Z) > HTML＆CSSサンプル集(S) > HTML - 画像を表示する