HTML入門 | HTML基本要素 | HTML画像(Image)

画像(image)とは、2次元平面上に描かれた視覚的な要素を意味する。Webページでは、このような画像が非常に重要な要素の一つである。

Webページで使用できる画像の種類は次のとおりである。

• JPEG Images
• GIF Images
• PNG Images

画像の挿入

HTMLに画像を追加するときは<img>タグを使用する。<img>タグは終了タグを持たない空タグ(empty tag)であり、次のような文法で使用する。

文法

<img src="画像アドレス" alt="代替文字列"/>

画像を挿入する例は次のとおりである。

<img src="/resources/images/logo/128x128.png" alt="devkuma logo"/>

コード実行

画像サイズ(width, height)

HTMLではstyle属性を使用して画像のサイズを設定できる。また、width属性とheight属性を使うと、画像の幅と高さをそれぞれピクセル(pixel)単位で設定することもできる。

上記の2つの方法はいずれもHTML5標準に適した方法だが、後で学ぶCSSの内部スタイルシートや外部スタイルシートに関係なく画像の元のサイズを維持したい場合は、style属性を使用するのがよい。

<img src="/resources/images/logo/128x128.png" alt="devkuma logo" style="width:256px;height:256px;">

コード実行

画像のalt属性

altは、画像を表示できない場合に画像の代替テキストを表示する。

接続速度が遅い場合や実際の画像が存在しない場合など、ブラウザでユーザーが画像を見られないときに画像の代替情報を提供する。

<img src="noimage.png" alt="画像がありません。">

コード実行

画像の枠線(border)

border属性を使用して、画像の枠線の有無や太さを設定できる。

<img src="/resources/images/logo/256x256.png" alt="画像の枠線" style="border: 3px solid black">

コード実行

画像にリンク(link)を設定する

画像に<a>タグを使用してリンクを設定できる。

<a href="/books/pages/112" target="_blank">
    <img src="/resources/images/logo/256x256.png" alt="flag">
</a>

コード実行

画像マップを作成する

HTMLでは<map>タグを使用して画像マップ(image map)を作成できる。画像マップ(image map)とは、画像の一部をクリックできるようにしてボタンのように使う機能を意味する。

<img>タグのusemap属性を<map>タグのname属性と接続すると、画像とマップの関係が設定される。<map>タグは1つ以上の<area>タグを持ち、この<area>タグがボタンのような役割を果たす。

<img src="/resources/images/logo/256x256.png" alt="devkuma logo" usemap="#devkuma"/>
<map name="devkuma">
  <area shape="rect" coords="105,145,150,175" alt="코"
        href="https://ko.wikipedia.org/wiki/%EC%BD%94">
  <area shape="rect" coords="25,50,60,85" alt="왼쪽 귀"
        href="https://ko.wikipedia.org/wiki/%EA%B7%80">
  <area shape="circle" coords="205,65,30" alt="오른쪽 귀"
        href="https://ko.wikipedia.org/wiki/%EA%B7%80">
</map>

コード実行

imgタグ

mapタグ

HTML5以降は、name属性よりもid属性を使用することが推奨される傾向にある。

areaタグ

参照

• https://tonks.tistory.com/39