ウェブサイト上での重要な情報伝達手段であるリンク。しかし、HTMLでのリンクの設定方法は複数あり、それぞれの設定によってリンクの挙動が変わるため、混乱することもあります。
この記事では、HTMLでのリンクについて、基本的な a 要素から、外部ファイルとの関係を示す rel 属性、画面幅などによって読み込むCSSファイルを指定する media 属性、リンクの基準となるURLを指定する base 要素までを詳しく解説していきます。
HTMLでリンクを設定する項目って、それぞれの属性にはどういった役割を持っているんですか？
target 属性は、リンク先の表示ウィンドウを指定するために使用されます。 title 属性は、リンク先の説明を示すために使用されます。 rel 属性は、HTML文書とリンク先との関係性を示すために使用されます。
リンクの要素や属性について解説しましょう。
リンクの概要
HTMLのリンクは、ウェブページを構造化するための基本的な要素の1つです。リンクは、ページ内や外部のページに素早くアクセスするための手段として使用されます。
リンクを作成するには、アンカータグ <a> を使用します。href 属性には、リンク先のURLを指定する必要があります。リンクをクリックしたときの動作を指定する場合には、 target 属性を使用します。
また、 img タグを使用することで、リンク先に画像を表示することもできます。リンクは、WebデザインやWeb開発において非常に重要な役割を果たします。
リンクを表示する：a要素
リンクを表示するには、アンカータグ <a> を使用します。 <a> タグには、次のような属性があります。
href：リンク先のURLを指定します。target：リンク先の表示方法を指定します。download：リンク先をダウンロードするように指示します。rel：リンク先との関係を指定します。type：リンク先のファイルタイプを指定します。title：リンクのタイトルを指定します。
以下は、最も基本的な形式のリンクの例です。
<a href="http://example.com">リンクのテキスト</a>上記の例では、 href 属性でリンク先のURLを指定しています。リンクテキストは a タグの間に記述されています。この例では、リンク先のURLは http://example.com であり、リンクテキストは「リンクのテキスト」というテキストです。
リンク先の表示ウィンドウを指定：target属性
HTMLのリンク先の表示方法を指定するために、 target 属性を使用することができます。 target 属性は、次の4つの値を持つことができます。
_self：現在のウィンドウでリンク先を表示します（デフォルト）。_blank：新しいウィンドウでリンク先を表示します。_parent：フレームの親ウィンドウでリンク先を表示します。_top：すべてのフレームを無視して、ブラウザの最上位のウィンドウでリンク先を表示します。
以下は、 target 属性を使用して、新しいウィンドウでリンク先を表示する例です。
<a href="http://example.com" target="_blank">リンクのテキスト</a>上記の例では、 target 属性を _blank に設定して、リンク先を新しいウィンドウで表示するように指定しています。
フレームを使用している場合には、 target 属性を使用して、リンク先の表示先を指定することができます。例えば、親フレームでリンク先を表示する場合は、以下のようになります。
<a href="http://example.com" target="_parent">リンクのテキスト</a>上記の例では、 target 属性を _parent に設定して、フレームの親ウィンドウでリンク先を表示するように指定しています。
_top 値を使用すると、すべてのフレームを無視して、ブラウザの最上位のウィンドウでリンク先を表示することができます。
<a href="http://example.com" target="_top">リンクのテキスト</a>上記の例では、 target 属性を _top に設定して、ブラウザの最上位のウィンドウでリンク先を表示するように指定しています。
以上が、 target 属性を使用してHTMLでリンク先の表示方法を指定する方法です。
ページ内の特定の場所にリンク：＃
ページ内の特定の場所にリンクする方法には、アンカータグ <a> を使用する方法があります。この方法は、ウェブページが長くなった場合に、ページ内の特定の場所に素早くジャンプするための便利な方法です。
アンカータグは、 href 属性に # とアンカー名を追加して、ジャンプ先の場所を指定します。アンカー名は、ジャンプ先の場所に配置された要素の id 属性と同じものを使用します。例えば、以下のようになります。
<a href="#section1">セクション1にジャンプする</a>上記の例では、 href 属性に #section1 を指定して、アンカーリンクを作成しています。ジャンプ先の場所には、 <section> 要素に id 属性を指定して、 section1 というアンカー名を割り当てる必要があります。
以下は、ジャンプ先の場所の例です。
<section id="section1">
<h2>セクション1の見出し</h2>
<p>セクション1の本文</p>
</section>上記の例では、 <section> 要素に id 属性を指定して、 section1 というアンカー名を割り当てています。
アンカーリンクをクリックすると、ページ内の指定された場所にジャンプします。また、ページ内の他の場所からアンカーリンクを作成する場合には、同じアンカー名を使用する必要があります。
メールアドレス用のリンク：mailto
メールアドレス用のリンクを作成するには、 mailto プロトコルを使用します。 mailto プロトコルを使用すると、ユーザーがクリックしたときにデフォルトのメールクライアントが開き、指定されたメールアドレスにメールを送信することができます。
以下は、 mailto プロトコルを使用してメールアドレス用のリンクを作成する例です。
<a href="mailto:example@example.com">メールを送信する</a>上記の例では、 href 属性に mailto: とメールアドレスを指定しています。リンクテキストは a タグの間に記述されています。この例では、メールアドレスは example@example.com であり、リンクテキストは「メールを送信する」というテキストです。
また、複数のメールアドレスに同時にメールを送信する場合には、以下のようにカンマで区切って複数のメールアドレスを指定することができます。
<a href="mailto:example1@example.com,example2@example.com">メールを送信する</a>上記の例では、 href 属性に mailto: と2つのメールアドレスをカンマで区切って指定しています。
メールアドレス用のリンクを作成する際には、 subject や body などのパラメーターを指定することもできます。例えば、以下のようになります。
<a href="mailto:example@example.com?subject=お問い合わせ&body=ご質問があります。">メールを送信する</a>上記の例では、 subject パラメーターに「お問い合わせ」、 body パラメーターに「ご質問があります。」というテキストを指定しています。
電話番号用のリンク：tel
電話番号用のリンクを作成するには、 tel プロトコルを使用します。 tel プロトコルを使用すると、ユーザーがクリックしたときにデフォルトの電話アプリが開き、指定された電話番号に発信することができます。
以下は、 tel プロトコルを使用して電話番号用のリンクを作成する例です。
<a href="tel:123-456-7890">電話をかける</a>上記の例では、 href 属性に tel: と電話番号を指定しています。リンクテキストは a タグの間に記述されています。この例では、電話番号は 123-456-7890 であり、リンクテキストは「電話をかける」というテキストです。
また、国際電話番号を指定する場合には、以下のように + を含めた書式で指定することが推奨されています。
<a href="tel:+81-123-456-7890">電話をかける</a>上記の例では、 +81 は日本の国際電話番号を表します。
電話番号用のリンクを作成する際には、 tel プロトコル以外にも、 callto プロトコルや wtai プロトコルが使用されることがありますが、これらは非標準化されているため、 tel プロトコルを使用することが推奨されます。
ダウンロード用のリンク：donwload
ダウンロード用のリンクを作成するには、 download 属性を使用します。 download 属性を使用すると、ユーザーがクリックしたときに指定されたファイルをダウンロードすることができます。
以下は、 download 属性を使用してダウンロード用のリンクを作成する例です。
<a href="example.pdf" download>PDFをダウンロードする</a>上記の例では、 href 属性にダウンロードするファイルのURLを指定しています。 download 属性は、ダウンロードするファイルの名前を指定することもできます。以下は、 download 属性を使用してダウンロードするファイル名を指定する例です。
<a href="example.pdf" download="ダウンロードしたいファイル名.pdf">PDFをダウンロードする</a>上記の例では、 download 属性にダウンロードするファイル名を指定しています。
また、 download 属性は、ダウンロードするファイルの種類を指定することもできます。以下は、 type 属性を使用して、ダウンロードするファイルの種類を指定する例です。
<a href="example.zip" download type="application/zip">ZIPファイルをダウンロードする</a>上記の例では、 type 属性に application/zip を指定して、ダウンロードするファイルの種類をZIPファイルに指定しています。
ダウンロード用のリンクを作成する際には、セキュリティ上の理由から、ダウンロードするファイルのURLは同一ドメイン内にある必要があります。また、ダウンロードするファイルのサイズが大きい場合には、ダウンロード中にユーザーに進捗状況を表示するために、 download 属性と progress 属性を併用することもできます。
特定のキーにリンクを割り当てる：acceskey
HTMLで特定のキーにリンクを割り当てるには、 accesskey 属性を使用します。 accesskey 属性を使用すると、キーボードのショートカットキーを使って、指定されたリンクにアクセスすることができます。これは、マウスを使用できないユーザーや、キーボード操作に慣れているユーザーにとって便利な機能です。
以下は、 accesskey 属性を使用して特定のキーにリンクを割り当てる例です。
<a href="http://example.com" accesskey="c">コンテンツにジャンプする</a>上記の例では、 accesskey 属性に c を指定しています。これにより、 Alt + c キーを押すことで、指定されたリンクにアクセスすることができます。
また、複数のキーを割り当てることもできます。以下は、 accesskey 属性を使用して複数のキーにリンクを割り当てる例です。
<a href="http://example.com" accesskey="c b">コンテンツにジャンプする</a>上記の例では、 accesskey 属性に c b を指定しています。これにより、 Alt + c キーまたは Alt + b キーを押すことで、指定されたリンクにアクセスすることができます。
accesskey 属性を使用する際には、ブラウザによっては異なるキーボードショートカットが使用される場合があるため、キーボードショートカットの一覧を提供することが望ましいです。
リンク先の説明を示す：title属性
リンク先の説明を示すには、 title 属性を使用します。 title 属性を使用すると、ユーザーがリンク上にマウスを置いたときに、指定されたテキストを表示することができます。これにより、ユーザーがリンク先を事前に理解することができるため、利便性が向上します。
以下は、 title 属性を使用してリンク先の説明を示す例です。
<a href="http://example.com" title="サンプルサイトに移動する">サンプルサイト</a>上記の例では、 title 属性に「サンプルサイトに移動する」というテキストを指定しています。これにより、ユーザーがリンク上にマウスを置いたときに、指定されたテキストがツールチップとして表示されます。
また、 title 属性は、リンク先以外の要素にも使用することができます。例えば、以下のように画像に対して title 属性を指定することで、画像の説明を表示することができます。
<img src="example.jpg" alt="サンプル画像" title="画像の説明を記入">上記の例では、 title 属性に「画像の説明を記入」というテキストを指定しています。
title 属性は、 a 要素や img 要素だけでなく、他の要素でも使用することができます。しかし、 title 属性に長いテキストを指定すると、画面からはみ出る可能性があるため、簡潔で分かりやすい説明を指定することが望ましいです。
外部ファイルとの関係を表す：rel属性
外部ファイルとの関係を表すには、 rel 属性を使用します。 rel 属性を使用すると、HTML文書とリンク先との関係性を示すことができます。これにより、検索エンジンなどが正確に文書の関係性を理解することができ、SEOの向上につながります。
以下は、 rel 属性を使用して外部ファイルとの関係を表す例です。
<link rel="stylesheet" href="style.css">上記の例では、 rel 属性に stylesheet を指定しています。これにより、HTML文書と style.css との関係性を示しています。 rel 属性に指定する値には、他にも icon、alternate、author、canonical、next、prev などがあります。
| 値 | 説明 |
|---|---|
alternate | 代替バージョンの文書を示す。 |
author | 文書の著者情報を示す。 |
canonical | カノニカルURLを示す。 |
help | ヘルプ文書を示す。 |
icon | ウェブページのアイコンを示す。 |
license | 文書の利用規約を示す。 |
next | 次のページを示す。 |
nofollow | リンクを辿ってもページランクに影響しないようにする。 |
noopener | 開かれたウィンドウの window.opener プロパティからのアクセスをブロックする。 |
noreferrer | リファラー情報を含めてリンク先に情報を送信しないようにする。 |
pingback | ピングバックURLを示す。 |
preconnect | リソースへの接続を事前に確立しておく。 |
prefetch | リソースを事前に取得しておく。 |
preload | リソースを事前に取得し、ブラウザがよりスムーズに読み込むことを促進する。 |
prerender | ページの事前レンダリングを行う。 |
prev | 前のページを示す。 |
search | 検索ボックスを示す。 |
stylesheet | スタイルシートを示す。 |
注意：この表に示されている rel 属性の値は、Web標準化団体であるW3Cが定めた規格に準拠していますが、すべてのブラウザで完全にサポートされているわけではありません。また、 rel 属性には独自の値を使用することもできますが、SEOの観点から、標準化された値を使用することが望ましいです。
また、 rel 属性には、複数の値を指定することもできます。例えば、以下のように stylesheet と preload の両方を指定することができます。
<link rel="stylesheet preload" href="style.css">上記の例では、 rel 属性に stylesheet と preload を指定しています。
rel 属性を使用する際には、Web標準化団体であるW3Cが定めた規格に準拠することが望ましいです。これにより、検索エンジンなどが正確に文書の関係性を理解することができ、SEOの向上につながります。
読み込むCSSファイルの設定：media属性
CSSファイルを読み込む際に、 media 属性を使用して、読み込むべきメディアタイプを指定することができます。 media 属性を使用すると、特定の条件に合わせてスタイルシートを読み込むことができるため、レスポンシブデザインやモバイルフレンドリーなウェブサイトの作成に役立ちます。
以下は、 media 属性を使用して、画面幅が640px以上の場合にのみスタイルシートを読み込む例です。
<link rel="stylesheet" href="style.css" media="screen and (min-width: 640px)">上記の例では、 media 属性に screen and (min-width: 640px) を指定しています。これにより、スクリーンメディアで、画面幅が640px以上の場合にのみスタイルシートを読み込むように指定しています。
また、 media 属性には、複数の条件を指定することもできます。例えば、以下のように、プリンター用スタイルシートを読み込む場合には、 media 属性に print を指定します。
<link rel="stylesheet" href="print.css" media="print">media 属性には、他にも all、screen、speech、handheld、tv など、様々な値を指定することができます。これにより、さまざまなメディアタイプに合わせたスタイルシートの読み込みが可能となります。
リンクの基準となるURLを指定：base要素
リンクの基準となるURLを指定するためには、 base 要素を使用します。 base 要素を使用することで、HTML文書内の相対URLを解決する際に、 href 属性で指定されたURLを基準として解決することができます。これにより、HTML文書内のリンクの挙動を変更することができます。
以下は、 base 要素を使用して、リンクの基準となるURLを指定する例です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプルページ</title>
<base href="https://example.com/">
</head>
<body>
<p><a href="page1.html">ページ1へ</a></p>
<p><a href="page2.html">ページ2へ</a></p>
</body>
</html>上記の例では、 base 要素に https://example.com/ を指定しています。これにより、HTML文書内の page1.html や page2.html といった相対URLが、 https://example.com/ を基準として解決されるようになります。
また、 base 要素は、HTML文書内に1つしか使用できないことに注意してください。また、 base 要素は、 head 要素内に配置する必要があります。
リスキリングでキャリアアップしてみませんか？
リスキリング(学び直し)は、経済産業省が推奨しており、
今だけ、最大７０％のキャッシュバックを受けることができます。
最大70％の給付金が出るおすすめのプログラミングスクール！
国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！
興味のある方はすぐに確認しましょう。
まとめ
HTMLでのリンクの設定方法について解説しました。
- リンクの設定方法には、
a要素以外にも、target属性やtitle属性、rel属性、download属性などがあります。 target属性は、リンク先の表示ウィンドウを指定するために使用されます。title属性は、リンク先の説明を示すために使用されます。rel属性は、HTML文書とリンク先との関係性を示すために使用されます。download属性は、リンク先のファイルをダウンロードするために使用されます。- ページ内の特定の場所にリンクする際には、
id属性を使用してアンカーを作成し、a要素内のhref属性に#とアンカー名を指定します。 - メールアドレス用のリンクを作成する場合は、
mailto:スキームを使用してa要素内のhref属性にメールアドレスを指定します。 - 電話番号用のリンクを作成する場合は、
tel:スキームを使用してa要素内のhref属性に電話番号を指定します。 - CSSファイルを読み込む際には、
link要素内のhref属性にCSSファイルのパスを指定し、media属性を使用して読み込むべきメディアタイプを指定することができます。 - リンクの基準となるURLを指定する場合は、
base要素を使用します。
リンクの設定方法はa要素だけではなかったんですね。target属性やtitle属性、rel属性もあって、それぞれの役割が分かって良かったです。また、CSSファイルの読み込み方法もmedia属性やbase要素でいろいろできるのが面白いですね。
HTMLでのリンクには様々な設定方法がありますが、それぞれの属性や要素を使い分けることで、より使い勝手の良いウェブページを作ることができます。リンクの設定方法を理解して、効果的なウェブページ作りに役立てましょう。