制作者の活動(PR)。

アイドル女優・堀北真希ちゃんにうさ耳を着けた創作キャラクタ。次ぎ
主な堀北真希うさぎ収録作品

堀北真希うさぎ：昔のボシュロムのコンタクトコマーシャルを真似てレンズを着ける場面と仮想CM動画

アンカーへのハイパーリンク。

ここでは、HTMLの最大の特徴であるハイパーリンクを実現するための方法の一つであるアンカー(<a>要素)の降ろし方について解説します。

アンカーへのハイパーリンク・目次。

アンカーとは何か。

アンカーとは、HTML文書, 画像, 動画, 音源或いはメールアドレスなどウェブ上で公開出来るリソースと関連付けのある語句の事です。

アンカーには以下の二種があります。

起点アンカー

他のリソースへ関連付けたアンカーの事です。

閲覧者が起点アンカーを指定すると(いわゆるクリック)、当該文書が読み込まれますが、これがウェブブラウザでの起点アンカーの実装となっております。

終点アンカー

他のリソースから関連付けられるアンカーの事です。

例えば、HTML文書の一部区間(フラグメントと言います)の先頭に終点アンカーを降ろす事で、自他の文書から参照したい文書内の特に参照したい箇所へ関連付ける事が可能になります。

尚、今日では終点アンカーの代わりに、識別名(ID)を与えた要素をフラグメントとして他のリソースから関連付けられるようにする事が推奨されておりますが、ドコモ携帯電話のｉモードブラウザなど対応していない環境もあるため、今日でも終点アンカーを用いる場合があります。

通常、狭い意味でハイパーリンクとかアンカーとされるのは前者の起点アンカーです。

<a>要素…HTMLでのアンカー。

HTMLではアンカーを<a>要素として定義しております。

<a>要素は起点アンカーにも終点アンカーにも用いる事が出来ますが、ここでは先ず起点アンカーとして用いる方法を解説します。

起点アンカーを<a>要素としてマークアップするには。

<a>要素を起点アンカーに用いるには、以下のようにマークアップします。

<a href="リンク先のURL">(アンカーとなるフレーズ)</a>

ここで、<a>要素の開始タグに

すなわち

が与えられている事に注目してください。

<a>要素は内容となるフレーズをhref属性で示されるURLに関連付けられたものとします。

href属性でのURL。

<a>要素のhref属性で指定するリンク先のURLには、以下の書き方があります。

絶対URL。

絶対URLとは、「http://」などのスキーム名で始まるURLの事です。

サイト外にあるリソースを関連付けたい場合にはこのURLを用いるしかありません。

例えば、ヤフージャパンへ関連付けた<a>要素は以下のようにマークアップされるでしょう。

<a href="http://www.yahoo.co.jp/">ヤフージャパン</a>

また、メールアドレスも絶対URLとなります。

メールアドレスの場合、「mailto:」と言うスキーム名で始まる事となります。

一般のウェブブラウザの場合、href属性値にメールアドレスが指定された<a>要素が指定されると、ブラウザで設定されているメールクライアントが開き、そのメールクライアントには予めhref属性で指定されたメールアドレスが入るようになっております。

相対URL(相対パス)。

相対URLあるいは相対パスとは、文書のURLから見た相対的なURLです。

サイト内にあるリソースであれば、この相対URLを用いて記述する事で、万が一サイトを移転する事となった場合であってもサイトを丸ごと移転させればリンク切れが生じる心配がありません。

また、ローカルでも閲覧するのであれば、相対URLで記述しておけばリンク先もまたローカルにあるリソースを参照出来るようになります。

具体的な相対URLの書き方は以下のようになります。

同じディレクトリ階層にあるリソースの場合

文書と同じディレクトリ(フォルダ)にあるリソースであれば、そのリソース名(ファイル名)をそのまま記述します。

例えば、http://www.uso800.uso/~user/example.html から http://www.uso800.uso/~user/Horikita.html を参照するのであれば、これは同じディレクトリ階層にあるため、

<a href="Horikita.html">堀北真希</a>

と記述するだけで良い事となります。

下位のディレクトリにあるリソースの場合

文書があるディレクトリ内にあるサブディレクトリにあるリソースの場合、サブディレクトリ名から記述して行きます。

例えば、http://www.uso800.uso/~user/example.html から http://www.uso800.uso/~user/Actress/Horikita.html を参照するのであれば、

<a href="Actress/Horikita.html">堀北真希</a>

と記述します。

更に下位のディレクトリにある場合も、順番にディレクトリ名を書いていけば良いのです。

例えば、http://www.uso800.uso/~user/example.html から http://www.uso800.uso/~user/Actress/Idol/Horikita.html を参照するのであれば、

<a href="Actress/Idol/Horikita.html">堀北真希</a>

と記述します。

上位のディレクトリにあるリソースの場合

文書があるディレクトリより上位のディレクトリにあるリソースの場合、上がる階層分だけ「../」を頭に付けます。

