HTMLの基礎 Last Update : 2013/09/05 09:08:31

 Webページ作成の為のHTMLを解説しています。

はじめに
■機能索引
HTMLとは
タイトルや背景
文字
レイアウト
リンク
画像
表(テーブル)
フォーム
フレーム
拡張子
カラーチャート
CSS辞典
相対・絶対パス
特殊文字
■主なタグ索引
meta
body
p
br
hr
h
font
b
i
sup
sub
acronym
marquee
div
pre
ul
ol
blockquote
q
dl
img
a
table
frameset
iframe
form
input
textarea
select
button
リンクしてね☆
HTMLの基礎-タグを覚えてウェブページを作ろう!
バナーはダウンロードしてお使い下さい。
相対パス・絶対パス
■URLの相対パス指定・絶対パス指定について

パスの指定についての質問が意外と多いので、 ここではURLの相対・絶対パスの指定について述べます。 これらはウェブページを作成する際に必要な知識です。 初心者にもわかりやすくする為、用語を本来とは違った表現で記述することも あります事をご了承下さい。

始めに、パスについて軽く説明しておきます。
パスとはアドレスの記述や表記の方法で、コンピュータ内での場所をパスといい、 パスを記述した文字列をパス名といいます。

相対パス・絶対パス
相対パス指定でのリンクの張り方
相対パス指定と絶対パス指定の使い分け

■ 相対パス・絶対パス

例えば、○○区××町の△△マンションという 3階建てのマンションがあり、Aさんが2階にいたとします。 友人のBさんは3階に住んでおり、Cさんという人は1階に住んでいます。 ここでは、Aさん中心に考えてください。

Bさんの住所は → ○○区××町△△マンション3階
Aさんの住所は → ○○区××町△△マンション2階
Cさんの住所は → ○○区××町△△マンション1階

となりますね。
Aさんの友人Dさんがいたとしましょう。 Dさんはこのマンションには住んでいません。 AさんがDさんに、BさんとCさんの居場所を説明する際 2通りの説明の仕方があります。

  1. Aさんが住んでいる階から見た説明方法(上の階、下の階)
  2. ○○区××町△・・のように住所を全て説明する方法

この2つの場所の指定方法こそが、相対パスと絶対パスの考え方です。 これらをそっくりファイルやフォルダに置き換えて考えてみましょう。

1階 → cccフォルダ   c.html(Cさん)・・HTMLファイル
2階 → aaaフォルダ   a.html(Aさん)・・HTMLファイル
3階 → bbbフォルダ   b.gif(Bさん)・・GIFファイル(画像)

やはりここでもAさんを起点に考えてください。
a.html(Aさん)からc.html(Cさん)のアドレスを説明するとき、 「Aさんの下の階」と言えばわかります。それならばBさんは「Aさんの上の階」ですね。 このように、今現在いる場所(閲覧しているページ)を起点に、 相手の場所(目的のファイル)までの道筋を相対的に考えるのが、 相対パスです。

そして、Aさんの居場所に関係なく、Cさんの住所を○○区~と説明する ようにアドレスをhttpから全て記述する考え方を 絶対パスといいます。 絶対パスは当然ながら、ひとつのファイルにひとつしか存在しません。



