ウェブサイト上での重要な情報伝達手段であるリンク。しかし、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%のキャッシュバックを受けることができます。
最大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でのリンクには様々な設定方法がありますが、それぞれの属性や要素を使い分けることで、より使い勝手の良いウェブページを作ることができます。リンクの設定方法を理解して、効果的なウェブページ作りに役立てましょう。
コメント