画像が表示されない!絶対パスと相対パスの話

img_path

htmlを触りだして間もない新人社員に、画像が表示されなくなっちゃいましたと報告を受けた時に毎度出てくるのがパスの問題です。初歩的な話なので理解してる人間から言わせるととっても簡単なのですが、理解出来てないと本当に苦労します。
今回はimgタグにフォーカスをあてていますが、それ以外のタグ等でも同じ仕組みなのでしっかりマスターしましょう!

スポンサーリンク

パスとは

パスというのはimgタグでいう、srcの値です。srcには画像の在処が記されているのですが、これには大まかに二つの書き方があります。その書き方によって思ったように表示されたり、されなかったりする場合があるのです。まずは絶対パスと相対パスという表現を覚える事で仕組みを覚えましょう。

絶対パスと相対パス

昔学校で習った絶対値・相対値と同じです。絶対パスというのは絶対値と同じく、どこにいようが決まった表現をします。それに対して相対パスというのは自分の位置を基準に物事を考える身勝手なやつです。人間でこんな事すると嫌われちゃうねっ!
いまいちわかりにくいので場所で説明します。
例えば今私の目の前にビルが建っていたとします。このビルの場所を表現する場合に、二種類の方法があると思います。
それを絶対パスと相対パスに置き換えてみると

・絶対パスの場合
大阪府大阪市○○区○○町5丁目3-3にあるビル
・相対パスの場合
私の目の前のビル

というように絶対パスは住所全てを表現し、相対パスは自分の場所基準でざっくり説明する感じです。
概念はわかってもらったかと思うので、実際にタグとして見てみましょう。
このサイトでhttp://net-info-square.com/imagesというフォルダにあるtest.jpgというファイルがあるとします。
このtest.jpgを表示したいページが
http://net-info-square.com/blog/page01.html
だったとします。
この場合、絶対パスであれば
絶対パスでは
http://net-info-square.com/images/test.jpg
というように表現します。
相対パスでは
../../images/test.jpg
というように表現します。../というのは一つ上のフォルダに上がるよって意味なので、ひとつめの../でblogフォルダ、もう一つの../でhttp://net-info-square.com/フォルダ(厳密にはドキュメントルート)、そこからimagesフォルダに入ってtest.jpgを見ましょう、という事になります。
つまり絶対パスは画像そのものの位置(URI)を記述、相対パスは呼び出し元からの相対的な位置を記述するという事です。
記述としては相対パスの方が何かと楽じゃないっすか。そんな風に思うかもしれませんが、実は一長一短です。絶対パスと相対パスのメリットとデメリットを説明していきます。

絶対パスのメリット・デメリット

メリット

画像の設置フォルダはかわらないのでどのページからでも同じ表現でOK。

デメリット

ドメインが変わると対応できないので他のサイトにまるっこコピーするなどが出来ない。さらにテスト環境から本番に移動した時などは修正が必要になる。

相対パスのメリット・デメリット

メリット

相対的に表現しているのでフォルダ構成が変わらなければドメインが変わっても問題なし、サイトの量産とかも楽勝!

デメリット

このフォルダだけ移動したい!なんて時には相対位置がずれてしまう。

どっちを使うのがいいの?

絶対パスも相対パスもメリット・デメリットがあるので好きな方でいいと思います。ただ見てて一番げんなりしちゃうのは両方が入り乱れてるケースです。置換の時に手間かかるじゃん!という感じです。どちらかに統一しておけば何かあった場合の対応もはかどると思います。
ちなみに私はmtを使ってた期間が長いので絶対パスの方が好きです。

まとめ

いまいちわかりにくかったかもしれませんが、絶対パスと相対パスの関係についてはパソコンのお仕事をしていると付いて回る話かと思いますのでしっかり覚えておくと色んな所で役に立つかと思います。今回こんな事を書いた理由は以前新人がパスの事を全然わかっておらず画像消えたと騒いでたのを思い出したからです。住所の表現は一番わかりやすいかと思って、いつも説明の際に使うんです、テヘヘ。

疲れが全くとれない

最近肩こりもすごいのですが、寝ても疲れが全くとれなくて困っています。疲れをそのまま次の日に持ち越している感じですね。
それがどんどん蓄積して色んな所が痛いのです。助けてくださいいいいいい。と思ってたら知人からこんなアイテムをご紹介いただきました。
他の商品と比べて随分リーズナブルなのに効果実感率94%ですって、奥さん!すごいわね!
自然の恵みで「めぐり」改善

スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>