peeks-blog

自分用メモ

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

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

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

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

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

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


上記は「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を超える事はザラなので、
管理しやすいように、画像専用のフォルダを作る必要がある。