htmlタグ｜img イメージ,画像 [ホームページ制作の基本タグ]   Recently updated !

<img src=”” alt=”” />

ホームページ制作（ウェブサイト制作）の際に使用する<img>タグについてのご説明です。

ホームページを制作する時<img>（イメージ）タグを使用することで、「埋込みイメージ」としてホームページ（ウェブサイト）内のページに画像を設置することができます。

<img> 埋込みイメージ、画像を表示

Image。イメージ。ウェブページ内に画像を表示します。ホームページ制作でよく使用するタグで、サーバーに画像をアップロード後、その画像のURLパスを元にこの<img>タグでページに画像を呼び出す形になっています。

<img>タグ使用の際には、画像ファイルがある場所へのパスと、画像が表示できない場合の代替テキストの指定（alt属性）は必須になっています。

src

ソース（情報源）。画像ファイルが置いてある場所を指定。

画像ファイルを指定(.gif .jpg .png)

src=”URL”

URL

画像ファイルのパスは、相対パス、絶対パスどちらでも指定可能です。

alt

代替テキスト。画像が表示できない場合の代わりのテキスト記述。オルト属性。

imgタグの必須項目。<h></h>（見出し）の間に画像を配置する場合は、確実に指定。

alt=””

読み方　オルト

width

画像の幅を指定

ピクセル、もしくはウインドウに対する％を指定

width=””

px %

height

画像の高さを指定

ピクセル、もしくはウインドウに対する％を指定

height=””

px %

align

テキストとの位置関係

align=””

top middle bottom left right

align=”top”

画像とテキストが上揃え

align=”middle”

画像とテキストが上下センター揃え

align=”bottom”

画像とテキストが下揃え

align=”left”

画像が左端、その右にテキストが回り込む

align=”right”

画像が右端、その左にテキストが回り込む

border

境界線。画像の周りの線

無指定の場合は原則、画像周りの境界線は表示されないが、リンクの指定などで境界線が表示されてしまう場合は、cssなどでimg aのボーダーを0に指定する。

border=””

hspace

画像の左右余白

hspace=””

vspace

画像の上下余白

vspace=””

hspace,vspace 代替CSS

margin系

usemap

srcで指定した画像ファイルに適用するマップ設定の名称を指定

指定する名称は<map name=””>と同様の属性値

usemap=”#”

decoding

• auto
• async
• sync

loading

• auto
• lazy
• eager

読み方　イメージ

画像の非同期デコードと遅延読み込み

画像の非同期デコード decoding=”async”で、画像を読み込む時に他のコンテンツの読み込みを妨げることを防ぐことができます。また、loading=”lazy”で、画像の遅延読み込みを実装できます。これらにより、ページのファーストビュー（画面内に表示される領域）速度を向上させることができます。

画像の非同期デコード「decoding=”async”」と遅延読み込み「loading=”lazy”」

alt属性とSEO

画像の代替テキストを指定するalt属性は、<img>タグにおいて必須指定項目です。かつ、SEOの基本になります。alt属性は画像が表示できない場合の代替テキストを指定しますが、同時に画像がどのようなキーワードにマッチした画像なのかを示す属性のため、ページのテーマに沿った画像が設置されていることを検索エンジンに示す属性になります。ウェブサイト、ページの検索エンジン最適化の必須項目と言えるでしょう。

<img src=”” alt=”” />

この<img>タグはhtml4.01、html5どちらのhtmlバージョンで制作されたホームページ（ウェブサイト）でも使用することができるため、CMS内で生成するコンテンツなどにおいても、ベースとなるWordPressテーマなどのhtmlバージョンに影響されず使用することができます。

ホームページ（ウェブサイト）制作・作成に役立つHTML5のタグ一覧は
⇒html5 tag reference index ホームページ制作の基本タグ

ホームページ制作・SEOの1ポイント

ホームページ制作で、テキストの次に重要なコンテンツはおそらく画像でしょう。ただし画像の設置はSEOにもプラスに働くものの、サーバー負荷が増えたり、alt無指定などのSEOの省略をしてしまいがちな項目です。逆に言えば、画像を軽量化したり、きちんとalt属性やキャプションを設定することで、SEOにプラスに働きます。画像を差し替えたときなどはalt設定を忘れがちですが、SEOを考えるのであれば、ページのSEOスコアや画像検索対策のためにもしっかりと設定を確認する必要があります。

ホームページ（ウェブサイト）のHTML編集方法

ホームページのHTML編集方法について。ホームページ（ウェブサイト）は基本的にHTMLで構成されています。かつてはHTML単独でHTMLの文書スタイルを設定していましたが、現代ではページの基本構成はHTMLで、外観はスタイルシート・CSSで設定されています。ホームページ制作・作成、ホームページ修正の基本はこのHTMLとCSSの編集で行います。

ホームページのHTML編集方法

ホームページ制作（ウェブサイト制作）なら
Web制作会社ファンフェアファンファーレへ