HOME >
HTML >
HTMLのimgタグで画像を表示する方法

HTML

HTMLのimgタグで画像を表示する方法

投稿日:2020年12月09日（最終更新日:2022年01月27日）

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

本記事は執筆時点（2020年12月09日）の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

<img>タグとは？
1. <img>タグの記述の仕方
2. 画像が表示されないときは？
<img>タグのカスタマイズ方法
<img>以外で画像を表示させるには？
1. CSSのbackground-imageプロパティを使用する
2. 記述方法
まとめ

<img>タグとは？

<img>タグは写真や画像を表示させるために使用するタグです。

<img>タグの記述の仕方

<img>タグは他のタグと異なり閉じタグはありません。要素を記述するのではなく、タグ内に画像のアップロード場所を記述することで表示させます。

<img src="https://sample.com/uploads/images/photo.jpg" alt="imgタグの使用例">

・src=""に表示させたい画像のアップロード場所のパスを含めたファイル名を指定します。
パスについて詳しくはこちら
・alt=""は代替テキストと呼ばれ、何の画像なのかを明記します。下の例のように何らかの原因で画像が正しく読み込まれなかった場合に、この代替テキストが代わりに表示されます。

・また、代替テキストは検索エンジンに対して何の画像かを伝えるという役割も持つので重要な画像には入力するようにしましょう。

画像が表示されないときは？

<img>タグを使用した時に画像が表示されない場合は、かなりの確率でパスの記述ミスやファイル名の間違いだと思います。

一文字間違えるだけで表示されないので注意が必要です。

<img>タグのカスタマイズ方法

基本的な調整方法からWEBサイトでよく見かけるデザインの実装方法までをご説明します。

画像のサイズを変更

タグ内に記述する

<img src="https://sample.com/uploads/images/photo.jpg" alt="imgタグの使用例" width="300px";>

別途CSSで指定する

<style> .photo{ width:300px; } </style> <img src="https://sample.com/uploads/images/photo.jpg" alt="imgタグの使用例" class="photo">

いずれの場合も縦横自由な数値を指定できますが、元の画像と比率が異なると歪んでしまうので注意して下さい。
例）高さ100px、幅300pxを指定した場合

先程のように縦か横どちらかだけ指定すればもう一方は比率に応じて自動で調整されます。

<img>タグにリンク

画像をクリックしたら別ページにリンクする仕組みは<img>を<a>タグで囲むだけで出来ます。

<a href="https://web.skipjack.tokyohtml/link/"><img src="https://cdn.pixabay.com/photo/2020/10/27/21/24/lake-5691976__340.jpg" width="300px"></a>

<img>タグを横並び

ギャラリーのように画像を横並びで表示させたい場合はCSSのflexを使うと簡単です。

CSSのflexについて詳しくはこちら

<style> .gallery{ width:100%; display:flex; flex-wrap: wrap; } .gallery .photo{ flex-basis:33%; margin:0 auto; padding:5px; } .gallery img{ width:100%; } </style> <div class="gallery"> <div class="photo"><img src="https://cdn.pixabay.com/photo/2019/12/30/20/34/snow-4730553__340.jpg"></div> <div class="photo"><img src="https://cdn.pixabay.com/photo/2020/10/27/21/24/lake-5691976__340.jpg"></div> <div class="photo"><img src="https://cdn.pixabay.com/photo/2020/12/10/16/19/waterfall-5820721__340.jpg"></div> </div>

        <style>
            .gallery{
                width:100%;
                display:flex;
                flex-wrap: wrap;
            }
            .gallery .photo{
                flex-basis:33%;
                margin:0 auto;
                padding:5px;
            }
            .gallery img{
                width:100%;
            }
        </style>
        <div class="gallery">
            <div class="photo"><img src="https://cdn.pixabay.com/photo/2019/12/30/20/34/snow-4730553__340.jpg"></div>
            <div class="photo"><img src="https://cdn.pixabay.com/photo/2020/10/27/21/24/lake-5691976__340.jpg"></div>
            <div class="photo"><img src="https://cdn.pixabay.com/photo/2020/12/10/16/19/waterfall-5820721__340.jpg"></div>
        </div>

div class="gallery"にflexを指定して中の要素を横並びにし、div class="photo"でひとつひとつの幅を指定しています。横幅を100％とした際に、今回は3つ並べたいので１／３をして33％にしています。<img>に対しては、枠組み（div class="photo"）に対して幅いっぱいになるようにwidth:100%を指定します。

異なるサイズの画像の場合は当然ながら高さにばらつきが出ます。高さを揃えたい際は元画像をトリミングしてサイズを統一するか、div class="photo"に対してheight（高さ）を指定したうえで、overflow:hiddenではみ出した部分を非表示にする方法があります。

<img>タグの上に文字を重ねる

画像編集ソフトで元画像に合成してもいいですが、CSSでも簡単に出来ます。

<style> .text_on_photo{ position:relative; } .text_on_photo img{ width:100%; } .text_on_photo p{ font-size: 24px; padding:5px; background:#333; color:#fff; position: absolute; top:0; left: 0; z-index: 2; } </style> <div class="text_on_photo"> <img src="https://cdn.pixabay.com/photo/2019/12/30/20/34/snow-4730553__340.jpg"> <p>画像の上に文字を重ねる</p> </div>	画像の上に文字を重ねる

        <style>
            .text_on_photo{
                position:relative;
            }
            .text_on_photo img{
                width:100%;
            }
            .text_on_photo p{
                font-size: 24px;
                padding:5px;
                background:#333;
                color:#fff;
                position: absolute;
                top:0;
                left: 0;
                z-index: 2;
            }
        </style>
        <div class="text_on_photo">
            <img src="https://cdn.pixabay.com/photo/2019/12/30/20/34/snow-4730553__340.jpg">
            <p>画像の上に文字を重ねる</p>
        </div>

画像の上に文字を重ねる

positionプロパティのabsoluteは上下左右の座標を指定することで任意の位置に要素を配置することが出来ます。今回はdiv class="text_on_photo"にposition:relativeをしてすることで配置の枠組みとし、<p>タグをその枠内の任意の位置に配置することで画像の上に文字を載せています。

<img>以外で画像を表示させるには？

CSSのbackground-imageプロパティを使用する

background-imageプロパティを使用すれば要素の背景画像という形式で画像を表示することが出来ます。

backgroundプロパティについて詳しくはこちら

記述方法

表示画像の指定は<img>タグと同様で、background-image:url(表示させたい画像のアップロード場所のパスを含めたファイル名)という形で記述します。

<style> .photo_bg{ width:600px; height:300px; background:url(https://cdn.pixabay.com/photo/2019/12/30/20/34/snow-4730553__340.jpg) no-repeat; background-size:cover; } </style> <div class="photo_bg"></div>

        <style>
            .photo_bg{
                width:600px;
                height:300px;
                background:url(https://cdn.pixabay.com/photo/2019/12/30/20/34/snow-4730553__340.jpg) no-repeat;
                background-size:cover;
            }
        </style>
        <div class="photo_bg"></div>

・あくまで要素の背景なので、画像サイズは要素のサイズに依存します。今回のように要素がない場合はセレクタに幅と高さを指定する必要があります。
・background-size:coverは背景画像を範囲内で目一杯広げて表示する指定です。縦横比を維持したまま拡縮されます。<img>タグと異なりはみ出した部分は表示されません。

まとめ

WEBサイトの中で画像は単に表示するだけではなく大きさや並び、エフェクトなど様々な表示方法を求められます。 <img>タグとbackgroundどちらを使うべきかなど、見せ方に応じて工夫を凝らす必要があります。