HTMLを勉強し始めたころ、私は「画像を表示するのって簡単そう！」と思っていました。
「画像をフォルダに入れて、imgタグを書けば表示されるんでしょ？」
最初は、なんとなくそんなイメージでした。
ところが実際にやってみると……
「あれ？コードは間違っていないはずなのに、画像が表示されない！」
と、かなり焦った記憶があります。
参考書を見ながら書いているのに、なぜ表示されないの？
何度もコードを見直して、「どこが間違ってるんだろう？」と悩みました。
そこで分かったのが、
画像はただフォルダに入れておけばいいわけではない
ということ。
HTMLには、「画像はここにあるよ！」と画像の場所を教えてあげる必要があるんです。
この記事では、HTML初心者の私が最初につまずいた「imgタグで画像を表示する方法」を、できるだけ分かりやすくまとめてみました。
imgタグって何？
まず、画像を表示するときに使うのがimgタグです。
基本的な書き方はこちら。
<img src="images/profile.jpg" alt="プロフィール画像">
最初は、このコードを見ても「なんだか難しそう……」と思うかもしれません。
でも、一つずつ見ていけば大丈夫です。
img
imgは、画像を表示するときに使います。
src
srcは、表示したい画像がどこにあるのかを指定する部分です。
alt
altは、画像の内容を説明するための文字です。
今回、私が一番つまずいたのは、この中でもsrcの部分でした。
「画像をフォルダに入れれば表示される」と思っていた
私が最初にimgタグを勉強したとき、
「画像をちゃんとフォルダに入れておけば、表示されるんだろうな」
くらいに思っていました。
参考書を見ながら、画像をフォルダに入れて、コードを書いて……。
「これで表示されるはず！」
と思ってブラウザを開いたら、
画像が表示されない。
「え？なんで？」
となりました。
コードを見直しても、間違っているようには見えません。
ここで私が分かっていなかったのが、
HTMLが画像を「探しに行く」というイメージでした。
HTMLは画像を「探しに行く」
これを知ったとき、私はかなり納得しました。
例えば、こんなフォルダになっていたとします。
📁 lesson
├── 📄 index.html
└── 📁 images
└── 🖼️ profile.jpg
そしてHTMLには、
<img src="images/profile.jpg" alt="プロフィール画像">
と書きます。
このとき、HTMLは、
「profile.jpgを表示してね」
と言われているだけではありません。
src="images/profile.jpg"
によって、
「imagesフォルダの中にあるprofile.jpgを探してね」
と教えてもらっているんです。
イメージすると、こんな感じ。
📄 index.html
↓
「profile.jpgはどこ？」
↓
📁 images
↓
🖼️ profile.jpg
↓
表示！
この「探しに行く」というイメージが分かると、imgタグが一気に分かりやすくなりました。
「なるほど！
画像をフォルダに入れておけばいいんじゃなくて、
HTMLに『画像はここにあるよ』って教えてあげるんだ！」
srcは「画像の場所」を教えている
では、もう一度コードを見てみます。
<img src="images/profile.jpg" alt="プロフィール画像">
この中の、
src="images/profile.jpg"
が、画像の場所を指定している部分です。
もっと細かく見てみると、
images
→「imagesというフォルダにあるよ」
/
→「その中に入ってね」
profile.jpg
→「この画像だよ」
という意味になります。
つまり、
src="images/profile.jpg"
は、
「imagesフォルダの中にあるprofile.jpgを表示してね」
とHTMLに伝えているようなもの。
私はここが分かってから、
「だから画像の保存場所が違うと、表示されないんだ！」
と納得できました。
画像が表示されないときに確認したいこと
もしimgタグを書いたのに画像が表示されなかったら、コードだけを何度も見直す前に、画像の場所も確認してみましょう。
① 画像は指定したフォルダに入っている？
例えば、
📁 lesson
├── 📄 index.html
└── 📁 images
└── 🖼️ profile.jpg
となっているなら、
<img src="images/profile.jpg" alt="プロフィール画像">
と指定します。
もし画像がimagesフォルダではなく、別の場所に入っていたら、HTMLから画像を見つけられないことがあります。
② ファイル名は合っている？
例えば、実際の画像が、
profile.jpg
なのに、
<img src="images/profile.png">
となっていたら、画像を見つけられません。
jpgなのかpngなのかも確認してみましょう。
③ フォルダ名は合っている？
実際のフォルダが、
images
なのに、
<img src="image/profile.jpg">
となっていないかも確認。
imagesとimageでは違います。
「そんな間違いする？」
と思うかもしれませんが、初心者のころって、こういう小さな違いで「あれ？」となるんですよね。
④ ファイル名のスペルは合っている？
例えば、
profile.jpg
なのに、
<img src="images/profle.jpg">
となっていたら、これも表示されません。
たった1文字違うだけでも、画像を見つけられないことがあります。
参考書通りにやっているのに、どうして迷ったんだろう？
今振り返ってみると、参考書の説明が分かりにくかったわけではないんです。
ちゃんと、
「画像をこのフォルダに入れます」
と書いてありました。
でも、当時の私は、
「なぜここに入れる必要があるの？」
というところまで理解できていなかったんだと思います。
ただ、
「参考書に書いてあるから、このフォルダに入れる」
という感じでした。
だから、少し場所が変わったり、自分でファイルを作ったりすると、
「え？画像ってどこに入れるんだっけ？」
と分からなくなっていました。
でも、
「HTMLが画像を探しに行く」
と考えるようになってからは、画像の保存場所を意識できるようになりました。
「ただ覚えるんじゃなくて、
『HTMLが画像を探しに行く』って考えたら分かりやすい！」
imgタグで画像が表示されないときは、まずここをチェック！
最後に、私が初心者のころに知っておきたかったチェックリストをまとめます。
画像が表示されないときは、
☑ imgのスペルは合っている？
☑ srcのスペルは合っている？
☑ 画像は指定したフォルダに入っている？
☑ フォルダ名は合っている？
☑ 画像のファイル名は合っている？
☑ .jpgや.pngなどの拡張子は合っている？
☑ HTMLから見て、画像がある場所を正しく指定できている？
まずは一つずつ確認してみましょう。
全部を一気に確認しようとすると混乱するので、一つずつ確認するのがおすすめです。
画像を表示できたら、次はCSSで整えてみよう！
HTMLで画像を表示できるようになったら、次は画像の大きさや形も変えてみたくなりますよね。
私は実際にCSSを使って、画像のサイズを変更したり、画像を丸くしたりしてみました。
そのときの様子はこちらの記事にまとめています。
HTMLで画像を表示するだけではなく、CSSを使うと画像の見た目もいろいろ変えられます。
また、「そもそもHTMLとCSSって何が違うの？」という方は、こちらの記事もどうぞ。
まとめ
今回は、HTML初心者の私が最初につまずいたimgタグで画像を表示する方法についてまとめました。
最初の私は、
「画像をフォルダに入れておけば表示される」
くらいに思っていました。
でも実際には、
HTMLが画像を探しに行く
というイメージを持つことが大切でした。
srcで、
「画像はここにあるよ！」
とHTMLに場所を教えてあげる。
そう考えると、画像が表示されないときも、
「コードが間違っているのかな？」
だけではなく、
「HTMLが探している場所に、ちゃんと画像があるかな？」
と確認できるようになります。
私自身、最初はここでかなり迷いました。
もし今、
「コードは合っているはずなのに画像が表示されない！」
と困っている方がいたら、まずは画像の保存場所とsrcの指定を確認してみてくださいね。
少しでも「なるほど！そういうことだったのか！」と思ってもらえたら嬉しいです。
コメント