HTMLを使ってページ内にリンクする方法

メニューや目次は役立ちますが、長いウェブページのトップにアクセスし、探しているものを見つけるためにスクロールダウンするのは面倒です。代わりにアンカーに直接リンクすることで、訪問者の手間を省くことができます。アンカーはページ上のどこにでも表示することができ、id属性から短い「フラグメント識別子」を持っています。URLの末尾に#記号とフラグメント識別子を追加すれば、アンカーに直接リンクすることができます。

HTMLヘルプ

パート1

リンク先アンカーの作成

1. アンカー要素を作成します。アンカー」要素 <a></a> は、ページ上でリンクできる場所を定義します。<a>タグや</a>タグの中にあるもの、通常はテキストや画像がリンク先になります。
2. アンカー要素の中に何かを入れます。アンカー要素を空にしておくことは有効なHTMLですが、<a>タグと</a>タグの間に何もないと、ブラウザによってはアンカー要素を見つけられないことがあります。 リンクしたいテキストを入力するだけです：

   • <a>私のラザニア・レシピ</a>」と入力します。
   • この例では、"My Lasagna Recipe "は普通のテキストとして表示されます。
3. アンカー要素にid属性を追加します。id属性はアンカーに一意な識別子を与え、リンクできるようにします。次のように<a>タグの中に記述します：

   • <a >私のラザニア・レシピ</a>」のように記述します。
4. idの値を選びます。上の例では "anchor-name-1 "を使っていますが、この場合は "lasagna "のように、アンカーに説明的な値を与えるのがベストです。この値はこのidに固有でなければなりません。同じドキュメント内の別のidが同じ値を持っている場合、ブラウザはあなたがリンクしようとしている単一のアンカーを識別することができません。

   • HTML4では、値は文字で始まらなければなりません。文字、数字、ハイフン、アンダースコア、コロン、ピリオドを使用できます。
   • HTML5では、スペース以外の文字が使えます。
   • 大文字と小文字に注意してください。"Polish "と "polish "は同じ値とみなされ、同じドキュメント内に出現してはいけません。
5. 代わりにidを任意の要素に挿入してください。アンカーを作成するたびに<a>タグを使う必要はありません。id属性はどんなHTML要素にも入れることができます。 モダンなブラウザ（かなり昔にさかのぼります）はすべてこれを解釈できるはずです。いくつか例を挙げましょう：

   • ヘッダーのアンカー： <h2 >書誌</h2>。
   • 画像内のアンカー： <img src="/images/logo.png" />。
   • 段落内のアンカー： <p >（導入段落） </p>
   • それぞれのidは1ページに1回しか表示できないことを忘れないでください。

パート2

リンク先アンカーへのリンク

1. 同じページ内の他の場所からアンカーにリンクします。これは他のリンクと同様で、<a href=" "> </a>形式を使います。ただし、href属性の値としてURLの代わりに、#記号の後にアンカーの値を続けます。上の例でラザニアのレシピにリンクするには、次のように入力します：

   • <a href="#lasagna">ラザニアのレシピを見るにはここをクリックしてください。
   • アンカーを作成したときとまったく同じケースを使ってください。ブラウザによっては、"#Lasagna "を "ラザニア "へのリンクとして認識しないものもあります。
2. 他のウェブページからアンカーにリンクする。他のウェブサイトからアンカーにリンクすることもできます。URLの後に#とアンカー値を記述するだけです。いくつか例を挙げましょう：

   • 同じドメイン内の別のページからリンクする：
     <a href="recipes.html#lasagna">私のラザニアレシピを見るには、私のレシピページへ</a>。
   • どこからでもリンクできます：
     <a href="http://wikicooking.org/recipes.html#lasagna">ラザニアのレシピがある友人のサイトをチェックする。</a>
3. 画像をリンクに変える普通のURLと同じように、画像を使ってアンカーにリンクすることができます：

   • <a href="#lasagna"><img src="chickenlasagna.png" /></a> となります。

この記事は、CC BY-NC-SAの下で公開されている「 How to Link Within a Page Using HTML 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。