こんにちは、Mochiです。
HTMLで画像ってどうやって表示するんだろう？HTMLの画像挿入では、どんな属性が必要なんだっけ？🤔
そんな方に向けて、HTMLで画像を表示する方法をわかりやすく解説します！早速学んでいきましょう！
画像を表示する<img>タグ
画像を表示するためには<img>タグを使います。一般的なタグとは違い、以下のように要素を挟まずにタグを書きます。よって一つのタグのみで完結します。
<img/>
要素ってなんだっけ？という方はこちらの記事を参考にしてください。
https://www.mochi-blog.blog/blog/html-intro
ただ、このままではどの画像を表示すれば良いのかわかりません。そこで属性を使っていきます。属性とは、タグに対して与える情報を表します。どんな属性を使うのか見ていきましょう！
画像の場所を示す src属性
画像を表示するために、画像の場所や表示する画像を選択するsrc属性を使います。”src”は情報源を表す英語”source”の略称です。
src属性への与え方は大きく分けて以下の2つがあります。
- 同じフォルダ内の画像の名前を直接指定する
- 異なるフォルダ内の画像の場所を指定する
それぞれ見ていきましょう。
1. 同じフォルダ内の画像の名前を直接指定する
同じフォルダ内とは、例えば以下のような場合です。
この場合にはsrc属性に画像のファイル名をそのまま指定します。指定することで画像が表示されます。
<img src="sample.png" />
2.異なるフォルダ内の画像の場所を指定する
異なるフォルダ内とは例えば次のような場合です。
この場合にはsrc属性に画像の場所とファイル名を指定します。このような場所を指定することを、パスを渡すと表現することが多いです。今回はimagesフォルダの中のsample.pngファイルを指定します。同様に画像が表示されます。
<img src="images/sample.png"/>
<img>タグには他にも
- alt属性
- width属性
- height属性
のような与えるべき属性がいくつかあります。それぞれ学んでいきましょう！
代替テキスト alt属性
代替テキストを表すalt属性は与えるべき属性です。”alt”は代替テキストを表す英語”alternative text”の先頭をとったものです。代替テキストとは、画像が何を表しているのかを説明した文章です。
役割は主に2つあります。
- 検索エンジンに画像の内容を伝える
- 目の見えない人がサイトをスクリーンリーダーで読み上げている時に、読まれる
どちらも重要な役割のため、alt属性は必須で与える属性です。文章の書き方は自由ですが、分かりやすい表現を心がけると良いでしょう。
alt属性は通常時は見えないです。一方で、画像がうまく読み込まれない時には表示されます。
<img src="sample.png" alt="サイトのアイキャッチ" />画像の縦横幅 width・height属性
画像の横幅を表すwidth属性と画像の縦幅を表すheight属性も与えておくと良い属性です。”width”は幅を表す英語です。”height”は高さを表す英語です。
それぞれピクセルの値を与えます。ピクセルとは画像の大きさの単位だと認識しておけばOKです。与えたピクセルの大きさに合わせて、画像のサイズが変化します。ここでは半分の大きさにしています。
<img src="sample.png" alt="サングラスをかけた3人とmochi blog" width="412" height="233" />
ちなみに、画像のサイズはVSCodeの方は画像ファイルを開いていただくと、右下に表記されています。
また、widthとheightのどちらかを与えると、元画像の縦幅と横幅の比率に合わせて、自動的にサイズを調整してくれます。ここでは試しに半分のサイズのwidthだけ与えてみましょう。
<img src="sample.png" alt="サングラスをかけた3人とmochi blog" width="412" />
特に画像の比率を変えるつもりがない場合は、widthとheightのどちらかだけでも良いでしょう。
まとめ
画像を表示・挿入する方法を解説しました。画像には<img>タグを使います。また、属性として画像の場所を表すsrc属性、代替テキストのalt属性、横幅のwidht属性または縦幅のheight属性を与えましょう。
参考になれば幸いです。
読んでいただきありがとうございました！
