HTML 画像

JPG Images

GIF Images

PNG Images

HTML 画像構文

HTMLでは、画像は、<img> タグで定義します。

<img> タグは、空で属性のみを持ち、終了タグがありません。

src 属性は、画像の url（web アドレス）を定義します：

alt 属性

alt 属性は、画像が表示できない場合に代わりに表示するテキストを指定します。

alt 属性の値は、言葉で画像を説明する必要があります：

alt 属性は必須です。web ページは、それなしでは正しく検証されません。

HTML スクリーンリーダ

スクリーンリーダは、HTML コードを読み取り、テキストを変換し、ユーザがコンテンツを「聴く」ことを可能にするソフトウェアプログラムです。 スクリーンリーダは、視覚障害者（blind、visually impaired）、学習障害者（learning disabled）の方々に便利です。

画像サイズ - 幅と高さ

画像の幅と高さを指定するには、style 属性を使用することができます。 この場合、値はデフォルトでピクセルが使われます：

あるいは、width と height 属性を使用することができます。

値は、ピクセルで指定します (値の後の px は不要です)：

Width と Height か Styleか ?

height および style 属性のいずれも、最新の HTML5 標準では妥当です。

style 属性は、デフォルトの画像サイズを変更しないので、これを使用することをお勧めします：

別フォルダの画像

何も指定しない場合、ブラウザは、Web ページと同じフォルダに画像があると想定します。

しかし、web では一般的に、サブフォルダに画像を保存し、src 属性でフォルダ名を含めて指定します：

別サーバにある画像

一部の web サイトでは、画像サーバに画像を保存しています。

実際に、世界のどの web アドレスからも画像にアクセスすることができます：

アニメーション画像

GIF 標準で、アニメーション画像が可能です：

アニメーション画像を挿入する構文は、アニメーション以外の画像と変わらないことに注意してください。

リンクとして画像を使用

画像をリンクとして使用するには、<a> タグ内に <img> タグをネストします：

画像のフロート

画像をテキストの右または左にフロートするには、CSS の float プロパティを使用します：

イメージマップ

イメージマップを定義するために <map> タグを使用します。イメージマップは、クリック可能な領域を持つ画像です。

<map> タグの name 属性は、<img> の usemap 属性に関連付けられ、画像とマップの間に関係を作成します。

<map> タグには、イメージマップのクリック可能領域を定義するいくつかの <area> タグが含まれています：

この章のまとめ

• 画像を定義するには HTML <img> 要素を使用します
• 画像ファイル名を定義するには HTML src 属性を使用します
• 代替テキストを定義するには HTML alt 属性を使用します
• 画像サイズを定義するには HTML width と height 属性を使用します
• あるいは CSS width と height プロパティを使用します
• 画像をフロートさせるには CSS float プロパティを使用します
• イメージマップをポイントするには HTML usemap 属性を使用します
• イメージマップを定義するには HTML <map> 要素を使用します
• イメージマップをエリアを定義するには HTML <area> 要素を使用します

練習問題を自分でテストしてください！

Exercise 1 ❯  Exercise 2 ❯  Exercise 3 ❯  Exercise 4 ❯  Exercise 5 ❯  Exercise 6 ❯

HTML 画像タグ