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

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

投稿日:

<img>タグとは?

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

<img>タグの記述の仕方

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

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

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

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

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

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

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

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

画像のサイズを変更

タグ内に記述する

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

別途CSSで指定する

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

いずれの場合も縦横自由な数値を指定できますが、元の画像と比率が異なると歪んでしまうので注意して下さい。
例)高さ100px、幅300pxを指定した場合
imgタグの使用例
先程のように縦か横どちらかだけ指定すればもう一方は比率に応じて自動で調整されます。

<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>
    

div class="gallery"にflexを指定して中の要素を横並びにし、div class="photo"でひとつひとつの幅を指定しています。 横幅を100%とした際に、今回は3つ並べたいので1/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>
    

画像の上に文字を重ねる

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>
    

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

まとめ

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

関連する記事

サムネイル

HTMLのpタグ(段落)の使い方【改行タグbrとの違い】

2023年03月15日
pタグの「p」は段落・節を意味するParagraphの頭文字で、ひとかたまりの文章であることを指定するためのタグです。開始タグと終了タグからなる要素で、pタグを使用して段落を分けると前後の要素と改行されます。
サムネイル

Google Chromeのデベロッパーツールの使い方【画像……

2022年01月15日
最終更新日:2022年02月12日
デベロッパーツールとはWEBブラウザであるGoogle Chromeにはじめから備わっている機能の一つです。閲覧中のWEBサイトのページを構成しているHTMLやCSSといったソースコードを確認することができます
サムネイル

HTMLとCSSだけでアコーディオンメニューを作る方法【初心……

2020年12月18日
最終更新日:2022年07月05日
アコーディオンメニューとは、メニューの項目名をクリックすると非表示にされていたコンテンツが項目名の下に広がって表示される機能のことです。HTMLとCSSだけで簡単に実装することが可能です。
サムネイル

HTMLでスクロールバーを表示させる方法

2020年12月17日
最終更新日:2022年01月28日
HTMLで表示させるスクロールバーとは? HTMLとCSSを用いることでサイト内のコンテンツを一部だけ見えるようにし隠れた部分をスクロールして見るようにすること […]
サムネイル

HTMLにGoogle MAP(グーグルマップ)の埋め込みを……

2020年12月16日
最終更新日:2022年01月28日
Google MAPとは? 埋め込みとは? 自身のサイトのページの中に特定の場所を示したGoogle MAPを表示させることが出来ます。 簡単かつ無料なうえ、ペ […]
サムネイル

HTMLのtable(テーブル)タグの使い方

2020年12月15日
最終更新日:2022年01月27日
<table>タグとは? WEBサイトに表を表示させたい場合にHTMLの<table>(テーブル)タグを使用します。 単に表の作成に利用 […]
サムネイル

HTMLのformタグで入力フォームを作る方法

2020年12月14日
最終更新日:2022年01月28日
<form>タグとは? 「フォームで入力した内容を送信する」機能をもつHTMLタグです。 問い合わせフォームは、別に集計してメールを送る処理を記述し […]