押さえておきたいWeb知識 
img要素とはどのようなものか知りたい人
この記事は上記のような疑問を解消するものとなっています。
Webページに画像ファイルを組み込みたいと思ったことはないでしょうか?
そんな時に「img要素」を利用するとWebページに画像ファイルを組み込むことができます。
そこで、この記事では「img要素」について解説していきます。
気になる方は是非最後まで読んで頂ければと思います。
目次
1.img要素とは?
img要素はWebページに画像ファイルを組み込むための要素となっています。
src属性で画像ファイルのURLを指定すると画像を表示させることができます。
- src：表示させる画像のURLを指定できます
- alt：画像を表示できない時に表示させるテキストを指定できます
- width：画像の幅を指定できます
- height：画像の高さを指定できます
2.img要素の使い方
それではimg要素を利用して画像を表示させてみましょう。
まずはWebページに表示させる画像を用意しましょう。
ここでは画像ファイル「example-image.png(128×128ピクセル)」を準備しました。
次に画像ファイルを表示させましょう。
画像ファイルは「<img src=”example-image.png”>」で表示させることができます。
以下は画像ファイルを表示させるためのソースコードとなっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>画像表示</title> <link rel="stylesheet" href="style.css"> </head> <body> <img src="example-image.png"> </body> </html> |
ブラウザで画像がどのように表示されるのかみてみましょう。
img要素は空要素と呼ばれており、終了タグを持っていません。
そのため、末尾に「/」を入れて「<img src=”example-image.png” />」と記述することもできます。
次にalt属性を追加しましょう。
alt属性は画像ファイルが正しく表示できなかった場合、テキストを代わりに表示させることができます。
基本的にalt属性は必ず記述するようにしましょう。
以下はalt属性を追加したソースコードとなっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>画像表示</title> <link rel="stylesheet" href="style.css"> </head> <body> <img src="example-image.png" alt="画像ファイル"> </body> </html> |
alt属性は画像の代わりに表示させるテキストなので画像のタイトル・説明を記述しないように注意して下さい。
画像のタイトル・説明を記述したい場合はtitle属性を使用しましょう。
3.まとめ
最後まで読んで頂きまして、ありがとうございました。
Webページで画像を表示することがよくあると思いますので、img属性の使い方はしっかりと理解しておく必要があります。
途中で分からないことがあり、中々進まないこともあると思います。
しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!
以下のような本を一冊もっておくと何か分からないことがあったら便利です。(kindle unlimitedに会員登録をすると無料で読むことができるのでオススメです。)
以下の本はより実践的な内容になっているので、もっとHTML&CSSを学びたい方は取り組んでみることをオススメします。
他にもHTML&CSSを学ぶことができる教材を知りたい方は以下の記事もご覧になってください。
[初心者・中級者向け] HTML & CSS を学ぶことができるおすすめの本
[必見!] Udemy(ユーデミー) おすすめのHTML/CSS講座