例えば、http://www.uso800.uso/~user/main/sub/example.html から http://www.uso800.uso/~user/Horikita.html を参照するのであれば、この場合二段上のディレクトリ内のリソースを参照するのですから

<a href="../../Horikita.html">堀北真希</a>

と記述します。

上位のディレクトリにあるサブディレクトリ内のリソースの場合

文書があるディレクトリより上位のディレクトリに位置する別のサブディレクトリ内にあるリソースの場合、上がる階層分だけ「../」を頭に付け、そのあとにサブディレクトリ名を記述していきます。

例えば、http://www.uso800.uso/~user/main/sub/example.html から http://www.uso800.uso/~user/Actress/Horikita.html を参照するのであれば、

<a href="../../Actress/Horikita.html">堀北真希</a>

と記述します。

絶対パス。

絶対パスとは、URLのうちスキーム名とノード名部分を取った残りの部分で表されるパスです。

ノード名とはURLに於いてスキーム名とそれ以降の「/」の間の部分です。

例えば、http://www.uso800.uso/~user/Actress/Horikita.html で言えば、

  1. http:// の部分がスキーム名
  2. www.uso800.uso の部分がノード名
  3. /~user/Actress/Horikita.html の部分がパス名であり絶対パス

となります。

従って、同じノード名のURLを持つ文書からこのURLを参照するのであれば

<a href="/~user/Actress/Horikita.html">堀北真希</a>

と記述出来ると言う事になります。

勿論、絶対パスは異なるノード名のリソースの参照には用いる事は出来ません。

また、この方式はサイトの移転でコンテンツを置けるディレクトリがずれた場合には修正が必要になります。

例えば、今まで http://www.uso800.uso/~user/Actress/Horikita.html だったリソースが移転で http://www.mydomain.uso/Actress/Horikita.html となった場合、絶対パスは

から

に変わってしまいます。

文書の途中を参照するには。

フラグメントとはHTML文書内で名前(フラグメント名…終点アンカー等に与える事が出来ます)が与えられた一部区間の事です。

<a>要素のhref属性で与えるURLに参照したい箇所に与えられたフラグメント名を加える事で、参照したい文書の更に特定の箇所が参照出来るようになります。

実際に<a>要素でフラグメントを参照するには、以下のようになります。

<a href="リンク先のURL#フラグメント名">(アンカーとなるフレーズ)</a>

例えば、堀北真希と言う文字列をhttp://www.mydomain.uso/Actress.html 内にある HORIKITA_MAKI と言う名前が与えられたフラグメントを参照するアンカーとしたい場合には、以下のようにマークアップします

<a href="http://www.mydomain.uso/Actress.html#HORIKITA_MAKI">堀北真希</a>

尚、参照したいフラグメントが参照元と同じ文書にある場合、すなわち同一文書内の別のフラグメントを参照したい場合にはURLを省略して#から記述する事が出来ます。

例えば、文書の先頭に戻るアンカーを降ろす場合は、予め文書の先頭にTOPと言うフラグメント名を与えた上で、

<a href="#TOP">先頭に戻る</a>

とする事が出来ます。

注釈。
フラグメント名は文書作成者が適宜与えていないと利用する事が出来ません

他者の文書をリンクする場合に於いては、適切な箇所にフラグメント名が与えられていない場合がしばしばありますが、そのような場合には

しかありません。

リンク先で定義されていないフラグメント名を指定しても問題はありません

例えば、

等の場合に、リンク先に存在しないフラグメント名を参照する事となりますが、そのような場合でもエラーにある事はありません。

但し、そのような場合には、文書内の何処にフォーカスが移るかは分かりません。

キーボードなどでのアクセスを助ける属性。

<a>要素には、キーボードなどでのアクセスを助ける属性も定義されております。

、特にaccesskey属性は携帯電話対応サイトで非常に有用です。

文書中にフラグメント名を設定するには。

さて、文書の途中を参照するにはで解説した通り、<a>要素のhref属性の値となる参照先URLに文書中の特定の区間(フラグメント)の名前を指定する事も出来ますが、その参照用のフラグメント名はどのように設定するのでしょうか。

それには、二つの方法があります。

  1. 一つは、文書中の一要素に固有の識別名・IDを与える事で、そのIDをフラグメント名として扱う方法
  2. もう一つは、終点アンカーとして<a>要素を用いる方法

後者は廃れつつある方法となっておりますが、ドコモの携帯電話は現在も前者の方法で指定したフラグメントを認識しないため、モバイル向けのHTML文書では今でも後者を使わざるを得ない状況です。

id属性をフラグメントとして利用出来るようにするには。

今日、参照用にフラグメント名を与える方法として推奨されているのは、参照可能にしたいある要素に固有の識別名・IDを与えると言う方法です。

特定の要素にIDを与えるにはid属性を開始タグに附与します。

id属性はHTMLで定義されている殆どの要素に与える事が出来ます。

例えば、堀北真希と言う<h1>要素にHORIKITA_MAKIと言うIDを与えたい場合には、以下のようにします。

