Home

ホーム>>2:最低限の知識

相対パス/絶対パス

相対パス/絶対パスとは、ファイルを指定する際の指定方法です。相対パス/絶対パスでファイルを指定することにより、任意ファイルの読み込みや指定ページへ移動させることが出来ます

相対パス/絶対パスを主に使用するhtml要素は、画像を呼び出す【img】、他のページへ移動させる【a】要素です。

相対パス/絶対パスを主に使用するのはimg要素・a要素

サンプルWebサイトの構造

以下の画像は、パスの書き方を説明するための画像です。パスの書き方での指定方法はすべて以下の画像を基準にしています。

サンプルwebサイト

画像の説明をすると、【保存フォルダ】の中に全てのファイル・フォルダを保存してある設定で、【aフォルダ】【cフォルダ】は【保存フォルダ】直下に新しく作ったフォルダ、【bフォルダ】は【aフォルダ】の中に新しく作ったフォルダです。

縦線で繋がっている上のフォルダにファイル及びフォルダが保存されています。例えば【bb.html】にアクセスするためには、【保存フォルダ】→【aフォルダ】→【bフォルダ】と開いていく必要があります。

また【aa.html】【aフォルダ】【cフォルダ】【dd.html】のように同じ階層にあるファイル及びフォルダは、同じフォルダ内(この場合は【保存フォルダ】直下)に保存されている事を意味します。

フォルダの中のファイル指定方法

フォルダの中のファイル指定方法は相対パス/絶対パス共に共通で、【/】でフォルダを区切り記述します。

フォルダ/任意のファイル

上記のように記述することでフォルダの中にあるファイルを指定すること出来ます。

cc.htmlを指定する場合
c/cc.html
bb.htmlを指定する場合
a/b/bb.html

実際に指定する際は、相対パス/絶対パスと合わせて使います。

相対パス

相対パスとはパスを記述するファイルを基準とした指定方法です。ファイルが置かれている場所により記述が異なります。

相対パスの書き方

相対パスの書き方は二つです。一つは同じフォルダ内にあるファイルへのパスの書き方、もう一つは現在のファイルより上のファイルへのパスの書き方です。

同じフォルダ内にあるファイルへのパス

同じフォルダ内にあるファイルへのパスは先頭に【./】を付けて記述します。

./任意のファイル

【aa.html】から【dd.html】へ移動させる場合
【<a href="./dd.html">dd.htmlはこちら</a>】と【aa.html】に記述。(【./】を省略して【href="dd.html"】でも可。)

フォルダの中にあるファイルを指定する場合は【./フォルダ/任意のファイル】とします。

現在のファイルより上のファイルへのパス

現在のファイルより上のファイルへのパスは先頭に【../】を付けて記述します。

../任意のファイル

【cc.html】から【dd.html】へ移動させる場合
【<a href="../dd.html">dd.htmlはこちら</a>】と【cc.html】に記述。

【../】は階層が一つ上がる毎に記述し、二つ上のファイルへは【../../】、三つ上のファイルへは【../../../】と階層があがる事に【../】を記述する回数が増えます。

【bb.html】から【aa.html】へ移動させる場合
二つ階層をあがるため【../】を二つ使い、【<a href="../../aa.html">aa.htmlはこちら</a>】と【bb.html】に記述。

階層が上のフォルダの中にあるファイルを指定する場合は【../フォルダ/任意のファイル】とします。

絶対パス

絶対パスとはどの位置のファイルでも同じ書き方で指定できる記述方法です。ただし、マイドキュメント内などでwebサイトを作成する場合は、絶対パスでの動作確認はできないので注意してください。(ネット上であれば確認できます。)

パソコン上で絶対パスの動作確認をするには、XAMPPなどをインストールする必要があります。

絶対パスの書き方

絶対パスは先頭に【/】を付けて記述します。

/任意のファイル

先頭に【/】を記述することで、通常は一番上のフォルダ(画像でいうと【保存フォルダ】)が基準となります。

【bb.html】から【aa.html】移動させる場合
【<a href="/aa.html">aa.htmlはこちら</a>】と【bb.html】に記述。

相対パスなら【<a href="../../aa.html">aa.htmlはこちら</a>】と【bb.html】に記述する必要がありますが、絶対パスなら先頭に【/】を記述するだけで済みます。

これは先頭に【/】をつけた事でパスの基準が一番上の【保存フォルダ】なったからです。

アドレスによる指定

アドレスを使ってファイルを指定することも出来ます。指定方法は、任意のページアドレス(http://~/ファイル名)をそのまま記述します。

http://example.com/aa.html

上記の例だと、webサイト【http://example.com/】にある【aa.html】を指定している事になります。

現在見ているページ(ファイル)のアドレスは画面上部のアドレスバーで確認する事が出来ます。(【例】このページのアドレスは【http://hphtml.org/cont/8.html】です。)

【1:保存フォルダの作成】へ>>

当サイトは初めてWebサイトを作る方向けの解説サイトです。文法は抜きにして"とにかく作って出す"という事を前提に解説しています。

一度作成してみてさらに興味がわいた方は、専門の参考書を読む事をおススメします。

はじめに - Webサイトについて -

1:予め用意するもの
テキストエディタ
画像編集ソフト
2:最低限の知識
拡張子の表示
htmlタグとは
覚えるべき要素
htmlファイルの構成
htmlファイルの保存
htmlファイルの確認
Webサイトの構造とindex.html
相対パス/絶対パス
3:作成手順
【1】保存フォルダの作成
【2】htmlファイルの作成
【3】ファイルを送信
【4】完成
応用
デザインの変え方
背景色・文字色を変える
文字サイズを変える
縦横のサイズを指定する
行揃えの位置を指定する
間隔をあける
線を引く