html imgタグで画像を指定するURLが何だか分からない【相対パスと絶対パス】

[chat face=”ハテナの人-1-1.jpg” name=”” align=”left” border=”gray” bg=”none” style=””]htmlの勉強をしているんだけれど、<img src=”URL”>のURLの部分がイマイチ良く理解できない。
URLって、https://～みたいな形のやつだよね？そこに使いたい画像を保存しておくの？？？どうやって？？？
ドットインストールの動画を見ると、https://～という形じゃないURLを書いているんだけれどアレはどういうこと？[/chat]

動画を見ながら独学でプログラミングの勉強をしていると、解説が不十分でよくわからないところが出てきますね。
今回は画像を挿入する際に指定するURLについての疑問を解説していきます。

[box02 title=”この記事の内容”]

• 『相対パス』と『絶対パス』の違い

• <img src="URL">

  のURLとは何をどう書けばいいのか

• https://～という形でURLを指定するには、画像をどうすればよいのか

[/box02]

html imgタグで画像を指定するURLって何？【相対パスと絶対パス】

ドットインストールのプログラミング学習の動画では、
『はじめてのhtml ＃04 imgタグで画像を表示しよう』のレッスンが画像挿入についてです。

相対パス【src=”img/画像ファイル名”】

上記のドットインストールの動画では、<img src=”img/taro.png“>となっています。
これは相対パスと言われます。

相対パスとは、htmlを記述しているファイルから見た画像ファイルの場所を示す書き方です。

ドットインストールの動画レッスンを見てみると、
htmlを記述しているファイル名は『index.html』。
そのファイルは『myportfolio』というフォルダの中にあり、そのフォルダ内には『img』というフォルダもあります。
そして『taro.png』はその『img』フォルダの中です。

この様に相対パスは、必要なファイルがすべて同じ場所（例えばあなたのPC上）にある場合に記述することができるのです。

絶対パス【src=”https://～/画像ファイル名”】

では絶対パスとは何でしょうか？

インターネット上に画像をしまってある時に使われます。
絶対パスを使う場合、画像は自分のPCのフォルダ内にはありません。

URLと聞くと思い浮かぶ、https://～この形で記述されているものが絶対パスと呼ばれるものです。
相対パスとの大きな違いは、他のサイトへ飛ぶ必要があるかというところ。

イメージとしては、
https://〇〇っていうサイトにしまってある『画像1』ていうファイルを持ってきて～！
といった感じです。

<img src=”URL”>のURLとは何をどう書けばいいのか

相対パスと絶対パスについてざっくり説明しました。
とはいえ、プログラミングの勉強を始めたばかりの頃は、100％理解できなくて良いと思います。
「こんな感じかぁ～」
と、なんとなくイメージが湧けばそれで充分です。

（だって私も全然わかりませんでしたから笑）

では次は、実際の相対パスと絶対パスの書き方について学びましょう。

相対パスの記述【同じサーバー内に参照フォルダ・画像がある場合】

まずは相対パス。
前述したとおり、htmlを記述しているファイル（＝画像を表示させたいhtmlファイル）から見た画像の場所を書きます。

▼例1
htmlを記述しているファイル名が『index.html』だとすると、
『taro.png』の場所を記述するには
/img/taro.png
です。

※同じ階層の場合、./ と記述することもできますがこれは省略することができます。
先程の /img/taro.png と ./img/taro.png は同じ意味になります。

▼例2
htmlを記述しているファイル名が『about.html』だとすると、
『taro.png』の場所を記述するには
../img/taro.png
となります。
頭に ../ が付きましたね。
これは「1つ上の階層のフォルダですよ」という指示の書き方です。

この様に、上の階層にいく場合は ../ と記述しますので覚えておきましょう。

絶対パスの記述【インターネットの他のサイトに画像がある場合】

次に絶対パスの記述方法です。

絶対パスを使うのは、自分のサイト上ではなくてインターネットの他の場所に画像をしまってある場合でしたね。

こちらも例を出しながら見ていきましょう。
当ブログはWordPressを利用しているのですが、記事内に表示させたい画像はWordPressのサーバーに保管してあります。

この様にimgタグのsrc=”URL”のURL部分には、WordPressの素材がしまってあるページのURLを書けばOKです。

https://～という絶対パスの形でURLを指定するには、画像をどうすればよいのか

WordPressなどのブログの雛形を利用してサイトを設計する場合、自分でimgタグを書くことはありません。
なぜなら、
そのようなサイトには、プログラミングを知らない初心者でも分かるように、
数回のドラッグ＆ドロップやクリックで簡単に画像を表示させることができるからです。

WordPress上に画像をアップロードすればOK。

まとめ｜imgタグで指定するURLは相対パスと絶対パスの2種類【それぞれ使い方に違いアリ】

imgタグでのURLの記述の違いは2種類。
『相対パス』と『絶対パス』

ざっくりと説明しましたが、前述のとおりプログラミングを始めて間もない頃は
あまり深く考え込む必要はないでしょう。

【初心者向け】絶対パスと相対パスの違いをイラストを使って解説！
わたしがこの”URLと相対パス、絶対パス”についてわからなくなった時に参考になった記事をリンクしておきます。
とてもわかり易く説明されています。

では、htmlの独学、共にがんばりましょう！