Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTML5
入門編

トップページ
HTML5入門編 - 絶対パスとURL

絶対パスとURL

みなさまいかがお過ごしでしょうか。続いて『パス』について勉強していきたいと思います。

まずパスとはなにか、というお話ですが『ファイルの位置を指定するための記述』のことです。パスの記述方法はいくつかの種類がありますがHTML入門編で紹介するのは『絶対パス』と『相対パス』です。

まずは『絶対パス』から勉強していきましょう。『絶対パス』は『URL』(ユーアールエル)というものを使用します。正式名称は『Uniform Resource Locator』（ユニフォームリソースロケータ）と言い、略して『URL』と呼ばれています。こちらの記事でも出てきましたね。もう少し掘り下げていきたいと思います。

『URL』とは簡単に言ってしまうとインターネット上の住所のようなものとなります。みなさん大好きgoogle先生の住所は以下になりますね。

http://google.co.jp/

こちらの記述の意味について勉強していきましょう。

まず最初の『http://』についてですがこちらは『スキーム』と呼ばれており、「このファイルを入手する為にはHTTPを使ってね」という命令になります。『HTTP』とは『Hyper Text Transfer Protocol』の略で、主にウェブサイト閲覧用として使用されているプロトコル(通信手順)の一種です。これについてはそんなに意識しなくても問題ないので『URL』を記述するときに必ず『http://』と書く、と丸暗記しちゃってください。あと『HTTP』を暗号化した『HTTPS』なんて子もいますがこれは通信部分を暗号化しただけのものですので基本的な部分は『HTTP』と変わりありません。こちらもとりあえずは『https://』を書くと丸暗記してしまってOKです。

一般的なURLでは『http://』の次の記述部分が住所にあたる部分となります。インターネット上の住所にあたる部分を『ドメイン』といいます。google先生のURLでは『google.co.jp』がドメインです。以下みたいな感じですね。

http://住所(ドメイン)/

インターネットの世界では「同じドメインは存在してはいけない」いうルールになっているので『ドメイン』は世界に一つです。現実世界でも同じ住所が複数存在したら配達とかできなくなってしまいamazonさんが破産してしまいます。インターネットの世界でもちゃんと通信できるように同じドメインは複数存在してはいけない、と決められています。

ブラウザを使った少し処理の流れをみていくと、http://google.co.jp/とアドレスバーに打ち込むとgoogle.co.jpという住所を持つgoogle先生のサーバーに接続して必要なデータをもらい、google先生のサイトが表示されるという仕組みになっています。

サーバーとは外からのアクセスに対して何らかの処理を行えるパソコンの事です。サーバーはウェブサイトの情報を送信してくれたり色々な事をしてくれます。ウェブコンテンツの処理を行うサーバーは一般に『ウェブサーバー』と呼ばれます。

では次に以下のURLについて検証してみましょう。

https://wp-p.info/reps/html-beginner/samples/index.html

この記事用につくったサンプルページとなります。クリックしてみると問題なくサイトが表示されてるかと思います。

先ほどの住所部分以外にちょっと記述が追加されていますよね。

『https://』は『スキーム』で、『wp-p.info』は『ドメイン』ですが、『wp-p.info』以降の記述は何をさしているのでしょうか。それはファイルの場所を示しています。

『/』(スラッシュ)で区切られているのが確認できますでしょうか。URLなどのパスでフォルダの区切りを表す記号は『/』となります。

上記のURLの場合では『wp-p.infoのサーバーにある一番上の階層のhtml-beginnerフォルダの中のsamplesフォルダの中のindex.html』と記述していることになります。
※一番上の階層がサーバー上のどこの場所になるかはサーバー側の設定で変更できます。

『ファイル』とはまとまったデータの基本単位のことで、画像ファイルやHTMLファイルなどはその言葉通り『ファイル』となります。

『フォルダ』とはファイルを格納することができる入れ物です。『ディレクトリ』とも呼ばれます。『フォルダ』と『ディレクトリ』は元々違うものを指していた言葉ですが、昨今ではほぼ同じものを指す言葉と思って頂いて問題ありません。

そして今回のように表示するファイル名が『index.html』の場合はファイル名の指定を省略できます。以下を確認してみてください。

https://wp-p.info/reps/html-beginner/samples/

『index.html』が消えてしまいましたね。しかし、クリックしてみると先ほどと同じページに飛べたと思います。

ウェブサーバーの基本的な設定では、『URL』にファイル名の指定がない場合は『index.html』のデータを返すという設定になっていますので、上記の記述でも『index.html』が表示されます。

上記の理由からほぼすべての静的なウェブサイトのTOPページのファイル名は『index.html』となっています。これまでの内容で「ファイル名は必ず『index.html』としてください」とお願いをしてきたのはこれが理由でした。

ただし、『index.html』を省略できるのはHTMLファイルがウェブサーバーに上がっている状態で、かつファイル名の指定がないとき『index.html』のデータを返すという設定がサーバー側にされていた場合のみとなります。例えばローカルのHTMLファイルのハイパーリンクに『index.html』を省略したパスを記述した場合の遷移先はフォルダの中身一覧ページとなります。これについては先の記事でも解説していきますが、間違いやすいところなので注意しましょう。

そしてウェブの世界ではURLで記述されたパスを『絶対パス』と呼びます。

本来の『絶対パス』とはファイルやフォルダまでの道筋を省略せずにすべて記述する方式の事を指しますが、ウェブの世界での『絶対パス』とは『URLで記述されたパス』のことを指します。

というわけで『URL』の概要はこんな感じですね。では『絶対パス』(URL)を使用してimgタグを記述してみましょう。前回の記事で勉強したimgタグのsrc属性の値にURLを記述します。

<img src="ここにURLを記述">

注意するべき点としてimg要素は画像を表示するためのタグですのでsrc属性の値にHTMLファイルなどを指定してはいけません。ちゃんと画像ファイルを指定してあげてください。

では少し記述してみましょう。弊社のサーバーにファイルを用意させて頂きました。

ドメイン名『wp-p.info』の『html-beginner』というフォルダの中の『img』というフォルダに『test.jpg』というファイルがあります。その画像をimg要素で読み込んでみましょう。alt属性は空文字列でOKです。そうすると以下のような記述になりますね。

<img alt="" src="https://wp-p.info/reps/html-beginner/img/test.jpg">

こちらの要素をみなさんのローカルのHTMLファイルにも組み込んでみてください。表示させたい部分なのでしっかりbody要素の中にいれるよう注意してください。

全ソースはこうなりますね。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ボクの初めてのウェブサイト</title>
</head>
<body>

<img alt="" src="https://wp-p.info/reps/html-beginner/img/test.jpg">

</body>
</html>

ではこれを保存してブラウザで開いてみてください。以下にサンプルを用意しましたので同じように表示されていればOKです。
※画像素材は写真素材ぱくたそ様より拝借させて頂きました。

サンプルをみてみる。

上手く表示できましたでしょうか。では一旦この辺で記事を切りたいと思います。

次の記事では相対パスというものを解説していきます。しばらく難しい項目が続きますが引き続き頑張っていきましょうね。

またお会いしましょう。

この記事は桜舞が執筆致しました。