HTMLスキル - 第2章 Lesson8

画像を表示するための<img>タグの書き方

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

<img>タグを使えば、ウェブページに画像を表示させる事ができます。ここでは、適切な<img>タグの書き方について解説します。



この動画で学べること

・<img>タグの使い方



<img>タグを使って画像を表示する方法

前回の<p>タグの下に書いていきましょう。
画像を表示させるのは、<img> タグです。
このタグには終了タグはありません。

<img>タグの中では、「src(ソース)」を使って、どの画像を表示させるかを指定します。
今回は、imagesフォルダの中にあるmain.jpgを表示させてみましょう。

フォルダの名前の後、/(スラッシュ)でフォルダの中にはいり、ファイル名を指定します。


<img src="images/main.jpg">



一度保存し、ブラウザで確認してみましょう。





また、<img>タグの中にalt属性も指定しましょう。
alt属性は、表示する画像を説明する文章を入れて、何らかの問題でブラウザに画像が表示されなかった時に指定した文章を表示させることができるようにするものです。
音声読み上げの際にも、このalt属性に記入された文章が読み上げられるので、必ず入れるようにしてください。