ドメインの意味はこちら
「HTMLに画像を貼っても表示されません！」という質問をもらう事があります。
Webサイトは基本的にHTMLというファイル群で作られますが、このサイトの場所を表す住所をドメインだとすると、土地のようなものがサーバーに当たります。
インターネットに公開されているサーバにHTMLをコピーする事がホームページの公開だと解釈してもよいかと思います。
土地があっても住所が無いと郵便屋さんはたどり着けません。
細かく言えば、東経いくつ、北緯いくつと指定すれば場所はわかりますが、それは面倒すぎるので住所をつけます。
それがホームページアドレスにあたります。
さて、
サーバーという土地をがあって、ドメインという住所があるので、
今日は階数と部屋の話です。
ファイルを整理や管理するための階層構造ごとの、建物で言えばフロアのようなファイルの塊をディレクトリと呼びます。
ファイルやフォルダの場所はパスと呼ばれる表記法で表示します。
このパスの書き方には、
・絶対パス
・相対パス
の2種類があります。
絶対パス
これは見たいファイル（サイトで言えばページをサーバーで見た呼び方）を、住所から表すものです。
「○○町4丁目の××マンションの5階のtop.htmlさんの部屋」
というような呼び方です。
例えば僕のPCの画像をサイトに表示するとすると、imgタグに記述するパスは
「http://web-design.link/wp-content/uploads/2013/11/wpid-20131122023612.jpg」
このようになります。
これをブラウザのアドレス欄にコピーすると、画像が現れます
「http://mid-design.biz」という住所の中の「wp-content」という部屋の中にある「uploads」という部屋の中の「2013」の中の「11」という部屋の中にある「wpid-20131122023612.jpg」というファイルを開いてね。
という意味になります。
相対パス
対して、こちらは「今自分のいる場所から見て、どこにあるファイルなのか」
という表示の仕方です。
上のパスで表すと、自分のいるファイル（いま開いているHTMLファイル）がindex.htmlだとすると、
自分と同じ部屋にある階段で「wp-content」という部屋に降りると、「uploads」というフロアに出ます。
また階段を降りて「2013」に行き、また降りて「11」というフロアに出ると、そこに「wpid-20131122023612.jpg」というファイルがあるので、これを開いてね。
この”階段を降りる”という動作が「/」で、逆に上がる動作が「../」になります。
例えば、自分のいる部屋の上の階があって、その下に降りると「d_umeki」という部屋があるとします。
階層で言えば隣の部屋ですが、一度上の階に上がらないと行けません。
そこで、”一度階段を上がり”「../」その後に「d_umeki」というフロアに降り、そこに「imgs」→「01.jpg」がある場合
「../d_umeki/imgs/01.jpg」となります。
自分から見ての場所なので、住所は無くてよいです。
基本、HTMLで画像やリンクを貼る場合、このパスを使って表示するファイルを指定します。
HTMLでタグを貼っても画像が表示できない場合、原因として最も多いのは
・パスが間違っている
・画像がCMYKカラーである
・フォルダ名、ファイル名に日本語などの2バイト文字が使われている
この3つが最も多いです。
例外的に、部屋に鍵がかかっているという事もありますが、ここでは除外します。
CMYKカラーというのは印刷で使う色の4原色を適用しているファイルで、光の3原色で表示するWebだと使いません。Macのブラウザだと見れるんですが、Windowsだと大抵のブラウザで見れません。
Webで使うファイル名に日本語は使えません。
実はサーバーによっては日本語でも見れるんですが、見も知らぬ他人のサーバやPCが日本語対応しているとは限りませんので、インターネットに公開するサーバーの中ではNGです。必ず半角英数字にしましょう。
ローカル（自分のパソコン）上では見れますが、それは自分のパソコンだからです。Webは他人が見るものです。
もうちょっと基本的な間違いとして、
・自分から見れない場所を書いている
という事もあります。
サーバーの中では、自分のいる部屋以外のものは、隣の部屋だとしても見れません。
隣のフォルダを見たい場合は、一度階段を上がって隣の部屋に降りる必要があります。
最初のうち、ぜんぜん繋がっていないディレクトリのパスを書いてしまう事も多いです。
「開いているHTMLファイル」と「画像フォルダ」が同じ場所にないと画像が表示されない
と覚えるといいかも知れません。（厳密には同じ場所でなくてもパスが繋がってればいいのですが）
その他の要因は、「そもそも画像を作っていない」「画像はあるけどカラーモードがCMYKなのでWebで見れない」などがあります。
