婚活LABより、ブライダルネットの期間限定クーポン配布中!!

HTML5 imgタグの使用方完全版!! 主要属性解説付

HTML5 imgタグの使用方完全版!! 主要属性解説付

HTML5におけるimgタグの全要素一覧と、必ず抑えておくべき属性の使い方についてサンプルHTMLと挙動を確認しながら解説します。

imgタグの属性一覧

まずはHTML5で使用可能な全属性を良く使う順で確認します。

src 表示させる画像のURLを指定
alt 画像が開けない環境やダウンロード中の場合の代替えテキストを指定
width 画像の横幅を指定
HTML5ではピクセル値で指定する
height 画像の高さを指定
HTMLではピクセル値で指定する
srcset ウインドウサイズや解像度毎に画像の候補を指定
sizes srcset属性とセットで使用
画像の表示幅や切り替え地点を指定
ismap a要素の子要素としてimg要素を使用した場合にサーバーサイドマップとして指定
usemap イメージマップを使用する際の名前を指定
crossorigin CROSリクエストを指定
longdesc 画像の詳細説明URLを指定
referrerpolicy リファラーポリシーを指定

下に行く属性ほど使用頻度は低いです。意味がわからなければ飛ばしていただいて結構です。

これだけおさえれば大丈夫!imgタグの基本属性の使用方法!!

src属性の使い方

src属性は、表示させたい画像のURLを記入します。

では早速サンプルHTMLを見てみましょう。

サンプル1

HTML

<img src=”http://howto.logilab.jp/logo.jpg”>

表示

ロゴ

この場合は特にスタイルシートに記述がない場合、画像はフルサイズで表示されます。src属性は必須ですので必ず記述してください。

alt属性の使い方

次に、alt属性を使用したサンプルを確認しましょう。今回はあえて、記述を間違えた場合を例に上げます。

サンプル2

HTML

<img src=”http://howto.logilab.jp/logo.jpg” alt=”ロジラボのロゴ”>

表示

ロジラボのロゴ

上記の例では、画像の有る場所を正確に指定していないので代替テキストが表示されました。この様に記述間違いや画像が表示できない環境の場合にalt属性に入力した代替テキストが表示されます。

width、height属性の使い方

次は任意のwidth属性を使用して幅を指定してみましょう。

サンプル3

HTML

<img src=”http://howto.logilab.jp/” alt=”ロジラボのロゴ” width=”100px”>

表示

ロゴ

画像の幅が100pxで元の画像より小さく表示されました。この様にwidth要素を指定することにより画像の縮小、拡大が可能です。また、height属性を指定しない場合は自動で調整されます。

縦横比関係なくheight値を指定することも可能です。

サンプル4

HTML

<img src=”http://howto.logilab.jp/” alt=”ロジラボのロゴ” width=”100px” height=”200px”>

表示

ロゴ

HTML5では、width属性とheight属性の属性値はピクセル値で記述することとなっています。

グループサイト。婚活LABより!婚活無料診断実施中!

CTA-IMAGE 簡単な質問に答えるだけですあなたに最適な婚活タイプが丸わかり!