では実際に相対パスでa.htmlからc.htmlへリンクを設定する際に、 絶対パスでは、アドレス全て(フルパス)を記述(http://ykr.main.jp/bbb/aaa/a.html など ※注 実在しません)すればいいのですが 相対パスではどのように記述すればいいのでしょう?

■ファイルやフォルダは下記のような位置関係
相対パス・絶対パス"
・bbbフォルダにb.gifがあり
 その下に(bbbフォルダ内に)
 aaaフォルダがあります。
 ▼
・aaaフォルダには、a.htmlがあり、
 その下に(aaaフォルダ内に)
 cccフォルダがあります。
 ▼
・cccフォルダにはc.htmlが
 あります。
ここでは、bbbフォルダの中にある、aaaフォルダ内に置かれて いるa.htmlを起点にして上下のファイルやフォルダへの 関係を見てください。



■ 相対パス指定でのリンクの張り方

a.htmlからc.htmlにリンクを張りたいとします。 リンクを貼るタグは<a></a>なので、 このタグのhref属性に、フルパス(絶対パス)を記述してリンクを 張っても良いのですが、いくつもリンクを張りたい場合などに、 いちいちフルパスを記述するのは面倒です。なので、相対パスを記述します。 それぞれのファイルのフルパスを以下のように設定しておきます。(実在しません)

■ b.gifのURL

http://ykr.main.jp/bbb/b.gif

■ a.htmlのURL

http://ykr.main.jp/bbb/aaa/a.html

■ c.htmlのURL

http://ykr.main.jp/bbb/aaa/ccc/c.html

そしてここではa.htmlを起点とします。
このa.html内のテキストからc.htmlに絶対パスの記述でリンクを張ります。

<a href=" http://ykr.main.jp/bbb/aaa/ccc/c.html"> a.html内のテキスト</a>

▼ ▼ これを相対パスで記述すると・・・

<a href=" ccc/c.html"> a.html内のテキスト</a>
 or
<a href="./ccc/c.html">a.html内のテキスト</a>



同じように、今度はa.html内に、b.gif(画像ファイル)を表示させたいとします。 以下のソースは上が絶対パスでの記述、下が相対パスでの記述です。

<img src=" http://ykr.main.jp/bbb/b.gif">

<img src=" ../b.gif">

/」はフォルダとフォルダの区切りです。
./」は今現在いる場所を指します。ここで今いる場所というのは a.htmlのあるフォルダ、aaaフォルダのことですね。(aaaディレクトリといいます) aaaフォルダ内のa.htmlは「./a.html」、また今現在いる場所の 「./」は省略する事ができます。 a.htmlから見たc.htmlは、a.htmlが置かれているのと同じフォルダにある cccフォルダの中に置かれているc.htmlという事になります。

.      ← 今現在いる場所(省略可能)
./a.html    ← 今いる場所にあるa.html(./は省略可能)
./ccc    ← a.htmlと同じ場所にあるcccフォルダ
./ccc/c.html    ← a.htmlと同じ場所にあるcccフォルダの中にあるc.html

それでは、起点として考えるa.htmlよりも上の階層にあるフォルダ内にある、ファイルを参照する場合 にはどうやって記述するのでしょうか。
.」は現在いる場所を指しましたね。現在いる場所(フォルダ) よりも上の階層にあるフォルダ、現在いる場所がaaaフォルダですから、aaaフォルダが入っている bbbフォルダを指す場合には、「..」と記述します。 a.htmlのひとつ上のフォルダにあるb.gifを表すには 「../b.gif」とします。ちなみに、さらに bbbフォルダよりも上の階層を指そうとするなら 「../..」となります。

.    ← 今現在いる場所(aaaフォルダ内)
..    ← aaaフォルダよりもひとつ上にあるフォルダ内の場所(bbbフォルダ内)
../b.gif    ← aaaフォルダよりもひとつ上にあるbbbフォルダにあるb.gif



■ 相対パス指定と絶対パス指定の使い分け

実際にウェブページを作成時にURLを記述する際は、相対パスを絶対パスを使い分けて記述します。 サイトを作成すると複数のファイルを管理する事になりますが、自サイト内でリンクを張る場合は 相対パスで記述したほうが楽ですし、移動させるときも全てのファイルが入ったフォルダごと動かすだけで 済みます。起点となるファイルから見たパスの記述になるので、ファイル同士の位置関係自体は 変化しないという訳です。

一方、絶対パスでURLを記述する必要がある場合というのは、自サイトから他のサイトへの リンクを張ったりする時です。相対パスだとややこしくなりますし、自分のファイルを動かすと その度にファイルの位置関係が変わってしまいます。絶対パスの指定は、 Aさんが引っ越したとしてもCさんがマンションの1階に住んでさえいれば、AさんとCさんの 位置関係(上の階と下の階)は変化しますが、住所を指定すれば、Cさんに郵便物が届くのと同じ事です。

長くなりましたが、慣れれば簡単です。(階層概念といいます) これらを上手く活用してウェブページ作成を楽しんでください。



メール

質問メールがとても多くなった為、現在返信が遅れております。 お返事が出来ていないものも沢山あり、今のところいつになるのか・必ず返信出来るのかどうかの保証が出来ません。 申し訳ございませんが、その事をご理解いただいた上でご送信下さい。 また、ここではHTMLの質問に関してのみ受け付けております。


サイト検索
制作便利アイテム

カラーチャート
Color fan

色相・明度・彩度順カラーチャート。CMYK、RGB、慣用色名、配色事典付き。DTP、Web(HTML)で使えます。収録色の全てに、CMYK値、RGB値、そしてHTML用16進数を併記。
WEB関連リンク

Copyright © 2003 - ykr414. All Rights Reserved.