【HTML】】1分で学ぶimgタグ―画像の表示方法

HTML

HTMLで画像を表示する方法―imgタグの使い方について、サンプルコード付きで解説しています。

この記事はこんな方におすすめ

  • HTMLで画像の表示方法を知りたい!
  • 画像の大きさを指定できるようになりたい!
  • alt属性とは・・・?

HTMLを学習したての人や、Web担当者の方であれば絶対に知っておきたい内容をまとめています。

早速、画像の表示方法から解説を始めます。

スポンサーリンク
スポンサーリンク

HTML―画像の表示方法

<img src="https://~~">


画像を表示するには<img>タグを用います。HTMLの基本ルールとはちょっと異なり、終了タグが不要です。画像を表示するだけなので、テキストを囲む必要がないためです。

src」は、URLを指定するための必須属性です。

※属性とは?と疑問に思ったら以下のページをご覧ください。

サンプルコードとして、実際にHTMLを利用して画像を表示する方法を見ていきましょう。

サンプルコード:imgタグの利用

この記事のトップ画像のURLを表示します。

<img src="https://it-biz.online/wp-content/uploads/2019/11/4a64a7e1f57a7e67d6c3b038db1630eb-1.jpg">

こちらのコードをブラウザで実行・表示した結果がこちら。

blank
ブラウザでの表示結果

指定したURLは、本ブログのメディアライブラリです。メディアライブラリに保管されている画像が表示されています。

外部サイトの画像は表示できる?

src属性に指定するURLは、基本的にはサイト内部の画像ファイルを指定するのが原則です。ただし、外部サイトの画像ファイルを指定することも技術的には可能です。

<img src="(外部サイトのURL)">

しかし、外部サイトの画像ファイルを指定するには問題点があります。

外部サイトの画像ファイルを指定する問題点

  • 著作権侵害の恐れがある
  • URLが変更された場合に画像が表示できなくなる
  • セキュリティの脆弱性が発生する

どうしても外部サイトの画像を表示したい、というシーンは筆者の経験上であったことはありません。基本的には外部サイトの画像を表示するという行為はNGであると理解しておきましょう。

HTML―画像の大きさを変える

imgタグを使い画像を表示した場合、画像の大きさはそのままの大きさで表示されます。ですが、ページのレイアウトに合わせて大きさを変更したい場合も出てきます。

ここからは、画像の大きさを指定する「width」属性と「height」属性の使い方と処理の内容を解説していきます。

width属性/heigth属性

「width」を日本語に直すと横幅、「heigth」は高さになります。この2つの属性をうまく用いることで画像の大きさを変えることができます。

<img src="(URL)" width="~%" height="~%" >

width属性と、height属性を利用して同じ画像を異なるサイズで表示してみましょう。

<img src="https://it-biz.online/wp-content/uploads/2019/11/4a64a7e1f57a7e67d6c3b038db1630eb-1.jpg">

<img src="https://it-biz.online/wp-content/uploads/2019/11/4a64a7e1f57a7e67d6c3b038db1630eb-1.jpg" width="10%" height="10%">

<img src="https://it-biz.online/wp-content/uploads/2019/11/4a64a7e1f57a7e67d6c3b038db1630eb-1.jpg" width="25%" height="100%">

上記のコードをブラウザで表示した結果がこちらです。

blank

これで画像の大きさを大きくしたり小さくしたりすることができました。ただし、一番最後の画像をご覧いただければわかるように、横幅と高さを異なる%で指定すると、画像が元のクオリティからかけ離れてしまうので注意が必要です。

応用編―alt属性(代替テキスト)とは?

最後にHTMLで画像を表示する際の応用編-alt属性について解説します。

構文ルール

<img src="(URL)" alt="画像の説明">

alt属性(オルト属性)とは、別名「代替テキスト」とも呼ばれます。この属性を使うと「画像が表示できない場合の代わりの情報」を指定することができます。

alt属性はこんな時に使われます

  • テキストブラウザ※でページを読み込む場合
  • 音声読み上げブラウザ※でページを読み込む場合

※・・・ページ内の情報をすべてテキストで表示する・音声でテキストを読み上げるなど画像を表示しないでページを閲覧する場合に利用されます。

alt属性を指定することにより、画像を表示できない環境下にあっても画像の意味をユーザに理解させることができるだけではなく、SEO的にも有益です。すなわち、コンピュータがその画像の意味を理解できるようになるため文章全体の構成・内容を理解することが可能になるのです。

HTMLで画像を表示するのは非常に簡単ですが、注意点や応用知識を持っていると実際に利用する際にさらに便利です。本ページで解説した内容は超・基本の内容ですので、何度も復習いただけると幸いです。

タイトルとURLをコピーしました