【初心者向け】img要素とは？意味・使い方・読み方も分かりやすく解説

※当サイトではアフィリエイト広告を利用しています。

English
日本語

HTMLとCSSを知っている人

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

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

画像はテキストよりも情報量が多く、コンテンツの内容をひと目で説明できるなど、非常に重要な要素です。

そのため多くのWebサイトで画像が多く使われています。

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

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

img要素とは? 意味・読み方も解説

HTMLとCSSを知っている人

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

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

また、width属性やheight属性に数値を指定することで、画像のサイズを設定することができます。

なお、img要素には、alt属性を用いた適切な代替テキストの設定が必須とされています。

img要素で指定できる属性一覧

src：表示させる画像のURLを指定できます
alt：画像を表示できない時に表示させるテキストを指定できます
width：画像の幅を指定できます
height：画像の高さを指定できます

「img」とは「image」の略で、文書内に画像を表示するためのタグです。

正しい読み方は「イメージ」です。

表示する画像ファイルはsrc属性で指定し、WEB上ではGIF形式（.gif）、JPEG形式（.jpg）、PNG形式（.png）の画像形式を指定することができます。

HTML4.01 では、<img>タグにalt属性が必須とされています。

alt属性は画像が表示できないブラウザで画像を見た場合に替わりに表示するテキストで、読み上げソフトで読み上げられたり、点字で表現されたりする場合もあります。

※HTML5では必須でなくなりました。

width属性とheight属性は、ブラウザ上で画像の表示サイズを指定します。

必須ではありませんがブラウザがページを読み込む際に指定したサイズ分の画像スペースを先に表示し、テキスト部分の読み込みを始めることができます。

このことで、閲覧者の体感速度が上がりますので、できるだけ指定するようにしましょう。

HTML&CSS事典を欲しい方必見（kindle unlimitedだと無料で読めます）

HTMLとCSSを知っている人

本書はHTMLの要素（タグ）とCSSのプロパティを解説したリファレンスです。

開きやすく手元に置きやすいB6判で、タグやプロパティの内容をサッと調べることができます。

タグやプロパティの解説だけでなく、基礎知識編ではHTMLやCSSの仕様、記述方法に加え、文字参照、URLといったWeb制作者として不可欠な知識も解説しています。

また、読者特典として、本書で使用しているサンプルコードをダウンロードできます。

リンク

HTML&CSSを学びたい方必見

HTMLとCSSを知っている人

本書は、HTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ書籍です。

現在主流なWebページのデザインスタイル、「スタンダードレイアウト」「グリッドレイアウト」「シングルページレイアウト」を適用した3つのサイトを作りながら、各スタイルの特徴や使い分け、コーディングテクニックを学びます。

実際のWeb 制作の現場と同様に、サイトのデザインを基にして骨格を見極め、枠組みから中身までひと通りコーディングするというフローをなぞることで、HTML5/CSS3の実用的なコーディングスキルやテクニックを無理なく身につけることができます。

リンク

img要素の使い方

HTMLとCSSを知っている人

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

STEP.1

画像を用意する

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

WEBサイトで使用できる画像形式は、JPG（ジェイペグ）、 PNG（ピング）、GIF（ジフ）、SVG（エスブイジー）の4種類が有名です。

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

STEP.2

画像を表示する

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

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

上記のコードだけでは、画像の大きさはそのままで表示されます。

画像の大きさを指定したい場合は、imgタグに「width」と「height」という属性を加えます。

widthは幅、heightは高さを指定できます。

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

<!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要素は空要素と呼ばれており、終了タグを持っていません。

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

STEP.3

alt属性を追加する

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

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

下記の例だと、imgタグに「alt=”画像ファイル”」というalt属性を指定しているので、このような結果になりました。

imgタグで設定するaltテキストは、SEOという側面から重要視されています。機会があれば「altテキスト　SEO」などで調べてみましょう！

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

<!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属性を使う時の注意点

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

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

【実践編】レンタルサーバーにファイルをアップロードしてみましょう!

HTMLやCSSで使ったファイルをレンタルサーバーにアップロードすることでインターネット上にWebサイトが公開されます。

今までローカル環境でしか見れなかったWebサイトがインターネット上に公開されるとわくわくしますよね!

余裕がある方はレンタルサーバーにファイルをアップロードしてみましょう。

無料お試し期間もあるので是非レンタルサーバーを利用して学習してみてはいかがでしょうか!?

HTMLとCSSを知っている人

月額100円程度で利用できるおすすめのレンタルサーバーとして以下のものがあげられます。

ロリポップ！
⇒ 10日間無料体験に申し込む!
・速さ・安定性を備えた定番ベーシックプランがおすすめ！
・初期費用無料、月額550円〜、ドメイン2個永久無料などお得なキャンペーン実施中！
・10日間無料体験期間実施中
エックスサーバー
⇒ 10日間無料体験に申し込む!
・【2024/4/3まで】最大50%オフ！月額495円～利用できるキャンペーン実施中
・全プランで独自ドメインが永久無料でご利用可能！
・10日間無料体験期間実施中
ConoHa WING
⇒ WINGパックでお得に申し込む!
・【2024/3/13まで】WINGパックの12カ月以上新規お申し込みで通常料金から最大53%OFF
・WINGパックなら独自ドメインが最大2つまで永久無料！

格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

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

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

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

HTMLとCSSを知っている人

以下のプログラミングスクールもオススメです。

是非検討してみてはいかがでしょうか？

侍テラコヤ（初月50%OFF学び応援キャンペーン実施中）（解説記事はこちら）
⇒ 学び応援キャンペーンでお得に申し込む!
・コスパ最高! 月額2,980円〜利用できる!
・単月定額と比べて総額最大44,400円OFF!
・学び応援キャンペーン実施中!
ZeroPlus Gate（受講料98,000円がなんと0円!）（解説記事はこちら）
⇒ 受講料0円でプログラミングを学ぶ!
・受講料0円
・現役エンジニアに質問し放題
・30日で副業レベルのWebスキルを学べる
本気のパソコン塾（無料体験特典3つあり）（解説記事はこちら）
⇒ 7日間無料体験または無料相談会に申し込む!
・実際に役立つウェブデザイン、ウェブプログラミングを身につけることができる
・【期間限定】無料相談会参加特典3つあり!
・7日間無料体験・無料相談会実施中!