絶対パスと相対パスを分かりやすく解説【HTML】

HTMLファイルで画像を使うとき、他のページに飛ぶときパスというものを使います。

パスは絶対パスと相対パスに分かれています。

他の解説しているサイトとは違く、絶対パス・相対パスの言葉の意味を用いながら解説していきます!

なぜその名前が付けられたのか考えながら学ぶことで理解力が向上します!

パスとは?

パスは英語で書くとpath

pathの日本語訳は「

なので、対象のファイルやフォルダから目的のファルダやファイル

行くまでの道パスという。

【practice】フォルダから【study-01.html】ファイルにアクセスする際
【study-01.html】ファイルから【sample.jpg】ファイルにアクセスする際

絶対パスとは?

絶対パスを日本語に訳すと「絶対的な道」

絶対とは「必ずそうである」ということ。
要するに「必ずある道」ということ。

検索を行ったとき、検索結果のリンクをクリックしますよね?
その際とんだページのURLは必ず「https://****.com」となっています。

そのリンクをコピーしていれば、検索にリンクを入れれば直接そのページに絶対行きます。

そうです。「https://****.com」は絶対的な道なのです。

要するに何もない状態からリンクを入力すればそのページにたどり着けるのが絶対パスです。

相対パスとは?

まず「相対」の意味を考えましょう。

相対とは向き合っていることですね。

相対パスは向き合う道…?

向き合う道とうことは道が2つあることですね!

それならば、今自分がいじっているHTMLファイルが1つの道だとして、使いたい画像ファイルをもう1つの道と捉えることができます!

2つのファイルは相対的ですね!

【study-01.html】ファイルから【sample.jpg】の画像を表示する際

study-01.html ファイルで sample.jpg を利用したいとき、同じフォルダの同じ場所に入っていればimgタグsrc属性sample.jpg書けば画像が表示されます。

次回予告

次回は絶対パス、相対パスの書き方について解説します!

0