基本的なWEB上のURL・パスの指定方法として、「絶対パス」「相対パス」をご存知だと思います。「サイトルート相対パス」とっても便利なんですが、ご存知ですか?「サイトルート相対パス」を知っておくと、コーディング・プログラムの効率性・汎用性が高まるので、おすすめのURLパス指定方法です。各ページ共通の「CSS」や「ヘッダー」「サイドカラム」「フッター」などはどのページでも同じ単一コード(ファイル)で扱いたい」場合にも超便利です。理由をまとめてみます。「HTML・CSS・javascript」等で使用する、公開領域内(Root以下)を参照するパスとなります。(「HTML・CSS・javascript」等は公開領域より上を参照できません。公開領域上位のドキュメントルートから参照となり、今回の記事の「絶対パス」とは別のパスになります。絶対パスや相対パスとの違いは?例えば、下記のようなディレクトリ構造で、アクセス元のページからリンクするとします。アクセス元(今いる場所)【絶対パス】(絶対URL)ここでいう絶対パスは、絶対URLと表現した方が分かりやすいかもしれません。src="https://example.jp/common/image/〇〇.jpg">となります。「https://ドメイン名」からのパス(=URL)になるので分かりやすいですね。デメリットとして、表記が長くなる+汎用性は落ちます。余談ですが、、、あるいは「//」から始まる「絶対パス」指定も可能です。href="//example.jp/">)この場合、「http:」へも「https:」(SSL化サイト)へもどちらへもアクセスが可能です。最初から「//」から始まるURLで指定しておくことをおすすめします。src="//code.jquery.com/jquery-3.2.1.min.js"></script>(自サイトをSSL(HTTPS)化した際も、外部リンク・リソース元などが「http:」の、SSL化されていないURLの読込でエラーになってしまうのを回避できます。href="../../../">トップページ</a>となります。src="../../../common/image/〇〇.jpg">となります。通常WEBサイト制作でよく使われる方法で、ディレクトリを今いる場所からたどっていく形式です。デメリットとして、階層が深くなったりCSS等外部読込ファイルでの階層を考えたりする際、少しややこしいです。階層ごとに表記パスが異なるので、階層を変えると全てのパスを変更する必要があります。「相対パス」はアクセス元とアクセス先のURLの相対的な関係を表すので、どの階層からどの階層へアクセスするのかを意識する必要があります。【サイトルート相対パス】では、おすすめの「サイトルート相対パス」についてです。href="/">トップページ</a>となります。src="/common/image/〇〇.jpg">となります。「サイトルート相対パス」は、サーバールート直下から下層へたどっていく形式で、常に「/」から始まります。どの階層にファイルを置いても、リンク参照は同じ表記となります。href=”/access.html”>」となる。)ポイントはつまり、サイト全体どこでも同じ表記ができ、分かりやすくシンプルです!読み込み元ファイルの階層を変更しても、全く問題なく(リンク切れになりません)、また、サイトドメイン名自体を変更しても影響なく、http://からhttps://にSSL化でドメインが変更になっても問題無く、リンク切れになりません。(テスト→本番環境への移行時も問題なし)ちなみに、html内でもCSS内でもJS内でも、どこでも利用可能です。SEO対策上も「サイトルート相対パス」は正しく認識されるので、問題はありません。canonical(カノニカル)タグのURL部分に「サイトルート相対パス」での指定が可能です。href="/about/exsample/">こういった重要なURL部分には、SSL化等で変更になってしまうURLの指定方法は避けたいものです。感覚的には「ドメイン名を省いた絶対パス」的に書けるので、シンプルで考えやすく、また一目瞭然で階層が分かるので、自身だけでなく他人が見ても分かりやすく解読性もUPします。どれだけネストした階層でもシンプルに書け、また読み込み元の階層を変更してもOK!と、どこでも同一表記・シンプル・解読性が高い・汎用性が高いなどメリットがたくさんあり、デメリットと言えるのは、次項のローカルで作業する場合の注意点と、汎用性が高い分コードを盗まれやすいことくらいでしょうか。「サイトルート相対パス」の注意点は、ローカル環境でプレビューする際です。誤った参照となりパスが外れ、リンクや画像やCSSなどがブラウザに読み込まれません。)等がありますが、ノンプログラマーでローカルサーバーをたてるのに抵抗がある場合は、WEBサーバーにFTPアップロードし確認するか、Dreamweaverを既に使用している場合は、Dreamweaverで設定するのが一番簡単かと思います。【サイトルート相対パスは】動的コンテンツにも超便利!WEBサイト設計をする際、どのページでも共通で使用する部分が出てきます。各ページの「ヘッダー」や「ナビゲーションメニュー」・「サイドカラム」・「フッター」、特に共通で使用する「CSS」などです。いった「共通部分はどのページでも同じ単一コード(ファイル)で扱いたい」場合に、どの階層でも同じ表記のできる「サイトルート相対パス」は超便利な訳です。「サイトルート相対パス」は、プログラマーにとっても特に必須な「パス表記方法」となります。動的に階層が変わるページでは、CSSが「相対パス」で書かれていると途端にリンク切れで、画像が表示されないよ!となってしまいます。コーディング段階で意識して「サイトルート相対パス」にしているかどうか、でその後に導入するプログラムの手間も変わります。いった理由でWebcode-labでは、ほとんどのパスを「サイトルート相対パス」方法で表記しています。※コメントへの返信は基本的に行っておりません。あしからずご了承ください。いただいたご意見・ご質問等は、公開が有益な場合公開させていただき記事内で返答させていただきます。※場合によりご連絡をさせていただく際のご了承をいただける方は「了承」にチェックをお願いします。