プログラミング・ITHTML

Blog Article

HTMLで画像を挿入・表示する方法 - imageタグをわかりやすく解説

こんにちは、Mochiです。

HTMLで画像ってどうやって表示するんだろう?HTMLの画像挿入では、どんな属性が必要なんだっけ?🤔

そんな方に向けて、HTMLで画像を表示する方法をわかりやすく解説します!早速学んでいきましょう!

画像を表示する<img>タグ

画像を表示するためには<img>タグを使います。一般的なタグとは違い、以下のように要素を挟まずにタグを書きます。よって一つのタグのみで完結します。

<img/>


要素ってなんだっけ?という方はこちらの記事を参考にしてください。
https://www.mochi-blog.blog/blog/html-intro

ただ、このままではどの画像を表示すれば良いのかわかりません。そこで属性を使っていきます。属性とは、タグに対して与える情報を表します。どんな属性を使うのか見ていきましょう!

画像の場所を示す src属性

画像を表示するために、画像の場所や表示する画像を選択するsrc属性を使います。”src”は情報源を表す英語”source”の略称です。

src属性への与え方は大きく分けて以下の2つがあります。

  1. 同じフォルダ内の画像の名前を直接指定する
  2. 異なるフォルダ内の画像の場所を指定する

それぞれ見ていきましょう。

1. 同じフォルダ内の画像の名前を直接指定する

同じフォルダ内とは、例えば以下のような場合です。
同じフォルダ内の画像とhtmlファイル
この場合には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つあります。

  1. 検索エンジンに画像の内容を伝える
  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の方は画像ファイルを開いていただくと、右下に表記されています。
VSCodeの画像サイズが表示される部分

また、widthとheightのどちらかを与えると、元画像の縦幅と横幅の比率に合わせて、自動的にサイズを調整してくれます。ここでは試しに半分のサイズのwidthだけ与えてみましょう。

<img src="sample.png" alt="サングラスをかけた3人とmochi blog" width="412" />



特に画像の比率を変えるつもりがない場合は、widthとheightのどちらかだけでも良いでしょう。

まとめ

画像を表示・挿入する方法を解説しました。画像には<img>タグを使います。また、属性として画像の場所を表すsrc属性、代替テキストのalt属性、横幅のwidht属性または縦幅のheight属性を与えましょう。

参考になれば幸いです。
読んでいただきありがとうございました!

🤗おすすめ

本で体系的にHTMLについて学びたいという方にはこちらの本をおすすめします。HTMLの基礎から実際のWebサイト作成まで書かれており、豊富な図が含まれているため、多くの方が理解しやすい本です。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

YouTubeのように動画でサクサク学びたいという方には、Udmeyの講座をおすすめします。私もよく使うのですが書籍に比べ実用的な内容を学びやすく、隙間時間に見れるのがいいです。ぜひ気になるHTMLやWeb開発の人気オンラインコースを受講してみてください。

Udemy 人気のオンラインコース ウェブ開発

参考になれば幸いです。 読み返したい方は、ぜひブックマークへの登録がオススメです。
読んでいただきありがとうございました!🙌

このページの内容