★もきゅもきゅもみゅーん

【1】相対パス [relative path]

WEB業界で最も使用される一般的な書き方。ファイルの位置から対象のファイルまでの相対的な位置を表します。
例としては、「磐田市の隣にある浜松市」「../hamamatsu/index.html」。

【2】ルートパス（サイトルート相対パス） [(site) root relative path]

ルートディレクトリを起点とし、そこからの位置を表します。時々これを絶対パスという言い方をする人がいるので「/（スラッシュ）からはじまるかどうか」の念入りな確認が必要です。「サイトルート相対パス」という文言は、Adobe Dreamweaver 日本語版ヘルプに正式に登場し説明されています。
例として、「日本の静岡県浜松市」「/shizuoka/hamamatsu/index.html」

【3】絶対パス [absolute path]

リンクする際に外部サイトへはるときのような「http://」からはじまる完全な URL であり完全な住所です。自サイト内へのリンクでもこの書き方をするとプロトコルの考え方からかネットワーク技術者の方たちが「？！」というような顔をしますが、Google の正式なドキュメントとして、この記述方法が推奨されています。（参考：https://support.google.com/webmasters/answer/35156?hl=ja）ただ、いろんなデメリットから、この記述をする人はいないのが現状です。
例として「http://japan.com/shizuoka/hamamatushi/index.html」。

【4】サーバールートパス [(server) root relative path]

もうひとつの「ルートパス」。WEBデザイナーには馴染みのない記述方法で、どちらかというとネットワークやシステムの人向き。PHP やシェルスクリプトなど、サーバ内で使用する言語で頻繁に記述します（というか、この書き方じゃないと動かない）。UNIX系などの サーバー内の絶対パスで、経験上、技術者の間では「フルパス」という呼び方をされることが多いと感じます。
サーバーの仕組みとして、WEBサイトとして公開表示する public_html と名付けられることが多い公開領域のディレクトリがあるのですが、その公開領域（ドキュメントルート Document Root）からの相対パスではなく、サーバーの root からの位置への記述になります。
例として、「/var/www/public_html/shizuoka/hamamatsu/」。


こんなかんじ。
よく「どの書き方がいいの？」と聞かれますが。

まず、絶対パスと相対パスに分けられるべきだと思うのですが、「絶対パス」の定義が人それぞれです。
ただし大抵、この問題は「相対パス」と「相対パス以外」の記述方法で悩んでいるだけ。「相対パスでいいの？」という質問が本質の人だらけのような気がします。
なので、この問題には相対パスと相対パス以外の書き方にしたメリットとデメリットを説明する方が理解が速いです。


■相対パスのメリット
・ローカルでの制作でリンク切れしないのでプレビューが楽。
・環境外で階層が違ってもリンクが繋がる。
・記述が短いのでファイルサイズを小さくできる

■相対パスのデメリット
・階層を移動するとリンク切れする
・対象の絶対的な位置がどこなのか把握しづらい

□絶対パス系（相対パス以外）のメリット
・本番環境においてリンク切れしにくい
・階層を移動したりディレクトリごとコピーしてもリンク切れしにくい
・絶対的な場所を把握しやすい

□絶対パス系（相対パス以外）のデメリット
・ローカルでの制作でプレビューがしにくい
・コードがごちゃごちゃする

まとめるとこんな感じ。
普通に相対パスで書いておけば何の問題もないような気がするのですが、階層をやたらといじりまくったり多言語化されているなど、同じようなファイルが多くコピーで作るサイトの場合は、サイトルート相対パスで書いておいた方がリンク切れしにくいと経験上思っています。

何か理由の無い限り、相対パスでの記述をやめる必要性は無いと考えます。

HTMLコーディングは、日々進化していき新しい要素が出てくるので、コーダー系じゃないデザイナーの人は苦労しているのではないでしょうか。
苦労して時間をかけたりするより、思い切って HTMLコーディングという単調作業を外注してしまうのもイマドキの制作方法。
ベトナムなど海外だと、大体日本の半分の予算でコーディングの外注ができてしまうので、充分クライアントからの制作予算に見合う金額になっています。
クリエイターはクリエイティブな仕事をしてこそ。コーディングを外注して余った時間をデザインやディレクションに回し、クオリティを高めるのも１つの方法だと思います。



格安HTMLコーディングデザインだけやりたい・忙しい・予算ない人へ