HTMLスキル - 第7章 Lesson4

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

   

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

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

画像を表示するための<img>タグの書き方を、初心者向けに解説しています。



この動画で学べること

・<img>タグの使い方



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

画像を表示させる方法を見ていきましょう。
ここで使うのは<img>タグです。
<img>タグには、必ずsrc属性が必要になります。
src属性を追加することによって、画像がどこにあるかを示すパスを入力することができます。
今回は、今編集しているファイル(index.html)と同じ階層にあるフォルダ(images)の中にあるファイル(menu_coffee.jpg)をパスとして指定しましょう。




<p>
<img src="images/menu_coffee.jpg" alt="【カプチーノ:880円の画像】" title="カプチーノ:880円">
カプチーノ:880円
</p>




書いたコードを見るとわかるように、<img>タグを<p>タグで囲んでいます。
これは、<img>がインライン要素なので、ブロック要素のタグの中に入れる必要があるからです。
また、<img>タグにはalt属性(代替テキスト)を入れる必要があります。
万が一画像が表示されなかった時に、この代替テキストが表示されますので、画像の説明を簡単で結構ですので、書いておきましょう。
保存してブラウザで見てみると、このように画像が表示されました。