プログラミングをする上で、避けては通れない「パスの設定」。今回はそんなパスの設定の仕方についてHTMLを用いて解説していきます。
絶対パスとは??
「絶対パス」とは、画像や動画・音声ファイルなどの各種ファイルへ参照する際に、そのファイルがどこに位置しているかをルートディレクトリから指定する方法です。つまりは、現在いる場所からファイルまでのパスではなく、参照するファイルからみてはじまりに位置するディレクトリから参照するファイルまでのパスを書くようなイメージです。
例えば、Windowsのエクスプローラー上にあるとある画像の絶対パスを確認してみるとしましょう。(確認方法 -> 適当な画像の上で右クリックし、表示されたメニュー上から「パスをコピー」を選択 -> メモ帳などに貼り付けてみる)
仮にピクチャフォルダ内の画像ですと、以下のようなパスになります。(ユーザー名のところは設定して頂いているものが入ります。)
"C:\Users\ユーザー名\OneDrive\画像\03.png"また、とあるウェブサイト上の画像にアクセスする際のURLも絶対パスになります。
http://www.example.com/images/picture.jpg絶対パスの設定方法
基本的にHTML上で絶対パスを設定する場合は、
<!-- img要素の場合 -->
<img src="http://www.example.com/images/picture.jpg" alt="サンプル">
<!-- a要素の場合 -->
<a href="http://www.example.com/images/picture.jpg">サンプル</a>のように、そのまま貼り付けるだけになるため、使い方はシンプルです。貼り付ける絶対パスに誤りがないようにだけ気を付けましょう。
相対パスとは??
絶対パスと異なり、相対パスとは、現在作業しているファイルがある場所からとある場所にあるファイルまでのパスをいいます。
例を出しますと、家から学校までの道ではなく、家の近くのコンビニから学校までの道を設定するようなイメージです。家をルートディレクトリとして考えてみるとわかりやすいかと思います。
先程、絶対パスのところで使用したパスを例に、03.pngと同じく画像フォルダ内に格納されている別の画像にアクセスしてみますと、
./04.png
と書くことが出来ます。「./」とは、現在いる場所(今回でいうと03.pngが配置されている場所)を表しますので、上記のパスは同じ場所にある04.pngにアクセスすることを意味しています。
このようにとある場所を基準にパスを設定するのが相対パスです。
相対パスの設定例
私も現場でよく使用する相対パスの設定方法をいくつかご紹介します。何かの参考になれば嬉しいです。
同じ階層にファイルがある場合
htmlディレクトリ内に2つのファイルがあり、cssファイルにアクセスをしたい場合の相対パスをhtmlファイルのlinkタグで設定しようとしていると想定します。
- html
- test.html
- style.css[答え]
「./」とは、現在いる場所を表すものでしたね。つけなくてもエラーにはなりませんし、しっかりとcssも読み込んでくれますが、今いる場所にある別のファイルにアクセスすることを明示的に書いてあげることでプログラムを処理するPC側に分かりやすく伝えてあげられるので、つける癖をつけておくのもよいかと思います。
<link rel="stylesheet" href="./style.css">
もしくは
<link rel="stylesheet" href="style.css">同じ階層の別のディレクトリ内にファイルがある場合
次は、imgディレクトリとtest.htmlが同じ階層にあり、htmlファイルからimgディレクトリ内にあるtest.pngへアクセスするためのパスを考えていきます。
test.html
- img
- test.png[答え]
同じ階層にあることには変わりないため、以下のように書いてあげることが出来ます。間にディレクトリなどがきたとしても慌てずに現在作業している場所がどこかを確認しながら設定することがコツです。
<img src="./img/test.png" alt="画像を表示">
一つ上の階層の別のディレクトリ内にファイルがある場合
最後は、sampleディレクトリ内にあるhtmlファイルからimgディレクトリ内にあるtest.pngにアクセスする場合になります。
- sample
- test.html
- img
- test.png[答え]
新しいのが出てきましたが、「../」とは、一つ上の階層を意味しています。つまり、今回でいうと一つ上の階層とは、各ディレクトリがある階層ですね。「../」で一つ上にあがって、そこにあるimgディレクトリ内の中のtest.pngを参照してます。
<img src="../img/test.png" alt="画像を表示">
最後に
ここまで読んで頂き、有り難う御座います。
プログラミングを学習している方やこれから始めようと考えている方にお知らせです。
⇩⇩⇩⇩⇩⇩
- 独学で学習を続けても中々、理解が定着しない..
- エラーが出てしまい、想定した結果が得られない…
- フリーランスとしてデビューしたいが何からやったらいいかわからない…
などの悩みがある方必見！
実は、以下の内容が全て月額定額のサブスクで利用できるサービスがあります。
- 話題のAWSから人気のプログラミング言語Pythonをはじめとする
様々な教材(HTML/CSS, JavaScript, jQuery, Ruby, Ruby on rails, PHP, Laravel, Django, Java, Spring, Git, 機械学習, Linuxなど50種類以上)が無制限で閲覧可能。 - オンラインで利用できるため、隙間時間で学習ができる。
- 質問掲示板も24時間活用することが出来るため、自己学習や教材を通した学習で詰まっても気軽に質問が出来る。(講師の方が回答してくれる時間帯は、10:00～22:00です。)
- 入会金不要で、あわないなと思ったらいつでも退会が可能。
- 実務経験が３年以上の選び抜かれたエンジニアが講師として多数在籍しているため、安心。
- 質問掲示板でも解決できない疑問や悩みは、プラン応じて月1回~受講できるオンラインレッスンで解決できる
最初から定額であると少し抵抗があるという方もフリープランからお試しが出来るので安心です。会員登録も無料！
詳しくは、以下のリンク先のページからチェック！
コメント