LinkWebデザインをしていると、必ず出てくるのが「絶対パス」と「相対パス」という概念です。一般的には「相対パス」を使うよう指導する場合が多いようなのですが、覚えやすさと確実性を考えるなら「絶対パス」がオススメです。まとめ「絶対パス」と「相対パス」どちらを使う?Webデザイン業界では「絶対パス」と「相対パス」どちらを使うかという問いに対して、結構多くの方が「相対パス」を使うとお答えになるかと思います。href="css/style.css"&gt;このような記述が一般的だと思います。これは「相対パス」で記述されています。相対パスは今いる場所を基準に書く方法なぜ、「相対パス」が推奨されたのかですが、よく言われる理由に「絶対パス」だと「http://」から記述しなければならず、ドメインが変わる時に修正が大変だ。いうものを結構見かけます。よって、それは面倒なので「相対パス」で書いておけば、「ドメイン引っ越ししても大丈夫じゃん?」という話になっているのです。相対パスは今いる場所を基準に書く方法なので、ドメインが変わろうが関係ないからです。これは2つの理由で良い方法とは言えない場合があります。絶対パスにはドメインを含まないものもあるたとえば、CSSやJSの場所は変わらないけど、HTMLファイルは階層が変わる可能性がある場合は「絶対パス」で書いておく方が便利です。これらの方法は「静的」に使う場合(CGIは使わない)に限られます。絶対パスにはドメインを含まないものもある「絶対パス」は「http://」から記述するものと、そうでないものがあります。/index.htmlこの「/index.html」は「絶対パス」で、「/」(スラッシュ)はRootを意味します。Rootとはホームページを公開する場合の最上位ディレクトリです。「/index.html」と書けば、どんなに深い階層からでも、最上位ディレクトリの「index.html」にリンク可能になるわけです。ここで少しご存知の方だと以下のように言うでしょう。絶対パスではなく「ルート相対URL」(1)は確かに「URL」です。これは「絶対パス」の範疇に入ります。(2)は「相対」って書いてあるからそう思うかもしれませんが、ルートから見た相対URLという意味なのであって、これも「絶対パス」の範疇です。「ルート相対=絶対パス」なのです。先ほど、「相対パスは今いる場所を基準に書く方法」と書きました。これは別名「相対URL」とも呼ばれますが、そもそも「URL」という言葉自体が後から出来たもので後付けで名前がついています。私はわかりやすさで言えば「絶対パス」と「相対パス」でよいと思います。「絶対パス」と「相対パス」よく似たもので「./index.html」というのがありますが、これは「相対パス」です。「今いるディレクトリと同じ階層のindex.html」です。http://www.sample.com/index.html「相対パス」は実はわかりづらいDOS時代からPCをいじっていると、こういった事は自然と身につくのですが、それでも最初のうちは「ヤヤコシイわい!」と思ったりしました。逆に「絶対パス」は、どこから参照しようとも同じパスを書くことができます。http://www.sample.com/a/index.html上は「どの階層」から見ても同じ記述になります。「絶対パス」と呼ばれるのです。CSSを相対パスで指定すると面倒な例CSSを「相対パス」で指定すると、以下のようになります。href="css/style.css"&gt;この場合「http://www.sample.com/index.html」から「http://www.sample.com/css/style.css」を参照した例です。href="../css/style.css"&gt;このように記述しなければなりません。面倒くさいかは、ともかくとして、これは「凡ミス」の原因になります。「絶対パス」では、そのような面倒はありません。href="/css/style.css"&gt;どこの階層からでも、上記のように記述するので、間違いが起こりづらく、階層構造を考えるのも簡単です。頭「.」(ドット)のない「/」(スラッシュ)から始まるパスはルートからの絶対パスだと考えておけば良いので、ドメインのないURLのように扱うことができます。/css/style.css上記はどちらも「絶対パス」ですが、同じ場所を示しています。ドメイン引っ越しがあっても問題ありませんね。PHPを使うWordpressとも相性が良いPHPはひな形ファイルを参照して、HTMLを動的に表示するプログラムになります。href=""&gt;CSSを呼び出す場合は「bloginfo(‘template_url’)」や「bloginfo(‘stylesheet_url’)」を使って、絶対パス(httpで始まる)で出力されます。いうことは、デザインHTMLを制作する時点で「絶対パス」を使って記述しておく方が、プログラマには優しい記述になります。href=""&gt;PHPを差し込むだけで作業が終わる利点もあります。Wordpressではスタイルシートの参照パスを絶対パスで表記するのでしょうか?Wordpressのテーマファイル(HTML/CSSなど)は階層の奥深くに格納されます。それをPHPで動的にルートのindex.htmlとして出力したりしています。出力したindex.htmlの中でCSSの参照を相対パスで書いてしまうと、テーマファイルが格納されている奥底の階層に届くことができません。「ひな形」ファイルの格納されているパスと、それを使って出力したHTMLファイルは必ずしも同じ階層にはならないので、このようなことが起こります。そこで、絶対パスで書いてやることで、見ているページがどんな階層のURLでも、必ずテーマファイルのあるパスを参照してくれるのです。href=”URL”」を使った方法は使えません。href="http://www.sample.com/"&gt;たとえば、上記のようなタグをHTMLの最初に書いておく方法ですが、これはHTMLファイル内でリンク関係は相対パスで書かれている場合にしか効果がないからです。HTMLでは相対パスより絶対パスの方がおすすめ「相対パス」でも、すべてのHTMLがルートにあるようなファイル構成にしていれば、相対パス記述でミスることはありません。細かく階層を切ってHTMLを格納していく方法はおすすめではないと言っても、必ずしも全HTMLファイルをルートで扱えない場合もあります。その、多くはCGIを使う場合です。(Wordpressも同様で、要するにひな形としてHTMLファイルを出力する場合)しかし、「絶対パス」の方が、どこから参照しても同じ記述になるという利点があるのは事実です。HTMLを記述する場合は、パス(PATH)の考え方を「絶対パス」にしておくと、間違いなどもなくなり楽になります。HTMLでは相対パスより絶対パスの方が「理解しやすい・わかりやすい」という点ではおすすめです。真逆の話になりますが「相対パスの方がおすすめ」なやり方もあります。それは、「HTMLファイルはすべて最上位階層に設置する」方法です。この場合、「CSS」や「JS」ファイルはどのHTMLから参照しても同じパス記述で書けるので、「相対パス」でも苦になりません。昔はHTMLファイルを分類ごとにディレクトリ階層で分けた開発が多かったのですが、それをやると前述のように「CSS」や「JS」ファイルの参照先を「../css」のようにHTMLごとに変えて記述しなければなりませんでした。これは非常に面倒くさいので、「HTMLファイルはすべて最上位階層に設置する」方法が本来は一番無難な方法です。この場合であれば、絶対パスより相対パスの方がおすすめです。href="/"&gt;と入れるだけで相対パスがテーマフォルダの内容を参照してくれるからです。これなら「CSS」や「JS」ファイルの参照先も相対パスで書くことができます。まとめ・静的利用やHTMLファイルを階層管理するなら「絶対パス」がわかりやすい・動的利用もしくはHTMLファイルをルートですべて管理するなら「相対パス」がわかりやすいこれからワードプレスのテーマファイルを開発したり、CGI開発を前提にするなら、HTMLはルートですべて管理するというポリシーを徹底して、相対パスを使う方が良いでしょう。「難しくない!おすすめのWebデザイン(開発)ポリシー」も合わせてお読みいただくと理解が深まると思います。Link最新記事はトップページで!「オスミツキ!」のトップページはこちらです。京都発・地方が盛り上がるグルメや観光に撮影ロケ地の話題を提供!購読するならRSSをご利用ください!RSS「お墨付き!」(osumituki.com)RSSはこちらをご利用ください。マスコミ各社様の記事使用規約についてはこちらをご覧ください。当ブログでは掲示板やSNSなど他メディアでURLや記事を紹介することはございませんので、掲示板などで記事を紹介されていても一切無関係です。誤解なきようお願いいたします。当ブログで転載しているTweetはTwitter社の規約(2013/10)に準じた形式(API利用)によって許可された範囲で行われています。Tweet内容の所有権はTwitter社の規約によりTweet元のアカウント所有者にあります。そのため、当ブログでその所有権を主張するものではありません。Tweet内容については責任は負いませんので予めご了承ください。記事が流用・引用されている件や記事を紹介する場合に注意していただきたいことオスミツキ!.Kyoto.Japan./g,'>');jQuery(this).html(text);});。