ウェブのお勉強はじめました（６）画像の指定の仕方～絶対パスと相対パスについて～

前回は画像を表示する時のソースコードとして以下を書きました。

前回の復習とハイパーリンク

<img src="画像へのパス" alt="代替テキスト">

たとえばこのパスはリンクにも使います。たとえばAmazonのトップページに飛びたかったら

<a href="http://www.amazon.co.jp/">amazonのトップページ<a>

というコードを書くと下のような感じになります。

amazonのトップページ

 で、これをクリックするとアマゾンのページに飛ぶわけです。<a href="">と</a>の間に画像を置くと、その画像をクリックすればリンク先へ飛ぶことができます。

というわけで相対パスと絶対パスの話

簡単に言うと、他のサイトにリンクするときは絶対パスを使います。

http://から書き始めるみんながtwitterとかフェイスブックでよく使う方法です。

これはとても楽でわかりやすいです。

次に相対パスは自分のサイト内を巡回するリンクを作るときに使います。

以前は内部リンクも絶対パスを使っていたのですが、今は相対パスでコードを短くする傾向にあります。

この相対パスが厄介なのは、自分が今どこにいるかでサイトのアドレスが変わること。

そして慣れればなんとなくわかるのですが慣れるまではどんなテキストを読んでもふわっとした納得で終わることです。

相対パスはドット「.」とスラッシュ「/」を使ってその場所を指定します。

「../」→一つ上の階層のフォルダを指定する

「../../」→二つ上の階層のフォルダを指定する

はい、わかんないすよね。俺も慣れるのにかなり時間がかかりました。 

ですが勉強し始めて6か月経過した今、この相対パスと絶対パスはウェブサイトというものの全体像から説明したほうが早いんじゃないかと思います。

「○○釣具店」というサイトを作ろうと思ったら（基本形です）

まず（「○○釣具店」）というフォルダを作り、そのなかには以下のフォルダを作ります。

・index.html（トップページのファイル）
・goods（商品情報のフォルダ）
・contact（お問い合わせのフォルダ）
・order（注文情報のフォルダ）
・company（会社案内のフォルダ）
・img（画像をまとめたフォルダ）
・css（cssが入ってあるフォルダ。今回は気にしなくていいです）

そしてcssとimg以外のフォルダにはページを作りたいので、たとえばgoods（フォルダ）だったら商品情報のページを作りたいのでまた「index.html」というファイルを作ります。

はい、このときこのgoodsフォルダのindex.htmlはトップページのindex.htmlとは階層が違うわけです。

トップページは第一階層、goodsフォルダの中のindex.htmlは第二階層です。

そして画像は基本的に、トップページと同じ第一階層のimgフォルダの中に全部入れておくので、第二階層のindex.htmlが画像をとってくるには一度階段を上に上がる必要があります。

さて先ほどの図を見てください。

「../」→一つ上の階層のフォルダを指定する

「../../」→二つ上の階層のフォルダを指定する

というわけでひとつ階段をのぼるには「../」を使うわけです。

imgフォルダに「aji.jpg」というアジの写真があったとしたら、商品情報のindex.htmlのページにそのアジの写真を表示させるには、

<img src="../img/aji.jpg" alt="アジ">

となります。

第二階層のindex.htmlから見て一段階階段を上り、imgフォルダの中に侵入しそこから「aji.jpg」の写真をとってくるというのがコードの意味です。

これ以上の説明は自分には無理だ（笑）とりあえずこの辺は手を動かしてみて内部リンクの操作に慣れていくしかないと思います。