フロントの学習の一環として、ファイルの扱い方について学んでいきましょう。
特に用語とパスは課題や業務で必ず接するので、必ず目を通しておきましょう。
用語
WEBサイトを管理する上で「ファイル」「フォルダ」「ディレクトリ」「パス」という言葉がよく出てきます。それぞれの意味は下記サイトを参考にしてください。
このマニュアルサイトでも頻出する用語なのでしっかり理解してから進めてください。
WEB開発なら必ず知っておきたい ディレクトリ、フォルダの違い、パスの理解を深めよう
パス
パスには、「絶対パス」「相対パス」「ルート相対パス」の3種類があります。それぞれの書き方の違いについては下記サイトを参考にしてください。
絶対パス、相対パス、ルート相対パスをわかりやすく解説！まずはイメージをつかもう！
＜例1＞
index.htmlとimgフォルダが同階層にあり、imgフォルダに格納されたdog.jpgという画像をindex.htmlから呼び出す場合。
/
├── img/
│ └── dog.jpg←呼び出し先
└── index.html←呼び出し元絶対パスの場合
<img src="https://xxx.jp/img/dog.jpg" alt="">
<!-- URLを直接書きます。画像の呼び出しではあまり使いませんが、外部サイトへリンクを張るときにも使います。 -->相対パスの場合
<img src="./img/dog.jpg" alt="">
<!-- "./"は「現在の階層」を表します -->
<!-- この"./"は省略可能なので以下のように記述してもOK↓ -->
<img src="img/dog.jpg" alt="">ルート相対パスの場合
<img src="/img/dog.jpg" alt="">
<!-- ドメインを省略した形が「/」です。（トップページがある階層でもあります。） -->＜例2＞
cssフォルダとimgフォルダが同階層にあり、imgフォルダに格納されたdog.jpgという画像をstyle.cssから呼び出す場合。
/
├── css/
│ └── style.css←呼び出し元
├── img/
│ └── dog.jpg←呼び出し先
└── index.html絶対パスの場合
.dog {
background-image:url(https://xxx.jp/img/dog.jpg);
}
<!-- URLをそのまま書きます -->相対パスの場合
.dog {
background-image:url(../img/dog.jpg);
}
/* "../"は「1つ上の階層に移動」することを意味します */
/* 「現在の階層」を表す"./"とは全く意味が異なるので注意してください */ルート相対パスの場合
.dog {
background-image:url(/img/dog.jpg);
}
<!-- ドメインを省略した形が「/」です。 -->＜例1＞と＜例2＞を見比べると「相対パス」だけが変わっていることが分かると思います。
「相対パス」は、「呼び出し元(index.htmlやstyle.css)」から「呼び出し先(dog.jpg)」に対して相対的な位置関係を記しているので、「呼び出し元」の位置が変わるとパスも変わります。
「絶対パス」と「ルート相対パス」は、ルートディレクトリ(階層構造の頂点)から「呼び出し先」への位置を絶対的に記しているので「呼び出し元」の位置が変わってもパスは変わりません。
ルート相対パスの場合はドメインから始まるため、ドメインが変更になっても読み込む記述を変更する必要がありません。
開発環境と本番環境とでドメインが異なるため、ルート相対パスが有効な場面も多々あります。
どのパスで書かれているか見分ける方法は以下の通りです。
| 絶対パス | “https://”から始まる |
|---|---|
| 相対パス | “./”から始まる(“./”は省略可能なので先頭に何もついていない場合も有る) |
| ルート相対パス | “/”から始まる |
どのパスを使うかはプロジェクトによって異なります。毎回確認してください。
本研修では基本的に「ルート相対パス」を使用するようにしましょう。
差分ファイル
差分ファイルはバージョンアップしたものと旧バージョンのものとの相違部分をまとめたファイルのことです。WEBサイトを修正、更新したときに「差分ファイルだけ下さい」と言われることがあります。少量であれば手動で作成することもできますが、ツールを使って作成することもできます。
納品時に使える 差分ファイルを簡単に作成できる便利なアプリ「scone Diff」
制作作業した差分ファイルのデータを作成するオススメの方法！(Windows)