在宅ワーク知恵袋

[HTML]簡単!絶対パスと相対パスの違いについて


今回は、絶対パスと相対パスについての解説になります。

パスは、名前の通り、経路を表します。

インターネットでサーバを借りたり、自宅サーバーなどを使ったりして、
コンテンツを公開するときに、このパスの知識が必要になります。

パスの使い道は、ファイルの読み込みのときに使うことになります。

index.html で css ファイルを読み込むときに、同じディレクトリに存在するのなら、
このパスは特に考えることはないのですが、
基本的にファイルの管理をしやすくするために、画像はimage フォルダへ、
スタイルシートは css フォルダへ、
javascript のファイルは js フォルダへ、
というように識別をします。

例えば style.css を index.html で読み込みたいときには
同じディレクトリにあるのなら

としますが、
もし css フォルダの中から読み込み場合は

というように css フォルダを指定するようになります。

サーバーなどでは、この index.html がおいてある現在の場所のことを
カレントディレクトリと呼びますが、
この現在地からの経路を示したものが相対パスとなります。

現在のディレクトリよりも上の階層を指定したい場合には、
../
というようにすると1つ上の階層が対象になります。
2つ上の階層なら
../../
となり、3つ上の階層なら
../../../
というように ../ が階層ごとに増えていきます。

絶対パスは、URLで指定したり、ディレクトリ構造そのものを記述することになります。

例えば、index.html であれば
/var/www/html/index.html
というようにサーバーでのファイルの場所を指定したり、
http:localhost/index.html
というようにURLを指定したりします。

また、bootstrap を読み込みたい場合には

というように絶対パスで指定することになります。

使い分けとしては、
相対パスで指定するときには、
自作のスクリプトやスタイルシート、HTMLファイルなどを読み込むときに使います

絶対パスで指定するときには、
bootstrap や FontAwesome など、公開されているライブラリなどを読み込むときに使います。

それでは実際に絶対パスの実験をしてみましょう。

実際にコードを書いたほうが理解しやすいので、Atom エディタで実践してみましょう。
なお、Emmet パッケージをいれれば簡略記法が使えるようになり、
Preview HTML パッケージをいれることで、エディタからサイトをみることができるようになります。

Emmet の記法については
Emmet チートシートで検索するとでてくるので、
調べてみると良いでしょう。

PreviewHTML は、ショートカットーで
ctrl + shit + h でエディタ右側にプレビューの表示ができます。

Atom パッケージ追加と検索することで、パッケージ追加方法はみつかりますので、
興味があれば試してみると面白いでしょう。

今回は、これらのパッケージをいれてあることを前提としてコードを書いていきます。

ゼロから作成する場合

として展開すると

というようにベースのコードが作成されます。

ubuntu の場合、tab キーで展開します。

まずは、この状態で
ctrl + shift + j でプレビューをみてみましょう。

すると真っ白な画面になっています。

Screenshot from 2016-06-06 23:02:24

今回は練習ということで、まずは同じフォルダに style.css を作成します。

コードは

として保存します。

次に、このstyle.css を読み込みます。

index.html で
Emmet 記法で簡単に作成できますので

として展開します。

すると

となり、これにより style.css が読み込まれ色が変わるのが確認できます。

Screenshot from 2016-06-06 23:06:41

次に、絶対パスの練習をしてみましょう。
今回は、簡単にアイコンが設置できる FontAwesome を読み込んで使います。

を追記することでライブラリを読み込むようになります。

次に、アイコンを作成します。

を body タグの中に記述することでカメラのアイコンを表示することができます。

Screenshot from 2016-06-06 23:37:51

このように外部ライブラリを読み込むことで簡単に機能を使えるようになります。

それでは、今回の要点をまとめてみましょう

・相対パスは、主に自作ファイルなどを読み込むのに使用する。
・相対パスは、ファイルを基点に考える。
・相対パスで、上の階層を指定するときには ../ を使う。
・絶対パスは、外部ライブラリなどの読み込みに使用する。

最初はわかりにくいパスの仕組みですが、プロジェクトでファイルを管理するときに便利なので
覚えておくようにしましょう。


この記事を書いた人:IBC

ITブートキャンプ運営事務局です。 随時ブログを更新していきます。