【初心者向け】HTMLファイルのパス記述：./ の意味と使い方をわかりやすく解説
2024-06-04
HTMLファイルのパス位置における「./」(ドットスラッシュ)の意味
例:
- ファイル構成:
- index.html内の記述:
この例では、image1.jpg ファイルは index.html と同じ images ディレクトリ内に存在するため、./ を使用してファイルを相対パス で参照しています。
「./」を使用する利点:
- コードの可搬性: コードを異なるディレクトリ構造に移行しても、
./を使用することでパス記述を変更する必要がありません。 - 簡潔な記述: ファイルパスを記述する際に、現在のディレクトリを省略できるため、コードが簡潔になります。
注意点:
./は現在のディレクトリ を必ず指すため、上位階層のディレクトリ を参照したい場合は、適切なスラッシュ (/) を追加する必要があります。- 例えば、
image2.pngファイルが 1階層上のディレクトリ にある場合は、../images/image2.pngのように記述する必要があります。
./はHTMLファイルのパス位置を記述する際に、現在のディレクトリ を指す特殊な記号です。- コードの可搬性と簡潔さを向上させるために有効活用できます。
補足:
- HTMLファイル以外にも、CSSファイル、JavaScriptファイルなど、様々なファイルのパス記述において
./を使用することができます。 - パス記述には、絶対パス と 相対パス の2種類があり、それぞれ異なる使用方法と利点・欠点があります。
HTMLファイル:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>./ を使った画像参照</title>
</head>
<body>
<img src="./images/image1.jpg" alt="画像1">
<img src="./images/image2.png" alt="画像2">
</body>
</html>
説明:
- このHTMLファイルは
rootディレクトリ内に存在します。 imagesディレクトリはrootディレクトリの1階層下にあります。image1.jpgとimage2.pngファイルはそれぞれimagesディレクトリ内に存在します。<img>タグのsrc属性で、./images/image1.jpgと./images/image2.pngのように記述することで、現在のディレクトリ (index.htmlファイルが存在するディレクトリ) から1階層下のimagesディレクトリにあるimage1.jpgとimage2.pngファイルを相対パス で参照しています。
- 上記の例では、
image1.jpgとimage2.pngファイルはimagesディレクトリ内に存在するため、./images/image1.jpgと./images/image2.pngのように記述して相対パス で参照することができます。 ../は1階層上のディレクトリ を指す特殊な記号です。
HTMLファイルのパス記述におけるその他の方法
絶対パス
形式:
/path/to/file
/home/user/web/project/images/image1.jpg
利点:
- ファイルの場所を明確に記述できるため、どのディレクトリ から開いても同じファイル を参照することができます。
- コードの可読性 が向上します。
- ファイルを移動したり、ディレクトリ構造を変更したりすると、パス記述を変更する必要 があります。
- 相対パスに比べて記述が冗長 になります。
current-directory/path/to/file
images/image1.jpg
- コードが簡潔 になります。
- コードの可読性 が低下 する可能性があります。
URL
http://example.com/path/to/file
http://example.com/images/image1.jpg
- Webサーバー 上にあるファイルを直接 参照することができます。
- ファイルの読み込み速度 が遅くなる可能性があります。
require() 関数 (JavaScript)
const image1 = require('./images/image1.jpg');
<img src={image1} alt="画像1">
- JavaScriptモジュールを非同期 に読み込むことができます。
- コードがモジュール化 されて、読みやすくなる 可能性があります。
- Node.js やその他のJavaScriptランタイム環境 が必要です。
javascript html path
