パスとは?絶対パス相対パスの違い。フォルダ構造や必要な3つのファイル

この記事は2分で読めます

自分用メモ

※参照:キタミ式イラストIT塾 基本情報技術者の内容まとめ
※参考:ウェブカツJavaScript・jQuery入門

パスとは?絶対パスと相対パスの違いも解説


パス:特定のファイルの場所までの道筋を記述したもの

以下の画像の、赤色の部分が「パス」である。
→htmlのaタグのリンク先や、
 imgタグのsrc属性(読み込むファイルの場所)に書かれている。

この「パス:ファイルまでの道筋」の「書き方の種類」として、
①絶対パス
②相対パス

の2種類があり、状況に応じて書き分けをしていく。


上記は「logo.png」というファイルへのパスを
「絶対パス」「相対パス」それぞれで書いた場合の違い。


こちらの画像は「相対パス」である。

なぜパスを覚える必要があるのか?


htmlを書く時には、ファイルを読み込む場面がいくつかあり、
その都度パスを必ず書いていく。

例えば、画像表示するimgタグでは、
「src属性」にパスを記述しなければいけない。

コンピュータは、こちらが表示したいファイルが
どこにあるかを知らないので、指定してあげる必要がある。
→コンピュータにとっての「パス」は「ファイルの住所」だと言える。


htmlでは、画像ファイル以外にも、
cssファイルやJavaScriptファイルを読み込む必要がありが、
こうしたファイルを読み込む際にもパスを記述する。


webページ内にある、テキストやボタンのリンク先にもパスを書く。
パスを書くことで、ブラウザが
どのページに遷移すればよいかを判断できる。

絶対パスの使い方


絶対パスは「絶対に変わる事のないファイルの住所」である。
「どのドメインの、どのフォルダの中の、どのファイル」を全て書く必要がある。

・どのドメインの:fruits.com
・どのフォルダの中の:img
・どのファイル:apple.png

階層が深くなるごとに、スラッシュで区切る。

相対パスの使い方


相対パスは
「表示したいページから見て読み込みたいファイルがどこにあるか」
を基準にして、パスを記述する。

もし、表示したいファイルから見て、
読み込みたいファイルが上のフォルダ階層にある場合は、
「../」を記述する。

「../category/../fruits/img/apple.png」



フォルダ構造やWebサイトを作る上で必要な3つのファイル


Webサイトを構成するフォルダやファイル群の構成のこと。

「フォルダ構造」は「ディレクトリ構造」とも呼ばれる。
フォルダは、ファイルが入っている箱のこと。

以下の画像は、フォルダ構造(ディレクトリ構造)の具体例である。

Webサイトを作る時は、基本的には以下の3点が必要。
①Webページそのものとなるhtmlファイル
②cssファイル
③ページ内の画像を表示するための画像ファイル

webサイトによっては、画像の枚数が100を超える事はザラなので、
管理しやすいように、画像専用のフォルダを作る必要がある。




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

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。