じゃじゃ〜ん!!
すみれちゃん、僕を呼んだかな?

えっと〜、サイトに画像を挿入する方法を知りたいんだよね?

わかった。じゃあ今回はどうやってhtmlに画像を挿入して、Webサイトに反映させるかを解説するね。

画像を挿入する際はimgタグを使うんだ。imgタグは終了タグが無いから、
<img src=”画像がある場所”　alt=”画像の説明”>
こんな感じで記述するんだよ。

画像がある場所というのは、
htmlファイルから見て、どの場所にあるのかと言うことなんだよ。

こんな感じでhtmlファイルから見てどこに画像があるのかを教えてあげる必要があるんだ。
これらを教えるのが相対パス、絶対パスと言うよ。

それでは画像の場所を教えるために<img src=””>にどう記述するかを教えるね。

• 相対パス
• 絶対パス

このどちらかを使って画像の置いてある場所を探すんだ。
難しそうな言葉だけど、意外と意味は簡単なんだ。

例えば、
すみれちゃんは、旅行先の駅から宿泊するホテルにタクシーで行く時に運転手さんにどう伝える?

なるほど。確かにその方法だとホテルにたどり着くね。
「住所orホテル名を伝える」→絶対パス
「道順を教える」　　　　　→相対パス
このようなイメージかな。

どちらを使っても問題ないけど、一般的に相対パスを使うみたいだよ。僕自身、ホームページなどを作ったりしてみて、相対パスを使うことがほとんどだからね。

それじゃあ実際にどう記述していくのか説明するね。

すみれちゃん、画像を使うときには注意しなきゃいけないことがあるんだ。
綺麗なかっこいいサイトを作りたくてお洒落な画像を探して使いたくなるかもしれないけど、ネットで検索した画像を無断で使うのは著作権違反になる可能性があるんだ。
だからネットでフリー素材の画像を検索して使用すると良いよ。

僕が普段使用しているサイトをご紹介しておくね。
pixabay
いらすとや

良いところに気がついたね。
alt=”画像の説明”
これはね、簡単に言うとどうゆう画像かを文章で説明したモノなんだ。必ず記述する必要があるわけではないけど、例えば画像が表示されない時にここに記述した文が表示されたり、読み上げ機能でホームページを閲覧した時の読み上げテキストとして役に立つから記述することをお勧めするよ。