HTML・CSSのリンク設定。絶対パス、相対パス、ルートパスとは？
更新日：
今回はHTMLやCSSを書く上で必須となってくるパスの設定について解説していきます。
この記事におけるパスとは、HTMLやCSSでのリンクの設定方法になります。
どういったときに必要になるの？
HTMLの場合
画像やCSS、JavaScriptファイルなど外部ファイルを読み込む場合や、他サイトへのリンクを貼る際に使用します。
CSSの場合
主に背景画像やアイコン画像などを指定するときに使用します。
それぞれのパスの説明
では、どのような記述があるのかを詳しく解説していきます。
絶対パス
ファイルの場所を詳細に指定したもの。
httpやhttpsから記述します。
絶対パスの例
https://chiba-sakimi-blog.com/a/abc.jpg
- ファイルの位置関係を気にしなくて良い
- サイトの引っ越しをしたときに表示されなくなる
- 文字数が多くなる
相対パス
現在の位置から対象のファイルの位置を表現したもの。
例として1.htmlを編集します。
https://chiba-sakimi-blog.com/a/1.html
これは「chiba-sakimi-blog.com」というフォルダに「a」というフォルダがあり、
その中に「1.html」というファイルがあるイメージです。(厳密には少し違います)
今回はよく使う相対パスの2パターンを説明します。
同じフォルダ内のファイルにリンク
同じフォルダ内の画像へのリンクの貼り方です。
https://chiba-sakimi-blog.com/a/1.html
・対象のファイル
https://chiba-sakimi-blog.com/a/abc.jpg
現在の場所を表現するときは「./」を使います。
(「https://chiba-sakimi-blog.com/a」が省略されているイメージです)
記述例
<img src="./abc.jpg" alt="" >
別フォルダ内のファイルにリンク
別のフォルダ内の画像へのリンクの貼り方です。
https://chiba-sakimi-blog.com/a/1.html
・対象のファイル
https://chiba-sakimi-blog.com/b/xyz.jpg
一度上のフォルダである「chiba-sakimi-blog.com」に戻ってから「b」にアクセスします。
一つ上フォルダに戻るときは「../」を使用します。
記述例
<img src="../b/xyz.jpg" alt="" >
相対パスのメリット・デメリット
- サイトを引っ越ししてもそのまま使える
- 記述が短い
- ファイルの場所によって記述を変えなければいけない
- 共通ファイルなどでは使いづらい(ヘッダー画像など)
ルートパス
親ディレクトリ(一番上のフォルダ)から場所を指定したもの。
https://chiba-sakimi-blog.com/a/1.html
・対象のファイル
https://chiba-sakimi-blog.com/b/xyz.jpg
「https://chiba-sakimi-blog.com」が一番上ということが大前提で、
一番上のファイルを「/」と表現します。
記述例
<img src="/b/xyz.jpg" alt="" >
- ファイルの位置関係を気にしなくて良い
- コピペして使い回しやすい(サイトの共通パーツなどで使用)
- 文字が長くなる
おすすめの使い方
では具体的にどういった場合に使い分ければよいかを簡単に説明します。
絶対パスの使い所
- 外部リンク(自分のホームページ以外へのリンク)
相対パスの使い所
- 画像やPDFなどへのリンク
- 個別CSS,JavaScriptへのリンク
- 自分の他ページへのリンク
ルートパスの使い所
- メニューなどサイト共通のリンク
- ヘッダー画像などの共通の画像リンク
- 共通で使用しているCSS,JavaScriptへのリンク
まとめ
今回はパスの設定方法について解説しました。それぞれの使い所を意識して使用しましょう。
参考サイト
FASTCODING BLOG様