この記事では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タグについての詳しい解説はこちらの記事をご覧ください。
画像の位置を調整する方法
画像の位置を調整する方法についても見ていきましょう。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のimgタグを使う方法について解説してきました。使い方については分かって頂けたでしょうか？imgタグは基本的なタグの一つです。紹介しているCSSなども併せて学ぶと、より自由度を高く、画像を操作できるようになりますよ。
