絶対URLと相対URLの日本語解説

HTMLにおけるURLの概念

HTMLにおいて、URL（Uniform Resource Locator）は、ウェブ上のリソース（画像、スタイルシート、スクリプトなど）へのリンクを設定するために使用されます。

絶対URL

絶対URLは、ウェブ上のリソースの完全なアドレスを指定します。これには、プロトコル（http://, https://）、ドメイン名、パスが含まれます。例えば、https://example.com/images/logo.png は絶対URLです。

相対URLは、現在のドキュメント（HTMLファイル）からの相対的な位置を指定します。これは、絶対URLの一部を省略することで、より簡潔なリンクを作成することができます。相対URLには、相対パスとファイル名のみが含まれます。

相対パスの種類

• 親ディレクトリへの相対パス
  ../ を使用して、親ディレクトリへの相対的なパスを指定します。例えば、../images/logo.png は、現在のディレクトリの親ディレクトリの images フォルダーにある logo.png ファイルへのリンクです。

• 相対URL
  
  • ウェブサイト内のリンクを簡潔に表現したい場合。
  • リンク先のリソースが現在のドキュメントと同じドメインにある場合。
• 絶対URL
  
  • ウェブサイト全体で一貫したリンクを維持したい場合。
  • 外部のウェブサイトへのリンクを設定する場合。

例

• 相対URL
  <img src="images/logo.png">
• 絶対URL
  <img src="https://example.com/images/logo.png">

絶対URLと相対URLのプログラミング例（HTML）

<img src="https://example.com/images/logo.png" alt="ロゴ">

このコードは、外部ウェブサイト https://example.com の images ディレクトリにある logo.png ファイルへの絶対URLを指定しています。

<img src="images/logo.png" alt="ロゴ">

このコードは、現在のHTMLファイルと同じディレクトリの images ディレクトリにある logo.png ファイルへの相対URLを指定しています。

親ディレクトリへの相対URLの例

<img src="../images/logo.png" alt="ロゴ">

• 絶対URL
  

絶対URLと相対URLの代替方法（HTML）

URLの動的な生成

• JavaScript
  
  • JavaScriptのコードを使用して、URLを動的に生成することができます。これにより、ページの読み込み時にURLを変更したり、ユーザーの入力に基づいてURLを調整することができます。
  • 例:

    var imageUrl = "images/image_" + userChoice + ".jpg";
    document.getElementById("image").src = imageUrl;
    

URLのテンプレートエンジン

• テンプレートエンジン
  
  • テンプレートエンジンを使用することで、HTMLファイル内のURLをテンプレートとして定義し、動的に値を埋め込むことができます。これにより、URLの管理と更新が容易になります。

URLの相対パスと絶対パスの変換

• JavaScript
  
  • JavaScriptを使用して、相対パスを絶対パスに変換することができます。これにより、ページの移動やブラウザの履歴操作にも対応することができます。
  • 例:

    var relativeUrl = "images/logo.png";
    var absoluteUrl = window.location.origin + relativeUrl;
    document.getElementById("image").src = absoluteUrl;
    

URLのキャッシュ制御

• HTTPヘッダ
  
  • HTTPヘッダを使用して、ブラウザにURLのリソースをキャッシュするかどうかを指示することができます。これにより、ページの読み込み速度を向上させることができます。
  • 例:

    <img src="images/logo.png" alt="ロゴ" />
    

    Cache-Control: max-age=3600