画像に関するHTMLタグ
HTMLでは、ドキュメント中の画像を表示することができます。
画像のサンプル
画像の挿入サンプル
このサンプルは、ホームページの中に画像を表示する方法をデモンストレーションします。
<img>タグとsrc属性
HTMLでは、<img>タグによって画像の挿入を定義します。
<img>タグは空要素です。これは属性だけを含み、終了タグを持たないことを意味します。
ページに画像を表示するためには、src属性を使用する必要があります。srcは「画像の場所」を表わします。src属性の値は、あなたがページに表示したい画像のURLです。
画像の挿入を定義する構文は以下の通りです。
<img src="url">URLは、画像が置かれている場所を指します。「html-tutorial.cool-liberty.com」上で、ディレクトリ「img」にある「sample_image_01.gif」という名の画像は、「http://html-tutorial.cool-liberty.com/img/sample_image_01.gif」というURLを持ちます。
ドキュメント中の<img>タグを記述したところに、ブラウザは画像を挿入します。2つの段落の間に<img>タグを記述すれば、ブラウザは第1段落、次に画像、そして次に第2段落を表示します。
alt属性
alt属性は、画像の「代替テキスト」を定義するために使用されます。alt属性の値は、画像の説明など作者に定義されたテキストです。
<img src="fish.gif" alt="大きな魚">alt属性は、ブラウザが画像をロードすることができない場合、画像の代わりに代替テキストを表示します。あなたのホームページの有用性を考えて、各画像にalt属性を含めることが推奨されます。
基本メモ - 役立ちTips
1つのページに10個の画像を含んでいるとしたら、HTMLドキュメントを含む11個のファイルがページを表示させるために要求されます。画像のロードは時間がかかります。なので、画像の使い過ぎには注意しましょう。
画像のサンプル集
背景画像のサンプル
このサンプルは、HTMLページに背景画像を加える方法をデモンストレーションします。
文章内の画像の位置サンプル
このサンプルは、文章内の画像を整列させる方法をデモンストレーションします。
画像のフロート表示サンプル
このサンプルは、段落の左側か右側に画像を表示させる方法をデモンストレーションします。
画像のサイズ変更サンプル
このサンプルは、異なるサイズに画像を適合させる方法をデモンストレーションします。
画像の代替テキストサンプル
このサンプルは、画像用の代替テキストを表示する方法をデモンストレーションします。
画像を使ったハイパーリンクのサンプル
このサンプルは、リンクとして画像を使用する方法をデモンストレーションします。
イメージマップのサンプル
このサンプルは、クリック可能な領域と共に、イメージマップを作成する方法をデモンストレーションします。
画像に関するHTMLタグ一覧表
| タグ | 説明 |
|---|---|
| <img> | 画像を定義します |
| <map> | イメージマップを定義します |
| <area> | イメージマップの中のクリック領域を定義します |