HTMLには画像を表示するimgタグがあります。imgタグにはいっしょに記述するとよい、いくつかの属性があります。imgタグは属性を設定することにより、画像の情報をクローラーに理解させたり、レイアウトシフトを防ぐことができます。
この記事では、「画像を表示させるimgタグの使い方」について解説していきます。
この記事のゴールは「画像のimgタグについて役割と使い方を理解すること」です。
いっしょに学習していきましょう。
- HTMLの画像を表示するimgタグの使い方と基礎知識
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
HTMLのimgタグとは：画像を表示する
imgタグは文書内に画像を表示するタグです。imgはimageの略称で、インライン要素となります。imgタグで表示できる画像の形式は「.gif（GIF形式）」、「.jpg（JPEG形式）」、「.png（PNG形式）」などがあります。
基本書式
<img src=”画像ファイルのパス/ ファイル名.(png, jpg, gif など拡張子) ” alt=”代替テキスト” title=”ツールチップで補足情報を記載” width=”画像の横幅” hight=”画像の高さ”>基本書式にコードを当てはめると次のようになります。
<img src="dummy.png" alt="ダミーの画像です" width="300" height="200" title="補足情報">出力結果
検証画面で確認すると、src属性、alt属性、width属性、height属性、title属性が設定されているのが確認できます。title属性は画像をマウスでホバーするとツールチップとして情報が出力されます。
ここからはそれぞれの属性について解説していきます。
imgタグのsrc属性：画像の読み込み元を指定する属性
src属性は画像の読み込み元を指定する属性です。
src属性には絶対パスと相対パスの2つの方法でファイルの読み込み元を指定することができます。
絶対パスとは、URLで画像のファイルを記述する方法です。次の画像のようなイメージで、src属性を指定します。
相対パスとは、画像を読み込ませたいファイルを起点として画像ファイルまでの場所を記述する方法です。
src属性はimgタグだけではなく、スクリプトファイルを読み込むためにも使用されます。
下記はスクリプトファイルを読み込む記述例になります。
<body>
<script src="main.js"></script>
</body>imgタグのalt属性：画像の代替となるテキスト情報
alt（オルト）属性は、画像の代替となるテキスト情報を設定する属性です。
ブラウザで画像が表示されないときに画像の代わりに表示されるテキストとなります。alt属性を記述するメリットは、検索エンジンのクローラーに画像の情報を伝えることです。
クローラーとは、検索エンジンがWebサイト上の情報（テキストや画像など）を巡回して解析・データベース化（インデックス）するためのプログラムのことです。
クローラーを巡回させることで、検索エンジンは「Webサイトの検索順位を決めるための要素を情報収集」しています。
alt属性が直接SEOに影響を与えるわけではありません。クローラーはテキストの内容しか理解できませんが、alt属性を設定すればクローラーが画像の内容を理解できるようになります。
その他alt属性を設定するメリット視覚障害を持っている方や高齢者の方は、Webサイトのコンテンツ内容を理解するために音声読み上げ機能を利用します。alt属性を設定していると、画像の情報をテキストで音声が読み上げてくれます。
imgタグのwidth属性とheight属性：画像の横幅と縦幅のサイズを指定
imgタグにwidth属性とheight属性を指定することができます。
imgタグにその2つの属性を記述する効果は、Webサイトのページがロードされる際に画像分のスペースを確保し、レイアウトシフトを防ぐことにあります。
レイアウトシフトとは、Webページがロードされる際に画像分のスペースがないことによって、コンテンツのずれが発生することです。
width属性・height属性を設定していない場合は、次のようなイメージになります。
width属性・height属性を設定している場合は次のようなイメージです。
width属性とheight属性を設定すると、画像分の領域が確保された状態になるため、画像以外のコンテンツのずれが発生しなくなります。
imgタグのtitle属性：補足情報をツールチップとして表示
title属性は画像の補足情報や説明文をツールチップとして表示することができます。ツールチップとは、マウスオーバーした際に表示される補足情報のことです。
実はtitle属性は、aタグやdivタグに対しても適用されます。
<div class="" title="空の要素です"></div>div {
width: 200px;
height: 200px;
background: orange;
}出力結果
要素をホバーするとツールチップが表示されます。
なお、2022年現在ではtitle属性はほとんど使われなくなっています。SEO的な効果もないので、無理に使う必要はありません。予備知識として覚えておきましょう。
まとめ
画像を表示するタグと、いくつかの属性について解説しました。alit属性やwidth属性、height属性については必須設定としてコーディングしましょう。
HTMLには様々なタグや属性の種類があり、タグ一つでも覚えることがたくさんあります。少しずつ学習を進めていきましょう。
Web制作は、その他にも学ぶべき知識が数多くあります。
Web制作初学者がWeb制作を学習するにあたって、押さえておくべき知識・技術は「Web制作学習ロードマップ」の記事にまとめています。どこまで勉強すればいいか分からない、次はどんなスキルを勉強すればいいか分からない、という方はぜひ参考にしてみてください！
画像を表示するタグまとめ
- imgタグは画像を表示するタグ
- src属性でファイルの読み込み元を指定できる
- alt属性は画像の内容をテキスト情報として伝えることができる
- title属性は補足情報として設定できる
- width属性とheight属性指定はレイアウトシフトを防ぐことができる
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
