『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン

HTML08 練習問題付き!絶対パスと相対パス(18分13秒)

練習問題付き!絶対パスと相対パス

今回は、Webサイトを作成する上で、初心者の方がつまずきやすい、絶対パスと相対パスについて解説しています。

リンクを貼ったり画像を表示したりする場合、絶対パスと相対パスの知識が必ず必要となります。

パスとは、HTMLファイルや画像ファイルなどのファイルの場所を指定する方法のことです。

インターネット上のWebサイトにリンクしたり、自分のWebサイトの別のページにリンクしたりする場合や、画像を表示したい時に、それらのファイルがどこにあるのかを指定する必要があります。

概要

  • 絶対パスとは
  • 相対パスとは
  • 同じフォルダ内のファイルを指定するには
  • 1つ下の階層のフォルダにあるファイルを指定する
  • 1つ上の階層のフォルダにあるファイルを指定する
  • 練習問題のダウンロード

補足・ポイント

絶対パス

絶対パスとは、http://から始まるアドレス(URL)を使ってファイルの場所を指定することです。

ホームページの構造

index.htmlというファイル名は、その階層のトップページにつけるファイル名です。

通常、ファイル名にindex.htmlという特別な名前を付けた時に限り、URLにファイル名をつけなくても、そのWebページにアクセスできるようになります。

例えばこのサイトにリンクするには、

<a href="https://web-creators-tips.com/index.html">サイトへ</a>
<a href="https://web-creators-tips.com/">サイトへ</a>

どちらもa要素のリンク先は同じ。

ファイル名がindex.htmlの場合はindex.htmlの記入は省略できることになっています。

※トップページ以下のフォルダについても同様です。

相対パス

相対パスとは、基準となるファイルから見て任意のファイルの場所を指定します。

例えば同じフォルダ(ディレクトリ)の中にindex.htmlとsub.htmlがあって、index.htmlからsub.htmlにリンクを貼りたい場合は、

<a href="sub.html">サブページへ</a>

のようにファイル名のみの記入でファイルの場所を指定することが出来ます。

同じフォルダ内のファイルを指定する

同じフォルダ内のファイルを指定する

同じフォルダ内にあるHTMLファイルや、画像ファイルを相対パスで指定する場合は、ファイル名のみで指定できます。

▼ index.htmlからsub.htmlにリンクする

相対パス <a href="sub.html">
絶対パス <a href="https://web-creators-tips.com/sub.html">

▼ index.htmlにgreen.jpgを表示する

相対パス <img src="green.jpg">
絶対パス <img src="https://web-creators-tips.com/green.jpg">

1つ下の階層のフォルダにあるファイルを指定する

1つ下の階層のフォルダにあるファイルを指定する

1つ下の階層のフォルダにリンクしたいファイルや、表示したい画像がある場合は、どのフォルダにそれらのファイルがあるのかを指定します。

<a href=”どのフォルダの/何のファイル”>

というように指定すればOKです。

▼ 1 index.htmlからa-01.htmlにリンクする

相対パス <a href="A/a-01.html">
絶対パス <a href="https://web-creators-tips.com/A/a-01.html">

▼ 3 index.htmlにhana.jpgを表示する

相対パス <img src="images/hana.jpg">
絶対パス <img src="https://web-creators-tips.com/images/hana.jpg">

1つ上の階層のフォルダにあるファイルを指定する

1つ上の階層のフォルダにあるファイルを指定する

1つ上の階層のフォルダにリンクしたいファイルや、表示したい画像がある場合は、上に上がることを示す「../」を記入します。

ここでは1つ上のフォルダ内のファイルを指定する方法を説明しますが、もし2つ上のフォルダ内のファイルを指定したい場合は、「../../」のように、階層を上がるごとに「../」を1つ付け加えます。

▼ a-01.htmlからindex.htmlにリンクする。

相対パス <a href="../index.html">
絶対パス <a href="https://web-creators-tips.com/index.html">

▼ a-01.htmlにhana.jpgを表示する。

相対パス <img src="../images/hana.jpg">
絶対パス <img src="https://web-creators-tips.com/images/hana.jpg">

今回の動画で使用しているサンプルは、練習問題としてダウンロードできますので、ぜひ、挑戦してみてください!

以下からダウンロードできます。

この記事が気に入ったら
いいね ! しよう

福本 智子

フリーランスWebデザイナー・Webスクール講師。 子育てをしながら、趣味で始めたネットショップからWebを活用したビジネスの楽しさにはまり、Web屋の道を歩む。 Web制作業務に加え【Webデザインを学びながらビジネス力も身につける体験型スクール&コミュニティ】を運営。 フリーランスでWebデザイナーを目指す方々のサポートに注力している。

Pocket
LINEで送る

関連記事

ライター紹介

Webメディア部 メンバー募集!

  • Webデザインを学びながらビジネス力も身につける体験型スクール&コミュニティ Webクリエイターズオンラインスクール

ログイン

新米クリエイターズ Webメディア部

『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。

Web・DTPデザイナー・会社員・アルバイト・ライター・ブロガー・主婦・子育てママ...etc。
現在の肩書きは違えど目指すところは皆「フリーランスのWebデザイナー(クリエイター)」

日々の学びやお役立ち情報をブログで発信・アウトプットをしながらWebの世界でコンテンツを配信する、
Webサイトを運営する、アクセスを集めるってどんなことなのか?を体感していきます。

新米クリエイターならではの気づきや学び、Webデザイナーの腕を磨いていく模様をリアルに感じていただけます!