相対パス・絶対パス

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

よく考えたら絶対パスとか相対パスとか、ググったらいくらでも説明出てくるのでググりましょう。

相対パス・絶対パスは基本中の基本なので、必ず概念を理解しましょう。
ググるのだけ手伝います。

google検索:「相対パス 絶対パス」

相対パス・絶対パスとかいうけどそもそも「パス」ってなんなのか

もう、なんとなくわかったらMAMPで仮想サーバ立ち上げてスラッシュからの絶対パスを使うのがいいんですが、難しく感じると思うので、いったんそういうのは考えるのをやめてまずは「パス」ってなんなのかを説明します。

パスっていうのはイコールファイルの住所のことです。

そもそも、インターネットでウェブサイトを見ているとき、いったいどこの何を見ているのかというと、まずどこか(大阪とか東京とか沖縄とかにあるサーバ屋さんのサーバ用倉庫など)にあるサーバー(画面のないパソコン本体みたいなもの)内のとあるフォルダにドメインが紐づけられてます。紐づける仕組みがあって、それはサーバ屋さんがやってます。そういうもんだと思ってください。
ブラウザでそのドメイン(URL)を開いたときに、そのフォルダに保存してあるhtmlファイルがあなたの手元の端末のブラウザに表示されます。(※厳密に言えばHTMLだけではないけど、それは置いといて)

つまりパソコン = サーバーです。

ローカル(お手元の端末=パソコン)のどこかに保存しているhtmlファイルも、Chromeなどのブラウザにドラッグして開けばURLがブラウザ上部で確認できますね。

これがまず絶対パスです。

htmlと同じく、画像(.jpg, .png, .gif, .svgなど)やjavascript(.js)などのHTML以外のファイルもブラウザにドラッグしてあげるとだいたい開きますね、そしてURL(パス)が見られます。

絶対パス


// ローカルの絶対パス
file:///Users/<USER_NAME>/Documents/<FOLDER>/index.html
file:///Users/<USER_NAME>/Documents/<FOLDER>/images/hoge.png

// インターネット上(サーバ)の絶対パス
https://tk4.biz/index.html
https://tk4.biz/common/images/hoge.png

そしてこういったパスをどこで使うのかというと、
前回までに説明した「cssを読み込む」ときや、リンクを春とき、画像をHTMLに表示させたいときなど、HTMLと紐づけたいとき・読み込ませたいとき、つまり繋げたいときに必ず使います。

そのパスの書き方が絶対パスや相対パスというわけです。

HTML


// 絶対パス
<a href="https://tk4.biz/">XXX</a>
<a href="https://tk4.biz/index.html">XXX</a>
<img src="https://tk4.biz/common/images/hoge.png" alt="ほげ">
<img src="/common/images/hoge.png" alt="ほげ">

// 相対パス
<a href="./">XXX</a>
<a href="./index.html">XXX</a>
<a href="../product/">XXX</a>
<img src="../../common/images/hoge.png" alt="ほげ">

ここを見ている方は、ローカルで作業するときHTMLをブラウザで表示確認のため見ることになりますが、相対パスじゃないと普通は表示確認できないので相対パスを使うことになると思います。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す

*