ホームページ制作 htmlタグ img ページ内に画像を設置

htmlタグ|img(イメージ・画像)


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

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

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

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

ホームページ制作 htmlタグ 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属性とSEO ホームページ制作

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

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

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

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

img ホームページ制作 SEO

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

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

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

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

ホームページ制作実績

新規ホームページ制作・カスタマイズ実績のある業種・エリアや、ホームページ制作事例・サイトカスタマイズ事例などホームページ制作実績のご紹介。企業の公式ホームページをはじめ、各種ホームページ制作(ホームページ作成)に対応しています。
ホームページ制作実績

ホームページの更新・修正

ホームページのページ更新やページ追加、文章や価格の修正、リンクの修正をはじめ、ホームページ内部の様々な箇所の修正など、各種ホームページの更新・ホームページの修正の代行に対応しております。 ホームページの更新や修正にかかる単発のご依頼で対応させていただいておりますので、軽微な修正でもお気軽にご相談ください。スマホ対応化やSSL化、ホームページのエラー修正・エラー復旧にも対応しております。
ホームページの更新・修正料金 価格表


著者・監修 : 株式会社ファンフェアファンファーレ

2012年創業の京都のWeb制作会社 ホームページ制作やSEO、Web集客・Webマーケティングをメインテーマにお届け。SEOやAI活用、Web以外の集客何でも来いです。中小零細企業を中心に「きちんとしたホームページ集客」を考えて、ホームページ制作や様々なWeb集客戦略を提案しています。 ホームページ制作に限ると、のべ制作数は160社(少ないって?それはそれだけ1社あたりのWeb集客施策や修正に集中してるからさ)

「htmlタグ|img(イメージ・画像)」のカテゴリ
html tag Reference
タグ: , , , ,


ホームページ制作・カスタマイズ、Webマーケティング・SEOなどのお問い合わせ・ご依頼