リンク

外へのリンク

例えば三重大学ホームページへのリンクを設定するには

<p>私は<a href="https://www.mie-u.ac.jp/">三重大学</a>の学生です。</p>

のように書きます。「私は三重大学の学生です」のように表示されます。

a href の a は anchor（アンカー，錨（いかり））の意味です。<a href="...">...</a> をアンカー要素といいます。href は hypertext reference または hyperreference から来ています。

アドレス（URL）の中に & が含まれる場合は，& を &amp; と書き直す必要があります。これをしないと & の直後の文字列によっては誤動作します（例えば xxx.php?x=1&lt=2 の場合 &lt が < に変換されてしまいます）。このような書き換えが必要なのはHTML文書中のURLだけで，メールなどのテキスト中では書き換えません。［追記］現在のIE11，Safari，Firefox，Google Chromeを調べた限りでは，本文では &lt が < に変換されますが，アドレス欄ではセミコロンも含めて &lt; と書かない限り大丈夫のようです。

XHTMLでは <a href="...">...</a> はインライン要素でしたが，HTML5では <a href="..."><p>...</p><p>...</p></a> のような使い方も可能です。

自サイト内へのリンク

同じフォルダ内にあるファイルへのリンクは，ファイル名だけで行えます。例えば index.html から photo.html をリンクするなら，index.html の中に

<p>私の趣味は<a href="photo.html">写真</a>です。</p>

のように書きます。

逆に，photo.html から index.html に戻るリンクを設定するには，photo.html の中に

<p><a href="index.html">戻る</a></p>

のように書けばいいと思うかもしれませんが，これは

<p><a href="./">戻る</a></p>

のように書くのが正しい方法です。index.html はつねに省略できる（ようにサーバで設定してある）ので，アナウンスするURL（Webページのアドレス）は index.html を含まないようにし，「戻る」のリンクをたどっても index.html というファイル名が現れないようにします。これはURLの正規化（url canonicalization）の一つで，これを守れば，検索エンジンに優しいサイトになります。

同じサーバの中の（ドメイン名の同じ）ファイルへのリンクなら，https://ドメイン名 の部分は省略できます。例えば https://同じドメイン/foo/bar.html へのリンクは <a href="/foo/bar.html">...</a> となります。

https://example.org/foo/bar.html から https://example.org/ へのリンクは，<a href="../">一つ上の階層に戻る</a> あるいはこの場合は <a href="/">ホームページに戻る</a> と書くことができます。

ただし，「戻る」といっても，どこに戻るのかわかりにくいので，最近はこのページの最初にあるような「パンくずリスト」（breadcrumbs）を使うことが増えています。

パンくずリスト

「パンくずリスト」（breadcrumbs）は，Webサイトで迷子にならないようにするためのリンクのことです。グリム童話「ヘンゼルとグレーテル」で主人公が森で迷子にならないように通り道にパンくずを置いていった話にちなみます。

このページの先頭にあるようなパンくずリストは，次のようにして作れます（> は &gt; と書きます）：

<nav id="breadcrumbs">
<a href="../">ホーム</a> &gt;
<a href="./">HTML5とCSS3</a> &gt;
</nav>

スタイルシートには例えば次のように定義しておきます：

#breadcrumbs { font-size: 90% }
#breadcrumbs + h1 { margin-top: 0 }

つまり，パンくずリストのフォントは通常の90%のサイズで，後続のh1要素の直前のマージンを0にしてあります。

ページ内へのリンク

このページの ほげ という名前のところに飛びます（飛ばない場合はこのページの一番下の説明をご覧下さい）。

このページの <a href="#hoge">ほげ</a> という名前のところに飛びます。

別のページからページ内の特定の位置に飛ぶには，<a href="https://example.org/hoge.html#hoge">ほげ</a> のようにします。

別窓でのリンク

別窓でのリンクは <a href="https://example.org/" target="_blank"> ... </a> のように書きます（ブラウザの設定によっては別窓ではなく別タブになります）。また，target="hoge" のように適当な名前を与えると，その別窓を後で再利用できます。

他サイトへのリンクはすべて別窓でのリンクにしているサイトがあります。自サイトの滞在時間を少しでも延ばそうという意図だと思いますが，リンクをたどるたびに窓が開くのは嫌なことです。窓だらけになってしまうだけでなく，慣れていない人は，戻ろうとして「戻る」ボタンを押しても戻れないので，パニックになってしまうことがあります。

リンクの色

CSSでリンクの色を指定することができます：

a:link { color: blue }      /* 通常のリンク */
a:visited { color: purple } /* 訪問したリンク */
a:hover { color: red }      /* マウスの乗ったリンク */
a:active { color: teal }    /* クリック中のリンク */

好ましくないページへのリンク

好ましくないページへのリンクは <a href="..." rel="nofollow">悪いサイト</a> のようにしておきましょう。

Google では，信頼のおけるページからリンクされたページは格付けが上がり，逆に好ましくないページへのリンクを含むページは格付けが下がるようです。この仕組みを働かせないために nofollow が使えるようです。



まだ下に例があります（わざと空けてあります）。















ページ内の飛び先の例

ほげ

<h3 id="hoge">ほげ</h3>

これは新しい書き方です。

昔のHTMLでは次のように書きました。

<h3><a name="hoge">ほげ</a></h3>

もう新しい書き方だけで大丈夫だと思いますが，もし心配なら，次のように両方の書き方を併用することができます：

<h3><a name="hoge" id="hoge">ほげ</a></h3>

文字列を利用したページ内へのリンク

Text Fragments というリンクのしかたが Google Chrome など一部のブラウザで使えます。URLの最後に

#:~:text=文字列

を付けると、そのページの「文字列」と書かれた最初の部分が飛び先になります。「文字列」はハイライト表示になります。また、

#:~:text=開始文字列,終了文字列

とすると、「開始文字列」から始まって「終了文字列」で終わる部分が飛び先になり、ハイライト表示されます。

Last modified: