ホームページ作成/ホームページ作成テクニック、小技

HTML・CSSでファイルパスを記述する方法

リンクを作る場合や、画像を表示する場合には、「リンク先ページ」・「表示する画像」など、ファイル名を指定する記述が必要です。そのような外部ファイルの指定方法にはいくつかの種類があります。その方法を解説。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

リンクを作る場合や、画像を表示する場合には、「リンク先ページ」・「表示する画像」など、ファイル名を指定する記述が必要です。そのような外部ファイルの指定には、以下のような記述方法があります。


ファイル名だけを書く

現在のページと参照先ファイルが同じフォルダにある場合 対象のファイルが、現在表示されているページと同じフォルダ(ディレクトリ)内にあるのであれば、ただファイル名を記述するだけでも構いません。
対象ファイルが同じフォルダにある場合

対象ファイルが同じフォルダにある場合(全ファイルが同階層にある場合など)


[HTML] target.htmlへリンクする:
<a href="target.html">リンク先名称</a>

[HTML] vegetable.jpg画像を表示する:
<img src="vegetable.jpg" width="120" height="90" alt="野菜">

[CSS] 背景画像にvegetable.jpgを指定する:
background-image: url("vegetable.jpg");

この記述方法の場合、フォルダをまるごと別の場所へ移動しても、リンク切れにはなりません。


相対パス(フォルダ名+ファイル名)を書く

現在のページから見てサブフォルダ内に参照先ファイルがある場合 対象のファイルが、現在表示されているページよりも深い階層(子階層)のフォルダにあるなら、フォルダ名とファイル名を併せて記述します。
対象ファイルがサブフォルダ内にある場合

対象ファイルがサブフォルダ内にある場合(※上記ではorangeサブフォルダ)


[HTML] target.htmlへリンクする:
<a href="./orange/navel.html">リンク先名称</a>

[HTML] ponkan.gif画像を表示する:
<img src="./orange/ponkan.gif" width="120" height="90" alt="蜜柑">

[CSS] 背景画像にponkan.gifを指定する:
background-image: url("./orange/ponkan.gif");

「./」は『現在のフォルダ』を意味する特殊な記述方法です。「./orange/」で、『現在のフォルダの中にある「orangeフォルダ」』を示します。


  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます