◆当サイトで人気のプログラミング教室のおすすめランキングはこちら!
プログラミングは独学では非効率で、時間を無駄にするリスクがあります。効率的なカリキュラムで学べるスクールを受講しましょう。

WEBCAMP【マンツーマンサポート】1ヶ月短期集中でプログラミングを学ぶスクール
1ヶ月通い放題・メンター常駐の教室環境でプログラミングを学びたい方!
TechAcademyオンラインで開講しているプログラミングスクール
オンラインでどこでも学べる!/教室に行くのが忙しい人でも安心!
Tech Camp教養としてのITスキルを学べるスクール
Webデザイン/AI(人工知能)/IOS/Androidアプリ制作/VRを学びたい方!
WEBCAMP PRO転職保証付き!エンジニアとして転職したい人におすすめ!
未経験からプロのエンジニアへ3ヶ月で転職する為のスクールです!
1月生募集中!当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のWebCamp Proコース。
11月生は満員となっております。12月生募集に向け、お早めの申込みをオススメします。
プログラミング未経験でもエンジニア転職を絶対成功させたい
スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください!

HTMLでページを構成するために必要なのがタグと呼ばれるものです。imgタグはそのタグの中のひとつであり、画像をページに表示させるときに使います。今回はimgタグの役割や使用方法、画像の表示方法を指定できる属性の使い方などをご説明していきます。

imgタグの役割とは?

imgタグはサイトに画像を表示するときに使います。タグの属性といわれる値を設定することで、画像の種類や大きさ、表示位置なども設定することが可能です。

画像はjpegやgif、pngといった種類のファイルが多く使われています。画像までの住所をあらわす文字列をimgタグの属性に指定することで、画像が表示される仕組みです。もしこのパスが間違っていた場合は、画像が表示できません。

・学習ステップを確認したい方は、【入門者向け】プログラミング初心者がHTMLを学ぶ6つのステップ」の記事を参考にしてください。

imgタグの使い方は?属性の役割や設定方法とは?

imgのタグには属性といって、imgタグに表示させる画像の住所(パス)や、横幅や高さ、説明文といった情報を設定する機能があります。これらの属性に適切な値を設定することで、サイトに画像が正しく表示できるようになります。

ここでは、そのimgタグの属性について役割や使い方、ソースコードなどをご紹介していきます。

・学習サイトでの練習を考えている方は、「【初心者向け】htmlの練習ができる学習サイト8選!」の記事を参考にしてください。

画像の住所をsrc属性で指定します

imgタグの属性であるsrcに、画像までのパスを指定することで、サイトに画像を表示することができます。srcに指定するパスは、多くの場合webサイトの画像の位置を示す文字列です。

<img src=”ここにパスを設定(img/test.jpgなど)”>

またローカルにあるファイルをブラウザで表示させたい場合はフォルダで表示される、例えばC:\で始まるような文字列を指定すると画像が表示されます。

<img src=”C:\test\test.jpg”>

・HTMLタグを一覧から探したい方は、「【初心者向け】htmlで使う主要なタグ一覧を解説」の記事を参考にしてください。

画像の大きさを指定できるwidth属性とheight属性

width属性とheight属性は画像の横幅と高さ指定する属性です。サイトの画像のサイズを指定するとき、多くの場合はピクセルと呼ばれる単位で指定しますが、パーセントで指定することもできます。width属性およびheight属性を指定しない場合、画像は元の大きさのサイズで表示されます。

これらの属性が指定されていないと、読み込みに時間がかかったり、レイアウトが崩れてしまったりといったことが起こるので、imgタグを使うときはなるべく横幅と高さを指定して使うようにしましょう。

<img src=”/img/test.jpg” width=”20” height=”20”>

・HTMLのコーディングの概要をまとめてみたので、

HTMLのコーディングの仕方を解説を参考にしてみてください。

画像の説明をするalt属性

画像が表示できない場合、文字で画像の内容を説明します。そのほかサイトのコンテンツを音声で読み上げるソフトでも、この文字が読み上げられます。

html4までは必須の属性として扱われていましたが、html5からは必須の要素ではなくなりました。alt属性に文字列を追加するなら、タイトルのように短いものではなく、文脈に添った説明的な文章を書くと良いとされています。

<img src=”/img/test.jpg” width=”20” height=”20” alt=”alt属性はその画像がどういうものかを説明する”>

