ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

【HTML】相対パス・絶対パス・ルートパスのメリット・デメリット + WordPress対応

【HTML】相対パス・絶対パス・ルートパスのメリット・デメリット + WordPress対応

「HTMLで使うパスについて知りたい」
「それぞれのパスの違いやメリット・デメリットについて知りたい」

悩み

こういった悩みにお答えします。

目次
  1. パスとは?
  2. 相対パス
    1. 書き方
  3. 絶対パス
    1. 書き方
  4. ルートパス(ルート相対パス)
    1. 書き方
  5. WordPress
    1. 書き方
  6. まとめ

パスとは?

HTMLを表示させるには、HTML(PHP)ファイルとは別に画像、CSS、JavaScriptなどのファイルを読み込んで表示させています。
どこにあるファイルなのかを適切に指定するためにパスを書いていきます。

相対パス

HTMLを学習する最初に使用するのは相対パスだと思います。
小規模サイトでは書くの簡単で使いやすいですが、中規模、大規模サイトになって階層が複雑になってくるとファイルの場所がわかりにくくなります。

POINT
相対パスは小規模な静的サイトを制作するときに使う!

書き方

現在使っているファイルを基準として「./」「../」「../../」などでファイルまで追って指定します。

<link href="./css/common.css" rel="stylesheet">

<script src="./js/common.js"></script>

<img src="./img/apple.jpg">
メリット
読み込み元となるファイルから見て、読み込むファイルがどこにあるのかがわかりやすい
サーバー環境などを気にする必要がない
デメリット
サイト構造が大規模や複雑になると、ファイルごとにパスを変更する必要があり管理しにくい
ルートから見てどこにファイルがあるのかわかりにくい
パスの書き間違いをしやすい

絶対パス

ドメインを含め、ファイルまでのすべてのディレクトリを書くのが絶対パスです。
ローカル環境ではまず使えないので、ほぼゼロからコーディングする人は使わないと思います。

WordPressなどCMSの管理画面上でしかコーディングや編集をしないという人がよく使っている気がしますが、絶対パスはできるかぎり避けたほうがいいと思います。

POINT
絶対パスは特別な事情がなければ使わない!

書き方

ドメインからすべてのディレクトリを順に書いていきます。

<link href="(ドメイン)/css/common.css" rel="stylesheet">

<script src="(ドメイン)/js/common.js"></script>

<img src="(ドメイン)/img/apple.jpg">
メリット
ルートから見て、読み込むファイルがどこにあるのかがわかりやすい
デメリット
ドメイン、SSL対応などの変更があった場合、すべてのパスを書き換える必要がある
サイト構造が大規模になると、すべてにドメインからのパスを書く必要があり記述量が増える

ルートパス(ルート相対パス)

ドメインを書かずにルートからのファイルの場所で指定します。
ドメインを書かないだけで以降は絶対パスと同じです。

POINT
特にサイト構成が複雑な中、大規模サイトでは、できるだけルート絶対パスを使う!

書き方

最初に「/」をつけるだけです。
以降、目的のファイルまでのディレクトリを順に書いていきます。

<link href="/css/common.css" rel="stylesheet">

<script src="/js/common.js"></script>

<img src="/img/apple.jpg">
メリット
ルートから見て、読み込むファイルがどこにあるのかがわかりやすい(絶対パスと同じ)
ドメイン、SSL対応などの変更があっても、パスを書き換える必要がない
デメリット
ローカルでのコーディングをするにはサーバー環境をつくる必要がある(XAMPP,MAMPP など)
サイト構造が変更(サブディレクトリなど)となったときはパスを書き換える必要がある

WordPress

WordPressの場合は、構造が特殊なので単純に相対パスでファイルの位置を追っていくことができません。
ディレクトリを呼び出すWordPress関数を使うことで指定することができます。

書き方

WordPerssでは、テーマ内でカスタマイズするのが基本なので、オリジナルのCSSやJavaScriptを読み込む場合は、テーマ内にフォルダをつくってそれぞれのファイルを入れていきます。
その場合、テーマを呼び出す関数を「 get_template_directory_uri() 」を使います。
HTMLソースに表示されるパスは絶対パスのようになりますが、こうすることでサーバを変更するときでもドメインは環境に合わせて自動的に変わるので、書き換えをする必要がありません。

<link href="<?php echo esc_url( get_template_directory_uri() ); ?>/css/common.css" rel="stylesheet">
↓
<link href="(ドメイン)/wp-content/themes/(テーマ名)/css/common.css" rel="stylesheet">

<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/common.js"></script>
↓
<script src="(ドメイン)/wp-content/themes/(テーマ名)/js/common.js"></script>

<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/img/apple.jpg">
↓
<img src="(ドメイン)/wp-content/themes/(テーマ名)/img/apple.jpg">

ページを指定する場合は、「 home_url() 」を使います。

<a href="<?php echo esc_url( home_url() ); ?>">
↓
<a href="(ドメイン)">

<a href="<?php echo esc_url( home_url( "contact" ) ); ?>">
↓
<a href="(ドメイン)/contact">
POINT
WordPressでは絶対パスを使わず、ファイルのディレクトリを呼び出すことができる関数を使う!
ページへのパスと、ファイルへのパスで使う関数が違うので注意する!

まとめ

絶対パス・相対パス・ルートパスとWordPressの場合について紹介しました。
それぞれメリット、デメリットがあるので制作する仕様、環境に合わせて最適なパスを使っていくことが大切です。