自分用メモ
※参照:キタミ式イラストIT塾 基本情報技術者の内容まとめ
※参考:ウェブカツJavaScript・jQuery入門
パスとは?絶対パスと相対パスの違いも解説
パス:特定のファイルの場所までの道筋を記述したもの

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

この「パス:ファイルまでの道筋」の「書き方の種類」として、
①絶対パス
②相対パス
の2種類があり、状況に応じて書き分けをしていく。

「絶対パス」「相対パス」それぞれで書いた場合の違い。

なぜパスを覚える必要があるのか?
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を超える事はザラなので、
管理しやすいように、画像専用のフォルダを作る必要がある。
この記事へのコメントはありません。