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

HTMLでページ内のすべてのリンクにベースURLを設定する方法

ベースURLとは

HTMLでベースURLを追加するには、<base>タグを使用します。<head>セクション内で一度ベースURLを指定しておけば、それ以降に記述されたすべての相対パス（リンクや画像の参照など）は、自動的にそのURLを起点として解決されます。

このタグを活用すると、各リンクに毎回完全なURLを書く必要がなくなり、コードがすっきりするだけでなく、サイトのドメイン変更時にも<base>タグの1箇所を修正するだけで済むため、メンテナンス性が大きく向上します。

コード例

以下のコードを実行して、HTMLページ内のすべてのリンクにベースURLを追加する方法を実際に確認してみましょう。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML base Tag</title>
      <base href = "https://www.qries.com" />
   </head>
   <body>
      Qries.com <img src = "/images/banner_logo.png" />
   </body>
</html>

上記の例では、<base href="https://www.qries.com" />によってベースURLが設定されているため、<img>タグの「/images/banner_logo.png」という相対パスは、「https://www.qries.com/images/banner_logo.png」として解釈されます。

注意点

<base>タグは<head>内に1つだけ記述でき、必ず他のURLを含む要素より前に配置する必要があります。また、ページ内アンカー（#）へのリンクもベースURLの影響を受けるため、使用時は挙動を十分に確認しましょう。

  1. HTMLで要素に値を追加するには？value属性の使い方を解説

    HTMLで要素に値を設定するには、value属性を使用します。value属性は、フォーム送信時にサーバーへ送られる初期値や、要素が持つ現在の値を指定するために使われます。 value属性が使用できる要素 value属性は、以下のHTML要素で利用できます。 <button> … ボタンのラベルとして送信される値 <input> … 入力フィールドの初期値 <li> … 順序付きリスト（<ol>）内での項目の開始番号 <option> … 選択肢としてサーバーへ送信される値 <meter> … 計測範囲内における現在の値

  2. Excelで現在のワークシートに「ページ1」のフッターを追加する3つの簡単な方法

    大量のデータが複数ページにわたるワークシートを扱う場合、適切なページ番号を設定することは非常に重要です。ページ番号がないと、必要なデータをすぐに探せなかったり、ページ同士のつながりを把握しづらくなります。現在のワークシートに「ページ1」のフッターを追加しておけば、印刷物の管理や資料の確認が格段に楽になります。本記事では、その具体的な手順をわかりやすく解説します。 現在のワークシートに「ページ1」のフッターを追加する3つの簡単な方法 ここでは、サンプルデータを使って手順を説明します。例として、B列に氏名、C列に部署、D列に給与が入力されたデータセットを用意しました。このワークシートに対して、以下