【web制作に役立つ】コーディングを学ぶ!「画像を表示する方法」を調べてみた①

画像を表示するには?

HTMLで画像を表示させるには、imgタグを使います。

imgタグの書き方

<img src="gazou.jpg">

src=” “のなかには「画像のファイル名」を入れます。

imgタグの特徴

  • imgでは終了タグは使わない。
  • 貼ることができるのはJPG/PNG/GIF形式の画像のみ


絶対パスと相対パス

src属性の値は「絶対パス」または「相対パス」で記述します。

絶対パス

画像の位置をURLで指定する方法。

自身のサイトのURLの末尾に画像のファイル名を入れることで画像を表示させます。

<img src="https://www.sample.com/gazou.jpg">

※絶対パスは、画像をインターネット経由で表示をしていることになるため、ローカル環境のオフライン状態では画像は読み込まれない。

相対パス

画像を表示させるページを基準にして、画像ファイルがどこにあるのかを指定することで画像を表示させます。

例えば画像を表示するページと画像ファイルが同じ階層にある場合は、

<img src="gazou.jpg">


画像ファイルがひとつ上の階層のフォルダ「image」内にある場合は、

<img src=""../image/gazou.jpg">


このようにひとつ上の階層は「../」、さらにその上は「../../」と、増えていくんですね。

まとめ

今回はHTMLで画像を表示させる方法を調べてみました!

ただ「画像を表示するタグ」としか覚えていませんでしたが、こういった特徴やルールがあるんですね。

第二弾ではさらにimgタグについて調べてみたいと思います。

コメント

タイトルとURLをコピーしました