ハイパーリンクしたい(a)
<a href="リンク先のURL">リンクテキスト</a>
aタグは、ハイパーリンクを表示するタグです。
href属性にリンク先のURLを指定します。
内部ページへのリンクは相対パスで指定することもできます。
a {
color: #0066cc;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
デフォルトのハイパーリンク表示は、青色で下線付きです。
これは好みが分かれます。
text-decoration: noneで消しつつ、
:hover時だけ下線を表示するのが定番です。
下線を常に消したままにする場合は、地の文と見分けがつくよう色のコントラストを十分につけましょう。
外部リンクしたい(rel="noopener noreferrer")
<a target="_blank" rel="noopener noreferrer" href="外部サイトのURL">
rel属性には現在の文書とリンク先の関係を記述します。
外部サイトにリンクする際は、上のような属性を追加します。
rel="noopener"は、新しく開いたページからwindow.opener経由で元のページを操作できないようにする値です。
これにより、開いた側が元のページを不正なサイトへ誘導する(タブナビング)攻撃を防げます。
rel="noreferrer"は、新しく開いたページに現在のページのリファラー情報を渡さないようにする値です。
内部サイトへ、自分で管理しているサイトへのリンクであればこれらの設定はなくてもOKです。
注釈
rel属性に設定する値はnoreferrerです。
HTTPリクエストヘッダーのフィールド名はRefererです。
スペルミスがそのまま標準化されてしまったそうです。
注釈
最近のブラウザではtarget="_blank"は自動的にnoopener相当の挙動になるため、
省略してもwindow.opener経由の操作はできません。
とはいえ古いブラウザとの互換性や、意図を明確にする意味でも明示しておくのが安全です。
なおnoreferrer(リファラーを送らない)はこの自動適用の対象外なので、必要な場合は明示する必要があります。
別タブしたい(target="_blank")
<a target="_blank" rel="noopener noreferrer" href="...">
target属性でリンク先のURLを表示する場所を変更できます。
属性値として
_self(現在のページ)、
_blank(新しいタブ)、
_parent(親コンテキスト)、
_top(最上位の親コンテキスト)があります。
デフォルトは_selfです。
別タブもしくは別ウィンドウで開きたい場合は、target="_blank"を指定します。
a[target="_blank"]::after {
content: " ↗";
font-size: 0.9em;
}
別タブで開くことが一目でわかるように、
CSSで属性セレクター(a[target="_blank"])を指定して
矢印(↗)などのアイコンを自動表示しておくとよいです。
擬似要素(::after)のcontentには、任意の絵文字やアイコンフォントを指定できます。
ページャーしたい(rel="prev" / rel="next")
<a rel="prev" href="...">前のページ</a>
<a rel="next" href="...">次のページ</a>
rel属性には現在の文書とリンク先の関係を記述します。
前後のページへのリンクを設定する場合は、prevとnextを指定します。
<a rel="alternate" href="...">代替ページ</a>
<a rel="help" href="...">ヘルプページ</a>
<a rel="license" href=".../license/">MITライセンス</a>
他にも、リンク先の関係を表す値がいくつかあります。
URLを印刷したい(@media print)
@media print {
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 0.9em;
word-break: break-all;
}
}
紙に印刷するとハイパーリンクはクリックできません。
@media printでCSSを設定すると、印刷もしくはPDF出力時にURLを展開できます。
属性セレクター(a[href^="http"])で前方一致マッチさせ、httpで開始する外部URLだけを対象とするとよいです。
リファラーしたい(referrerpolicy)
referrerpolicyで、リンクをたどるときにリファラーを送信するか設定できます。
以前はrel属性でリファラーを動作を設定していましたが、
いつの間にか新しい属性ができていました。
referrerpolicy="no-referrer": リファラーを送信しないreferrerpolicy="origin": 参照元ページのオリジンのみに限定してリファラーを送信