webcode-labサイトロゴ

  • お問い合わせへのリンクバナー

Webcode Laboratory
for website coding & program & seo;

Topics

この Blog CMS について
サイトルート相対パスは実は超便利でおすすめ!- 相対パス・絶対パスとの違いは?【HTML・CSS・PHP】 eyecatch画像

サイトルート相対パスは実は超便利でおすすめ!- 相対パス・絶対パスとの違いは?【HTML・CSS・PHP】

rss

WEBサイト制作に関わる方なら、
基本的なWEB上のURL・パスの指定方法として、「絶対パス」「相対パス」をご存知だと思います。

中堅のWEBデザイナー(コーダー)さんやプログラマさんでも、意外と!?知らない方の多い、
「サイトルート相対パス」
とっても便利なんですが、ご存知ですか?

パスイメージ画像


「サイトルート相対パス」を知っておくと、コーディング・プログラムの効率性・汎用性が高まるので、おすすめのURLパス指定方法です。
例えば、各ページ共通の「CSS」や「ヘッダー」「サイドカラム」「フッター」などはどのページでも同じ単一コード(ファイル)で扱いたい」場合にも超便利です。

なぜ便利なの??? 理由をまとめてみます。



ちなみに、「フルパス」は別のパス
今回の記事の「パス」とはWEB上のパスのことで、
「HTML・CSS・javascript」等で使用する、公開領域内(Root以下)を参照するパスとなります。
「HTML・CSS・javascript」等は公開領域より上を参照できません。)
他方、「フルパス」は通常「PHP」や「Perl」や「Ruby」などサーバーサイド言語で使用され、
公開領域上位のドキュメントルートから参照となり、今回の記事の「絶対パス」とは別のパスになります。


 






サイトルート相対パスって? 絶対パスや相対パスとの違いは?

例えば、下記のようなディレクトリ構造で、アクセス元のページからリンクするとします。

