ウェブサイト検索

相対 URL と絶対 URL の違いは何ですか?

リンクと画像は Web ページに追加する最も一般的なリソースの 2 つであるため、それらを正しく扱う方法を知ることが重要です。

すべての Web サイトは、画像、ファイル、その他の Web ページなど、特定のリソースを参照する必要があります。他のファイルにリンクする方法を決定することは、ブラウザがファイルを正しく見つけるために非常に重要です。

相対 URL または絶対 URL を使用してリソースにリンクできます。これは、コンピュータ上のローカル ファイルと、Web 経由でアクセスされるプロトコル ベースの URL の両方に当てはまります。

絶対 URL パスの使用方法

絶対 URL には、特定のファイルの場所への完全なパスが含まれます。これらの例には、コンピュータ上のファイルへの絶対パスが含まれます。

  • file:///C:/Users/Sharl/Desktop/test.html
  • file:///C:/Users/John/Documents/Work/Q4summary.docx
  • ファイル:///C:/Users/Mark/Documents/Music/Recording.mp3

別の例には、インターネット経由で送信するリソースを識別するために使用できる完全なプロトコル URL が含まれています。最も一般的には、これらは「https」または「http」で始まります。

  • https://www.google.com
  • https://calendar.google.com/calendar
  • https://www.airbnb.com.au/rooms

絶対 URL には、アクセスしようとしているファイルまたはリソースを見つけるために必要なすべての情報が含まれています。外部サイトにリンクする場合は必須です。

  1. 新しいフォルダーを作成し、index.html と styles.css という 2 つの新しいファイルを追加して、HTML で簡単な Web サイトを構築します。

  2. index.html に HTML コードを追加して、基本的な Web サイトを作成します。

    <!DOCTYPE html>
<html lang="en">
    <head>
        <title> My Website </title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" >
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div class="container">
            <h1> My Website </h1>
            <p> Welcome to my website. </p>
        </div>
    </body>
</html>

  3. styles.css で、ウェブページにスタイルを追加します。

    body {
    font-family: Arial, Helvetica, sans-serif;
}
 
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
 
.mb28 {
    margin-bottom: 28px;
}

  4. index.html で、コンテナ div 内に タグを追加し、Google のメイン サイト (https://www.google.com) への絶対 URL を追加します。

    <a href="https://www.google.com" class="mb28">Google.com</a>

  5. 保存されたファイルへの完全な絶対パスを使用して、オンラインで画像にアクセスすることもできます。追加の手順を実行して、HTML Web ページに応答性の高い画像を確実に追加することもできます。

    <img src="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3870&q=80" alt="Cute bird photo" class="mb28" width="900" height="600">

  6. index.html ファイルをクリックしてブラウザで開き、外部の場所から取得した画像を表示します。

  7. ウェブサイトのルート フォルダーから、画像 という名前の画像を保存するための新しいフォルダーを作成します。フォルダー内に新しい画像を追加し、CuteBird.jpg などの名前を付けます。

  8. 追加した画像ファイルへの絶対パスを特定します。これを行うには、オペレーティング システムのファイル マネージャー アプリのナビゲーション パスでこのファイルを見つけます。パスの末尾にファイル名を追加する必要もあります。たとえば、「C:\Users\Sharl\Desktop\Website\Images\CuteBird.jpg」

  9. index.html で、イメージ タグを、コンピュータに保存されている CuteBird.jpg ファイルを指す絶対パスを使用する新しいイメージに置き換えます。ローカル ファイルシステム リソースを示すために、忘れずに file:// プレフィックスを追加してください。 Unix および macOS では、前の手順で特定した絶対パスを追加できます。 Windows では、バックスラッシュをスラッシュに置き換え、ドライブ文字の前にスラッシュを追加する必要があります。次に例を示します。

    <img src="file:///C:/Users/Sharl/Desktop/Website/Images/CuteBird.jpg" alt="Cute bird photo" class="mb28" width="900" height="700">

  10. index.html ファイルをクリックしてブラウザで開き、コンピュータに保存されている画像を表示します。

相対 URL パスの使用方法

相対 URL には URL またはパスの一部のみが保存され、通常は現在のファイルまたは Web サイトのセクションの場所を基準とします。

上の例では、相対 URL を使用して index.html から Logo.ico にアクセスするには、パス「Images/Icons/Logo.ico」を使用します。他の例としては次のようなものがあります。

  • ページ/Bird1.html
  • 画像/CuteBird.jpg
  • スタイル.css

別のコンピュータで同じフォルダ構造を使用している場合でも、Web サイトは引き続きファイルを取得できます。 Web 上でルーティングする場合、「https://example.com/about」などの完全なリンクを使用する代わりに、相対ルーティングを使用できます。

  • /について
  • /接触
  • /プロジェクト/ローカルクライアント

相対 URL を使用して、HTML Web ページ内にリンクや参照画像を作成できます。

  1. ウェブサイト ディレクトリのルート内に、ページ という新しいフォルダを作成します。
  2. 新しい Pages フォルダー内に、Bird1.html という名前の新しいファイルを作成します。

  3. Bird1.html に HTML コードを入力してページを作成します。

    <!DOCTYPE html>
<html lang="en">
    <head>
        <title> Bird 1 </title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" >
        <link rel="stylesheet" href="../styles.css" />
    </head>
    <body>
        <div class="container">
            <h1> Coffee </h1>
            <p> Coffee is a sweet bird who loves to game! </p>
        </div>
    </body>
</html>

  4. コンテナ div 内にイメージ タグを追加し、相対 URL を使用して CuteBird.jpg 画像にリンクします。

    <img src="../Images/CuteBird.jpg" alt="Cute bird photo" class="mb28" width="900" height="700">

  5. index.html ファイルで、コンテナ div 内の既存のコンテンツを削除します。これを、相対リンクを使用して Bird1.html ファイルを開く単一の a タグに置き換えます。

    <div class="container">
    <h1> My Website </h1>
    <p> Welcome to my website. </p>
    <a href="Pages/Bird1.html" class="mb28">Bird 1: Coffee</a>
</div>

  6. index.html ファイルをクリックしてブラウザで開き、新しいリンクをクリックして Bird1.html に移動します。

絶対または相対 URL リンクを使用したファイルへのアクセス

これで、絶対 URL と相対 URL の違いを判断できるようになりました。リソースが常に取得されるように細心の注意を払うことができるようになりました。

また、ユーザーがアクセスできるすべてのリンクが安全であることを常に確認する必要があります。

関連記事: