HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのファイルパスとは？相対パスと絶対パスの違いと指定方法を解説

ファイルパスとは？

ウェブサイトにおけるファイルパスとは、そのサイト内で目的のファイルがどこにあるかを示す「場所の情報」のことです。HTMLでは、画像・動画・スタイルシート・スクリプトなどの外部ファイルを読み込む際に、このパスをsrc属性などで指定します。

パスの指定方法には、主に次の2種類があります。

  • 相対パス：現在のページの位置（カレントディレクトリ）を基準に、ファイルまでの道筋を指定する方法
  • 絶対パス：ドメイン名を含む完全なURLで、ファイルの場所を直接指定する方法

書式（シンタックス）

パスを指定する際の基本的な書き方は以下のとおりです。

1）相対パス

src="ImgFolder/picture.jpg"

または

src="../ImgFolder/picture.jpg"

または

src="/ImgFolder/picture.jpg"

先頭の記号によって意味が異なるため、それぞれの役割を理解しておくと便利です。

  • ImgFolder/picture.jpg … 現在のフォルダ直下にある「ImgFolder」内のファイルを参照します。
  • ../ImgFolder/picture.jpg … 一つ上の階層（親ディレクトリ）にある「ImgFolder」内のファイルを参照します。
  • /ImgFolder/picture.jpg … サイトのルート（最上位階層）から見た「ImgFolder」内のファイルを参照します。

2）絶対パス

src="https://www.tutorialspoint.com/html5/foo.mp4"

フルURLで指定するため、サイト内のどのページからでも常に同じ場所を指し示せるのが特徴です。ただし、ドメイン移転やHTTPSへの切り替え時には修正が必要になる点に注意しましょう。

サンプルコード

続いて、HTML DOM Video の src プロパティを使った実装例を見てみましょう。入力されたユーザー名が「admin」の場合にのみ、動画のURLを表示するシンプルなデモです。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video src</title>
<style>
   * {
      padding: 2px;
      margin:5px;
   }
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-Video-src</legend>
<video id="wordPressIntro" width="320" controls src="https://www.tutorialspoint.com/html5/foo.mp4" type="video/mp4"> </video><br>
<input type="button" onclick="getTrackDetails()" value="Get URL">
<input type="text" id="textSelect" placeholder="Full Name...">
<div id="divDisplay">
</div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var textSelect = document.getElementById("textSelect");
   var wordPressIntro = document.getElementById("wordPressIntro");
   function getTrackDetails() {
      if(textSelect.value === 'admin')
         divDisplay.textContent = 'Video URL: '+wordPressIntro.src;
      else
         divDisplay.textContent = 'Cannot Provide URL, Unauthorized User';
   }
</script>
</body>
</html>

実行結果

このコードを実行すると、ブラウザには次のように表示されます。

1）「Get URL」ボタンをクリックする前：

HTMLのファイルパスとは？相対パスと絶対パスの違いと指定方法を解説

2）テキストボックスに「admin」と入力して「Get URL」ボタンをクリックした後：

HTMLのファイルパスとは？相対パスと絶対パスの違いと指定方法を解説

「admin」と入力されていれば動画のURLが表示され、それ以外の値が入力された場合は「Cannot Provide URL, Unauthorized User（権限のないユーザーのためURLを表示できません）」というメッセージが出力されます。

  1. HTML DOM URLプロパティとは？使い方とサンプルコードを解説

    HTML DOM の URL プロパティは、現在のドキュメント（ページ）の URL に対応する文字列を返すプロパティです。読み取り専用のため、JavaScript からページの完全な URL を簡単に取得できます。 構文 URL プロパティの値を取得する基本的な構文は以下の通りです。 document.URL このプロパティは引数を取らず、ドキュメントの URL を文字列として返します。なお、類似の機能を持つ document.location.href との違いとして、document.URL は読み取り専用である点が挙げられます。 HTML DOM URL プロパティの使用例 ここでは、ボ

  2. macOSでファイルパスを表示・確認する4つの方法

    ```html Macを使っていると、ファイルの正確な保存場所(パス)を知りたい場面が意外と多くあります。例えば、ターミナルでコマンドを実行するときや、特定のアプリにファイルの場所を指定したいときなどです。しかし、Appleはこの情報を確認する方法をあまり分かりやすく提示していません。 macOSはデフォルトではファイルパスを明示的に表示しませんが、実はいくつかの便利な方法で確認できます。本記事では、Mac上のアイテムの正確な場所を表示するための複数の方法を紹介します。 Finderでパスバーを表示する Finderの「パスバー」を表示すれば、常にファイルの場所情報を画面上で確認できます。こ