・多くのテンプレートを知りたい方は、「【初心者向け】おすすのhtmlのテンプレート7選!」の記事を参考にしてください。

ちょっと上級編のimgタグの属性

指定した場所からリンクが設定できるusemap属性

このusemap属性はmapタグと合わせて使う属性です。mapタグには形や範囲、リンク先などの属性を指定でき、範囲の属性で指定された場所にマウスオーバーするとアイコンが矢印からクリックマークに変化します。

usemapには、このmapのname属性に設定した文字列、すなまちmapの固有名称を設定してください。


<span style="font-weight: 400;"><img src=”/img/test.jpg” width=”20” height=”20” alt=”説明文” map=”#map1”>
</span><span style="font-weight: 400;"><map name=”map1”>
</span><span style="font-weight: 400;"><area href=”test.html” shape=”rect” alt=”四角形のスペース” coords=”15,15,115,115”>
</span><span style="font-weight: 400;"></map></span>

・学習サイトでの練習を考えている方は、「【初心者向け】htmlの練習ができる学習サイト8選!」の記事を参考にしてください。

サーバサイドにクリックされた位置を送信できるismap属性

ismap属性はimgタグの中にismapと表記するだけで、画像がクリックされた位置情報をパラメーターとして送信することができます。ただしimgタグがaタグなどリンクを設定できるタグの子階層にあることが必要です。


<span style="font-weight: 400;"><a href=”test.html”>
</span><span style="font-weight: 400;"><img src=”/img/test.jpg” width=”20” height=”20” alt=”説明文” ismap>
</span><span style="font-weight: 400;"></a></span>

・HTMLをもっと楽に使いたい人は【HTML初心者入門】無料で使えるおすすめのツール・ソフト3選!を参考にしてみてください。

html4では使えたけどhtml5では廃止された属性

html4では表示方法を設定するための属性、aling属性、border属性、hspace属性、vspace属性が非推奨ではあるものの使うことができました。しかしhtml5ではこれらの要素は廃止されているので、html5でサイトを構築するときは注意が必要です。

ちなみにaling要素では上下左右、中央の位置を指定でき、boder属性では画像の境界線の太さを、hspace、vspace属性では画像の余白を設定することができました。html5ではこれらの設定はcssで設定するよう求められています。

・プログラミングは8割はerrorとの戦いです。そんな時に役立つよくある間違いをまとめてみました。

こちらのよくある間違いを紹介!【HTML初心者入門】を参考にしてみてください。

まとめ

いかがでしたか?imgタグの役割や使い方についてご理解いただけましたか?

imgタグはHTMLでページを構成する際に、画像を表示させるという重要な役割を果たすタグです。

属性の値を設定することにより、どの画像ファイルを表示させるのか、横幅や高さはどれぐらいにするのかといったことを設定できたり、画像の説明文を画像が表示できないブラウザなどに表示させることができます。

またusemap属性やismap属性を使うことによって、ちょっと複雑なページにすることも可能です。imgタグの属性については、html4では使えたものもhtml5では廃止されているなど、大きな変化もあります。

それぞれの規格に合わせた書き方ができるように把握しておくと、読みやすいサイトの構築ができるようになるでしょう。

1ヶ月でHTML・CSSができる!「WebCamp」とは?

WebCampは1ヶ月でプログラミング・Webデザインスキルを学ぶ通い放題のプログラミングスクールです。

参加する方の90%は未経験者です!

短期集中型のスクールなので、期間を決めて圧倒的に効率よくサイト制作スキルを身に着けたい方におすすめです!

わからないことを講師にすぐ質問できたり、通い放題で自分のスケジュールに合わせて来校することができるので、独学で学習するよりも早く確実にスキルが身につきます。

学習の疑問点やWebスキルのマスターの仕方がわかる無料説明会も開催しています。ぜひお気軽にお申込みください!

1月枠も残りわずか当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のWebCamp Proコース。
11月受入枠は満員となっております。12月枠に向け、お早めの申込みをオススメします。
プログラミング未経験でもエンジニア転職を絶対成功させたい
スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください!

▼未経験から1ヶ月でWebデザイン・プログラミングを学びたい方はこちら!

▼ついに開講!オンラインでWebデザインを学びたい方はこちら!

おすすめの記事