HTML入門者必見!imgタグで画像を表示する方法をパターン別に解説

この記事ではHTMLで画像を表示させる方法について解説します!HTMLではimgタグを使って画像を表示できます。

ただ、imgタグの使い方は分かっていても、その画像をどのようにして移動させたり、リンクを貼ればよいのかがわからない方も多いのではないでしょうか。そんな方に向けて、この記事では、

  • imgタグとは
  • imgタグの使い方
  • 画像にリンクを付ける方法
  • 画像の位置を調整する方法
  • 画像のサイズを変える方法

について解説していきます。基礎から解説していくので初心者の方もぜひ読んでみてください!

imgタグとは

imgタグはHTML上で画像を表示させるためのタグです。基本的にはGIF、JPG、PNG形式の画像を表示できます。

imgタグの使い方

それでは早速imgタグの使い方を見ていきましょう。こちらのコードをご覧ください。

<img src="画像へのパス" width="画像の幅" height="画像の高さ" alt="代替テキスト">

基本的にはこのような使い方で画像を表示させます。実際に画像を表示させてみましょう。

<body>
    <div>
        <img src="./Parrots.png"alt="Parrots">
    </div>
</body>

実行結果

今回はwidthとheightを指定していませんが、srcを指定するだけでも表示できます。

パスの指定方法

ここで重要になるのがパスの指定方法です。パスの指定方法には絶対パスと相対パスの2種類があります。今回はそれぞれの例の、「html」というディレクトリまでのパスを見てみましょう。

絶対パス

絶対パスは、居場所を俯瞰で見たときのような指定の方法です。

絶対パスの例

https://www.sejuku.net/blog/category/design/html

この絶対パスでは「html」というカテゴリまでの階層が、自分がどの階層にいても知ることができますね。

相対パス

また、相対パスは、今時分がいる場所から目的のものがどこにあるのかを指定する方法です。今回は現在、自分が「blog」にいると仮定しましょう。

相対パスの例

./category/design/html

自分から見て、「html」がどこにあるか、という主観的なパスを指定していますね。ちなみに、「html」というディレクトリから「category」というディレクトリに行くには、このような書き方をします。

../../category

「../」で一つ上のディレクトリに上がることができます。今回は2つ上の階層になるので、2つつなげて階層の表現をしました。

画像にリンクを付ける方法

基本的な使い方が分かったところで、次は画像にリンクを貼る方法について見ていきましょう。画像にリンクを貼ることができれば、表示するときはサムネイル用の小さなサイズで表示して、クリックすると大きな画像が表示できるようになります。

こちらのコードをご覧ください。

<style>
</style>
     
<body>
    <div>
        <a href="リンク先"><img src="./Parrots.png"alt="Parrots"></a>
    </div>
</body>

実行結果

見て分かるように、aタグで囲んでリンク先を指定しただけですね。実行結果からは分かりませんが、実際に実行してマウスをホバーさせてみると、リンクになっていることが分かると思います。

aタグについての詳しい解説はこちらの記事をご覧ください。

【HTML入門】href属性の使い方やオプションを理解しよう!
更新日 : 2021年4月23日

画像の位置を調整する方法

画像の位置を調整する方法についても見ていきましょう。widthとheightは画像の大きさを変える方法でしたね。今回はスタイルシート(CSS)を使って画像の位置を変えてみます。こちらのコードをご覧ください。

<style>
    div {
        text-align: center;
    }
</style>
     
<body>
    <div>
        <img src="./Parrots.png"alt="Parrots">
    </div>
</body>

実行結果

このコードでは、imgタグを囲うdivタグに「text-align: center;」を指定しました。位置の調整方法はたくさんあり、これは数ある中の1つの方法です。詳しくはこちら記事をご覧ください。

【HTML入門】画像の位置を指定してテキストを回り込ませる方法
更新日 : 2020年6月19日

まとめ

この記事ではHTMLのimgタグを使う方法について解説してきました。使い方については分かって頂けたでしょうか?imgタグは基本的なタグの一つです。紹介しているCSSなども併せて学ぶと、より自由度を高く、画像を操作できるようになりますよ。

Writer

侍テック編集部

株式会社SAMURAI

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。侍テック編集部では技術系コンテンツを中心に有用な情報を発信していきます。

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI ENGINEER Plus

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら