「 HTMLで画像を表示するにはどのようにすればいいのかわからない。imgタグって何？どうやって使うの？…」
プログラミングを学習し始めた時は分からないことが多く、つまづいてしまいがちです。
今回はそういった方に向けてHTMLでの画像の表示の仕方、画像が表示されなかった時の対処法を紹介していきます。
imgタグとは
imgタグとはimageの略で画像を表示させるためのタグになります。
HTMLの要素には、属性というものを使用することができます。属性を指定することによって、HTMLの要素がどのような働きをするのか設定することができます。
imgタグでは、主にsrc属性とalt属性を使用します。
src属性にファイルのパスを記述することで画像を表示することができます。alt属性は主に、画像が表示されなくなった際にテキストで画像の内容を補完する役割を果たします。src属性で記述したファイルのパスが違った場合や、不具合が生じ画像が表示されなくなった際に、代わりにalt属性で記述したテキストが表示されます。下記の例で言うと画像が表示されなかった場合、”代替テキスト”と表示されます。
また、width属性、height属性を指定することによって画像の大きさを変更することもできます。
<img src="ファイルのパス" alt="代替テキスト" width="100" height="100">絶対パスと相対パス
実際に画像の表示をするにあたってsrc属性に記述するファイルのパスについて説明してします。パスとは、ファイルの場所を表すものになります。
src属性で記述するファイルのパスを間違えてしまうと画像が表示されなくなってしまうので注意してください。
パスについてはaタグなどにも使用するので覚えておいて損はないでしょう。
パスの書き方は、絶対パスと相対パスの二種類があります。
絶対パス
絶対パスとは、Web上の絶対的な場所を指定する方法です。絶対パスはよく住所に例えられます。画像ファイルの位置を完全に記述することによって、HTMLファイルの場所に関係なく表示することができます。
そのためHTMLファイルの構成を変更をする際、パスを変更する必要がないと言うメリットがあります。
webサイトの構造が上記の画像のような構成をしており、sample.pngを指定したい場合は
<img src="https://sample.com/img/sample.png" alt="サンプル画像です">という記述になります。
相対パス
相対パスとは現在いるファイルを基準として目的のファイルまでの相対的な位置を記述する方法です。
同じ階層のファイル、もしくはフォルダ内のファイルを指定する場合
パスを記述するファイルと、同じ階層のファイルを指定する場合
./ファイル名
パスを記述するファイルと、同じ階層のフォルダ内のファイルを指定する場合
./フォルダ名/ファイル名
という記述になります。
例)
Index.htmlと同じ階層にある、imgフォルダの中にあるsample.pngを指定する場合
<img src="./img/sample.png" alt="サンプル画像です">という記述になります。
一つ上の階層のファイル、フォルダを指定する場合
../ファイル、フォルダ名
という記述になります。
例)
coachtech.htmlから一つ上の階層にあるimgフォルダのsample.pngを指定する場合
<img src="../img/sample.png" alt="サンプル画像です">という記述になります。
また、二つ上の階層のファイルを指定する場合は
../../ファイル名
という記述になります。
同様に3つの時は../../../ファイル名、というように数が増えるにつれ../を増やすことによって指定することができます。
画像が表示されない！そんな時は
HTMLで画像を表示しようとした時に、画像が表示されない時があるかと思います。
そんな時の対処法をいくつか紹介していきます。
パスが違う
例えば、同じ階層のimgフォルダを指定したいのに
<img src="../img/sample.png" alt="サンプル画像です">というように一つ上の階層のimgフォルダを指定してしまっていた場合、画像は表示されません。
スペルミス
意外と多いのがスペルミスです。例えば画像ファイルの名前が、
sample.png
であるのに対し、
smple.png
と記述している時があります。
imgタグの記述が違う
HTMLは少しの記述ミスで正常に表示されなくなる場合があります。
特に注意していただきたいのが全角空白です。
ファイルの構成もあっていてパスの記述も間違えていない、スペルミスもない！
そんな時は全角空白が入っている可能性があります。
<img src="./img/sample.png" alt="サンプル画像です" >例を見ていきましょう。一見上記の記述は問題ないように見えます。しかし、<imgの後に全角空白が入ってしまっているため表示されません。
画像の表示に限らずエラーが起こった時は全角空白が入っている可能性もあるので注意しましょう。
全角空白を探す際は目視だと非常に探しづらいです。macの方は、command + f、windowsの方は、ctrl + fでページ内の文字を検索する検索窓を使用することができます。検索窓に全角空白を入力することで簡単に見つけることができます。
imgタグ以外で画像を表示させるには
HTML,CSSで画像を表示させる方法は大きく分けて二つ存在します。
- imgタグを使用する
- CSSでbackground-imageを使用する
imgタグを使用しない場合はCSSでbackground-imageを使用します。
background-imageを使用して画像を表示させる場合は、imgタグを使用する時とは異なり、要素の背景画像として表示されます。
HTML
<div class="firstview">
<h1>背景画像が表示されます</h1>
</div>CSS
.firstview{
background-image:url(../img/blog.png);
padding: 200px;
}例として上記のように記述した場合、背景画像が表示されますという文章の後ろに画像が表示されます。
まとめ
今回はimgタグを使用した画像の表示の仕方や表示されなかった時の対処法について詳しく解説していきました。
Webサイトを作成するにあたって画像の表示は非常に重要になってきます。
今回の記事が、少しでもプログラミングを学習する皆さんの助けになれば幸いです。