<h1 id="HORIKITA_MAKI">堀北真希</h1>

現在のHTMLではこの方法を推奨しておりますが、この方法は後発の方法のため、旧式の環境では認識されないと言う問題があります。

勿論、今日ではPC向けのウェブブラウザで認識出来ないものは殆ど残っておりません(ネットスケープ 4.xなどは既に今日のウェブの閲覧では使い難いものとなりました)。

ただ、エヌ・ティ・ティ・ドコモの携帯電話に搭載されたｉモードブラウザでは、今日でもIDをフラグメント名として認識する事が出来ないとされており、この事からモバイル対応サイトでは、旧式の方法とされる<a>要素に依る終点アンカーを今日でも使わなければならない場合もあります。

終点アンカーを<a>要素としてマークアップするには。

今日では、文書中の一区間をフラグメントとして扱えるようにするには、当該区間の先頭にある要素にIDを与えてそのIDで参照出来るようにする事が推奨されておりますが、この方法は後発の方法であり、ドコモの携帯電話のｉモードブラウザでは未だに対応しておりません。

このため、旧式の方法である<a>要素を終点アンカーとして利用する方法が今も使われております。

<a>要素を終点アンカーに用いるには、以下のようにマークアップします。

<a name="フラグメント名"  id="ID">(アンカーとなるフレーズ)</a>

ここで、<a>要素の開始タグに

すなわち

が与えられる事に注意して下さい。

このフラグメント名を参照先をURLに加える事で、この箇所への他所からの参照が可能になります。

尚、name属性で与えるフラグメント名は任意の文字列が指定出来る事とされておりますが、先に述べた通り、<a>要素に依る終点アンカーよりもIDを与えた要素を終点アンカー代わりに利用する方法に変わりつつあるため、それに併せたものとする事が求められております。

このため、<a>要素を終点アンカーとして用いる場合もname属性とid属性を併記する事が求められております。

具体的には、

  1. 半角の英字で始まり、
  2. 半角の英数字, 「-」, 「_」, 「:」及び「.」から成る文字列

とします(※1)。

また、一つの文書の複数フラグメントで同じ名前を与えてはいけません。

加えて、小文字は使わない方が安全です(※2)。

例えば、堀北真希と言うを終点アンカーとする場合には、以下のようにします。

<a name="HORIKITA_MAKI" id="HORIKITA_MAKI">堀北真希</a>

id属性と<a>要素の終点アンカーのどちらが良いか。

これまでにも書いてきた通り、今日では参照用のフラグメント名を与えるにはフラグメントの先頭の要素にIDを与える事が推奨されております。

何よりも、IDを与える方法ならあらゆる要素に簡単に指定する事が可能であり、わざわざマークアップする必要も無いと言う利点があります。

また、実際のところid属性をフラグメント名として認識出来ないPC向けのウェブブラウザ(ネットスケープ 4.x以前など)は今日では殆ど使われなくなりました。

ただ、こう言った旧い環境を考慮したり、或いは未だにid属性を認識しないとされるドコモ携帯電話での閲覧を想定するのであれば、<a>要素での終点アンカーを用いるのも已むを得ないでしょう。

勿論、当該箇所にフォーカスが移らなくてもそれ程重大な問題にならないと考えられれば、無理して<a>要素の終点アンカーを降ろさずにid属性を与える事で対応出来る環境ではより便利にすると言う発想もあります。

HTMLの知識がある方へのより詳しい解説。

以下、HTMLの知識がある方への補足です。

※1 IDに使える文字について

XHTMLはXML応用言語であり、従ってIDには仮名漢字なども使える事とされております。

しかしながら、XHTMLを在来HTMLの代わりに利用する(具体的にはMIMEタイプを text/html として配信する)場合、ユーザエージェントに依っては在来HTMLのルールに従って認識する事が予想され、その場合には仮名漢字を含んだIDはエラーと認識される恐れがあります。

このため、XHTMLと言えども、在来HTMLとして利用する場合にはHTML 4.01の制限に従うのが賢明と言えます。

※2 IDに於ける大文字小文字の扱いについて

在来HTMLではIDは小文字を大文字として扱います。

一方、<a>要素にフラグメント名(name属性)とID(id属性)を併記する場合、それらの値は同じ文字列にする必要があるので、双方とも大文字で記述する必要があります。

尚、XHTMLでは大文字小文字を区別するため(正確には大文字への変換を行なわないとしているため)、従って大文字小文字の違いしかないIDも区別されます。

しかしながら、XHTMLを在来HTMLの代わりに利用する(具体的にはMIMEタイプを text/html として配信する)場合、ユーザエージェントに依っては在来HTMLのルールに従って小文字を大文字に変換して認識する事が考えられます。

その結果、大文字小文字の違いしかないIDを同一視する恐れがあります。

ですから、XHTMLと言えども、在来HTMLの代わりとして利用するのであれば、大文字小文字の違いしかない名前を用いるのはやめた方が良いでしょう。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com