2019年8月4日TwitterSharePocketHatenaLINEコピーするみなさんは『相対パス』や『絶対パス』というものを聞いたことがあるでしょうか。この『パス』というものは、ホームページの制作・管理において必要不可欠の知識です。サイト作りを始めたばかりの人の中には、パスを指定する方法がイマイチ分からないという人が多いと思います。・ビジネス・カード当サイトからの入会で初年度の年会費無料!『絶対パス』と『相対パス』の違いについて"パス"とは『特定のファイルやフォルダの位置を指定するための記述』のことを言います。パスには2種類あり、それが『絶対パス』と『相対パス』です。この2つについて、こんがらがる人が多いと思うので、違いを簡単に説明していきます。絶対パスとは、"URL"のこと『絶対パス』と言われても難しく考える必要はありません。要は"URL"のことです。"URL"についてはみなさん知っていると思います。『https://~』から始まるあの文字列のことです。▼このページの絶対パス(URL)絶対パス(URL)は簡単に言うと、『ウェブ上でのページ(もしくはファイルデータ)の住所』のことです。絶対パスと言われたら、「あ~URLのことか~」なんて思っていただければ基本的にはOKです。相対パスとは、現在位置を基準とした特定のファイルの位置ホームページを作っている人で、HTMLなどコードを記述している人であれば、この『相対パス』について理解する必要があります。相対パスとは『現在位置を基準とした、特定のファイルの位置』のことです。...と言われてもピンとこない人が多いと思います。そこで以下に『絶対パス』と『相対パス』の違いについて、分かりやすく説明した例を紹介します。(画像参照:https://toretama.jp/yougo17.html)まず、先ほど『絶対パス』のことを、ウェブ上での住所と説明しました。現実の住所に例えると、絶対パスは以下の画像のように相手の住所を直接指定する文字列ということになります。それに対して『相対パス』は、『自分の住所を基準としたときの、相手の住所』のことを言います。以下の画像のように相手と同じアパートに住んでいる場合、相手の住所を説明するときにいちいち「神奈川県横浜市~」なんて言わなくても、同じアパートに住んでいるのだから簡単に「101号室です」と言えばいいですよね。これが『相対パス』です。道案内で例えた場合、『絶対パス』は目的地の住所(URL)をそのまま伝える方法。『相対パス』は、『今いる場所から道を曲がって、道路沿いのつきあたりを右に~』というように、現在の場所を基準として目的地までの経路を案内する方法と言えます。以上で説明した絶対パスと相対パスの違いをふまえて、それぞれの指定方法について説明していきます。絶対パスの指定方法は簡単です。指定したいページやファイルの場所を、単純にトップURLから順に記述するだけでOKです。以下のような構造をした『https://abc.com』というトップURLのサイトがあるとします。このとき、『movie』フォルダ内の『review.html』というページにアクセスしたい場合を考えます。ホームページのトップURL『https://abc.com』から『review.html』までの経路は以下の通りです。review.htmlパスを指定する際、フォルダやファイルの区切りはスラッシュ「/」で表します。この経路の矢印(→)をスラッシュ「/」に置き換えたものが、絶対パスとなります。review.htmlまた、画像ファイルである『sample.jpg』を読み出したい場合も以下のように指定します。sample.jpg『絶対パス』はこのように、自分の位置に関係なく、相手の位置をトップURLから記述するだけで良いのです。絶対パスとは異なり『相対パス』では自分の場所を基準に、特定のファイルを指定します。『index.html』のページに、『function.js』というファイルを読み込ませたい場合を考えます。このとき、『index.html』から『function.js』までの経路は以下の通りです。function.jsこのとき『index.html』のページに記述するパスは以下のようになります。function.js※相対パスでは、現在の自分の場所は省略します。今度は『review.html』のページに『sample.jpg』の画像を読み込ませたいとします。このとき、『review.html』から『sample.jpg』までの経路は以下の通りです。sample.jpgここで注意したいのは、『review.html』から『images』までの経路で逆走が起きているということ。このように一階層前に戻る場合は、先頭に「../(ドットドットスラッシュ)」を付けます。『review.html』のページに記述するパスは以下のようになります。sample.jpg※2階層前に戻る場合は「../../」を、3階層は「../../../」といった感じに記述します。このように『相対パス』は、自分の場所を始点としたときの、相手の場所までの経路を記述します。パス指定の例では実際に、上の例での『index.html』のページに『function.js』ファイルを読み込ませたい場合の、それぞれの記述例を見てみます。『絶対パス』では以下のような書き方になります。src="https://abc.com/movie/js/function.js"></script>一方『相対パス』では『index.html』を始点とするため以下のような書き方となります。src="movie/js/function.js"></script>まとめ最後に『絶対パス』と『相対パス』についてもう一度まとめます。『相対パス』・・・自分の場所を始点としたときの、相手の場所までの経路を記述する方法なお、「ファイル読み込み行を記述するとき、絶対パスと相対パスのどちらで記述した方が良いのか」というご質問をよくいただきますが、どちらでもOKです。自分の分かりやすい方で記述してください。いかがでしたでしょうか。この記事で『パス』について理解できた!という方がいれば嬉しいです。今回説明した『パス』を含め、ホームページ作りの基礎を学びたいという方は、以下の参考書を一番おすすめします。「ホームページを作りたい!」「自分のオリジナルサイトを立ち上げてみたい!」と思ったことのある方は多いと思います。コメントをキャンセルメールアドレスが公開されることはありません。コメントニックネーム(任意)メールアドレスサイト関連記事HP・ブログ関連ページ移動時(遷移時)に微妙に左右にカクッとなる現象の解決方法ホームページ内で他のページへ移動した際に、左右に微妙にカクっとなってから表示される現象が気になる方もいると思います。Engine』がスゴイ!と、最近話題となっています。error』が発生しました。最初に言っておくと、当サイトは『さくらサーバー』を利用しています。9343』でFF14のベンチマークスコアを計測してみたみなさんこんにちは!ふかふかです。...HP・ブログ関連[bxSlider]スライドショーオプションの記述方法と使い方まとめ以前の記事で、サイト上に「bxSlider」のスライドショーを設置する簡単な方法について解説しました。最近はヴァーチャル・リアリティ(VR)関連の話題が絶えないですね!当サイトでもVR関連の話題を色々取り上げています。...HP・ブログ関連メールで.EXE(実行)ファイルを送信する超簡単な方法(バックアップ必須)○○○.exeのように、ファイル名の末尾(拡張子)にEXEが付いているデータのことを『実行ファイル』と言います。最近ではYouTubeやニコニコ動画といったウェブ動画配信サービスや、DVD・ブルーレイディスク(BD)にデータを落とし込んで動画コンテンツを楽しむ人がすっかり増えました。当サイトについて管理人:ふかふかゲーム、HP・ブログ制作、動画制作などのネットコンテンツ全般からレビュー情報まで分かりやすく紹介します。