構造例 [https://example.jp/]

root(公開領域)

├ index.html (トップページ)


├ common/
│  └ image/
│     └ 〇〇.jpg

├ 
access/
│  └ index.html

└ works/
     └  id/
         └ 001/
             └ index.html
アクセス元(今いる場所)

 

【絶対パス】(絶対URL)

ここでいう絶対パスは、絶対URLと表現した方が分かりやすいかもしれません。

トップページへのリンクを「絶対パス」で表すと、

<a href="https://example.jp/">トップページ</a>
(あるいは、<a href="//example.jp/">トップページ</a>)

サーバールート直下「common」の「image」の中の「〇〇.jpg」画像にアクセスする場合、
〇〇.jpg」画像のパスは、

<img src="https://example.jp/common/image/〇〇.jpg">

となります。

「https://ドメイン名」からのパス(=URL)になるので分かりやすいですね。
ただ、デメリットとして、表記が長くなる+汎用性は落ちます(本番移行時や別ドメイン移行時に書き換えが必要)

※ 余談ですが、、、
あるいは「//」から始まる「絶対パス」指定も可能です。
(<a href="//example.jp/">)
この場合、「http:」へも「https:」(SSL化サイト)へもどちらへもアクセスが可能です。
Jquery等のCDNや外部サイトのAPIなど、
「http:」で指定していて、いずれその外部サイトが「https:」にSSL化された場合に、エラーとなってしまう可能性があるので、
最初から「//」から始まるURLで指定しておくことをおすすめします。
例:<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
(自サイトをSSL(HTTPS)化した際も、外部リンク・リソース元などが「http:」の、SSL化されていないURLの読込でエラーになってしまうのを回避できます。)
 

【相対パス】

トップページへのリンクを今いる場所から「相対パス」で表すと、

<a href="../../../">トップページ</a>

となります。
サーバールート直下「common」の「image」の中の「〇〇.jpg」画像にアクセスする場合、
今いる場所から〇〇.jpg」画像のパスは、

<img src="../../../common/image/〇〇.jpg">

となります。
 

通常WEBサイト制作でよく使われる方法で、ディレクトリを今いる場所からたどっていく形式です。

デメリットとして、階層が深くなったりCSS等外部読込ファイルでの階層を考えたりする際、少しややこしいです。
また、階層ごとに表記パスが異なるので、階層を変えると全てのパスを変更する必要があります。
「相対パス」はアクセス元とアクセス先のURLの相対的な関係を表すので、どの階層からどの階層へアクセスするのかを意識する必要があります。

 

【サイトルート相対パス】

では、おすすめの「サイトルート相対パス」についてです。

トップページへのリンクを「サイトルート相対パス」で表すと、どの階層からでも、

<a href="/">トップページ</a>

となります。

サーバールート直下「common」の「image」の中の「〇〇.jpg」画像にアクセスする場合、
〇〇.jpg」画像のパスは、どの階層からでも、

<img src="/common/image/〇〇.jpg">

となります。
 

「サイトルート相対パス」は、サーバールート直下から下層へたどっていく形式で、常に「/」から始まります。
どの階層にファイルを置いても、リンク参照は同じ表記となります。
(例えば上記構造のサイトで、サーバールート直下の「access.html」へのパスはどの階層からでも
「<a href=”/access.html”>」となる。)

 ポイントはつまり、サイト全体どこでも同じ表記ができ、分かりやすくシンプルです!

 読み込み元ファイルの階層を変更しても、全く問題なく(リンク切れになりません)、
また、サイトドメイン名自体を変更しても影響なく、http://からhttps://にSSL化でドメインが変更になっても問題無く、リンク切れになりません。
(テスト→本番環境への移行時も問題なし)

ちなみに、html内でもCSS内でもJS内でも、どこでも利用可能です。

また、SEO対策上も「サイトルート相対パス」は正しく認識されるので、問題はありません。
例えば、canonical(カノニカル)タグのURL部分に「サイトルート相対パス」での指定が可能です。
例:<link rel="canonical" href="/about/exsample/">
こういった重要なURL部分には、SSL化等で変更になってしまうURLの指定方法は避けたいものです。


名前こそ「サイトルート相対パス」と「相対」がついていますが、それは仕組み自体が「ルート直下からの相対的なパス」という意味なだけで、
 感覚的には「ドメイン名を省いた絶対パス」的に書けるので、シンプルで考えやすく、
また一目瞭然で階層が分かるので、自身だけでなく他人が見ても分かりやすく解読性もUPします。

どれだけネストした階層でもシンプルに書け、また読み込み元の階層を変更してもOK!と、
どこでも同一表記・シンプル・解読性が高い・汎用性が高い
などメリットがたくさんあり、
デメリットと言えるのは、次項のローカルで作業する場合の注意点と、汎用性が高い分コードを盗まれやすいことくらいでしょうか。







ローカル環境で【サイトルート相対パス】を使いコーディングする場合の注意点

「サイトルート相対パス」の注意点は、ローカル環境でプレビューする際です。
ローカル環境でコーディングしブラウザにそのままプレビューする場合、
「サイトルート相対パス」はローカル環境(PC)のルートパスから参照してしまうため、
誤った参照となりパスが外れ、リンクや画像やCSSなどがブラウザに読み込まれません。

その場合の対処法として、

  • WEBサーバーにFTPでアップロードして確認
  • 「XAMPP」や「MAMP」「node.js」等でローカルサーバーをたててlocalhostで確認
  • Dreamweaverで設定し確認( 設定方法参照:分かりやすい設定解説ページ )

等がありますが、
ノンプログラマーでローカルサーバーをたてるのに抵抗がある場合は、WEBサーバーにFTPアップロードし確認するか、
Dreamweaverを既に使用している場合は、Dreamweaverで設定するのが一番簡単かと思います。

 





さらに【サイトルート相対パスは】動的コンテンツにも超便利!

WEBサイト設計をする際、どのページでも共通で使用する部分が出てきます。
各ページの「ヘッダー」や「ナビゲーションメニュー」・「サイドカラム」・「フッター」、特に共通で使用する「CSS」などです。
そういった「共通部分はどのページでも同じ単一コード(ファイル)で扱いたい」場合に、
どの階層でも同じ表記のできる「サイトルート相対パス」は超便利な訳です。

特に動的コンテンツや動的ページを組む際に、
「サイトルート相対パス」は、プログラマーにとっても特に必須な「パス表記方法」となります。
例えば、動的に階層が変わるページでは、CSSが「相対パス」で書かれていると途端にリンク切れで、画像が表示されないよ!となってしまいます。

コーディング段階で意識して「サイトルート相対パス」にしているかどうか、でその後に導入するプログラムの手間も変わります。
そういった理由でWebcode-labでは、ほとんどのパスを「サイトルート相対パス」方法で表記しています。






 まとめ

  • 自サイト内のパス参照方法は「サイトルート相対パス」がおすすめ!
  • 「サイトルート相対パス」をローカル環境で表示確認するには設定が必要 
  • 外部サイトの参照(URLリンク)は「http:」や「https:」を除いた「//」から指定 

 



 
ページの先頭へ

rss
1件目 (1件中)