2021/2/18 「HTML&CSS辞典」をオープンしました! 是非、ご覧になってください!

[初心者向け!] img要素とは? 使い方も分かりやすく解説します!

img要素とはどのようなものか知りたい人

img要素とはどのようなものか知りたいな!

この記事は上記のような疑問を解消するものとなっています。

Webページに画像ファイルを組み込みたいと思ったことはないでしょうか?

そんな時に「img要素」を利用するとWebページに画像ファイルを組み込むことができます。

そこで、この記事では「img要素」について解説していきます。

気になる方は是非最後まで読んで頂ければと思います。

1.img要素とは?

img要素とは?

img要素はWebページに画像ファイルを組み込むための要素となっています。

src属性で画像ファイルのURLを指定すると画像を表示させることができます。

img要素で指定できる属性一覧
  • src:表示させる画像のURLを指定できます
  • alt:画像を表示できない時に表示させるテキストを指定できます
  • width:画像の幅を指定できます
  • height:画像の高さを指定できます




2.img要素の使い方

それではimg要素を利用して画像を表示させてみましょう。

STEP.1
画像を用意する

まずはWebページに表示させる画像を用意しましょう。

ここでは画像ファイル「example-image.png(128×128ピクセル)」を準備しました。

STEP.2
画像を表示する

次に画像ファイルを表示させましょう。

画像ファイルは「<img src=”example-image.png”>」で表示させることができます。

以下は画像ファイルを表示させるためのソースコードとなっています。

ブラウザで画像がどのように表示されるのかみてみましょう。

 

img要素について

img要素は空要素と呼ばれており、終了タグを持っていません。

そのため、末尾に「/」を入れて「<img src=”example-image.png” />」と記述することもできます。

STEP.3
alt属性を追加する

次にalt属性を追加しましょう。

alt属性は画像ファイルが正しく表示できなかった場合、テキストを代わりに表示させることができます。

基本的にalt属性は必ず記述するようにしましょう。

以下はalt属性を追加したソースコードとなっています。

alt属性を使う時の注意点

alt属性は画像の代わりに表示させるテキストなので画像のタイトル・説明を記述しないように注意して下さい。

画像のタイトル・説明を記述したい場合はtitle属性を使用しましょう。




3.まとめ

最後まで読んで頂きまして、ありがとうございました。

Webページで画像を表示することがよくあると思いますので、img属性の使い方はしっかりと理解しておく必要があります。

途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

以下のような本を一冊もっておくと何か分からないことがあったら便利です。(kindle unlimitedに会員登録をすると無料で読むことができるのでオススメです。)

以下の本はより実践的な内容になっているので、もっとHTML&CSSを学びたい方は取り組んでみることをオススメします。

他にもHTML&CSSを学ぶことができる教材を知りたい方は以下の記事もご覧になってください。

[初心者・中級者向け] HTML & CSS を学ぶことができるおすすめの本 [必見!] Udemy(ユーデミー) おすすめのHTML/CSS講座

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です