HTMLでハイパーリンクを作成するには？
Webページを閲覧する上で欠かせない要素の一つに「ハイパーリンク」があります。ハイパーリンクをクリックすることで、他のページやファイルに瞬時に移動することができます。HTMLでは、このハイパーリンクを簡単に作成することができます。
aタグとhref属性を利用する
HTMLファイルにハイパーリンクを設定するには、<a>タグとhref属性を利用します。 <a>タグはHTMLタグの一種で、アンカータグとも呼ばれ、ハイパーリンクを作成するための要素です。href属性には、リンク先のURLを指定します。
具体的には、ハイパーリンクとして表示したい文字列を<a>タグで囲み、href属性に移動先のURLを指定します。例えば、Googleのトップページへのリンクを作成する場合は、以下のようになります。
<a href="https://www.google.com/">Google</a>
このコードをブラウザで表示すると、「Google」という文字列がハイパーリンクになり、クリックするとGoogleのトップページに移動します。
ハイパーリンクの種類
ハイパーリンクには、大きく分けて以下の3つの種類があります。
| 種類 | 説明 | 例 |
|---|---|---|
| 絶対URLを用いたリンク | Webサイトのドメイン名から始まる完全なURLを指定する。 | <a href="https://www.example.com/">Example</a> |
| 相対URLを用いたリンク | 現在のHTMLファイルからの相対的なパスを指定する。 | <a href="about.html">About Us</a> |
| 同一ページ内へのリンク | ページ内の特定の場所に移動するリンクを作成する。 | <a href="#section1">セクション1へ移動</a> |
target属性でリンクの開き方を指定する
target属性を使用すると、リンクをクリックしたときに新しいウィンドウまたはタブでページを開くように指定できます。 target属性には、以下の値を指定できます。
| 値 | 説明 |
|---|---|
| _blank | 新しいウィンドウまたはタブでリンクを開く |
| _self | 現在のウィンドウまたはタブでリンクを開く（デフォルト） |
| _parent | 親フレームセット内の現在のフレームを対象とする |
| _top | ウィンドウ全体を対象とする（フレームを使用している場合） |
例えば、新しいタブでGoogleを開く場合は、以下のように記述します。
<a href="https://www.google.com/" target="_blank">新しいタブでGoogleを開く</a>
まとめ
HTMLでハイパーリンクを作成する方法について解説しました。<a>タグとhref属性を組み合わせることで、簡単にWebページ間を移動するリンクを作成できます。target属性を組み合わせることで、更にユーザーにとって使いやすいWebページを作成することが可能です。
参考文献
よくある質問
Q1. 相対パスでリンクを設定する際に、一つ上の階層を指定するにはどうすれば良いですか？
A1. 相対パスで一つ上の階層を指定するには、パス名の前に「../」を記述します。例えば、「index.html」ファイルがある階層から一つ上の階層にある「about.html」ファイルにリンクを貼る場合は、「<a href="../about.html">会社案内</a>」のように記述します。
Q2. ハイパーリンクの色を変更することはできますか？
A2. はい、CSSを使用することでハイパーリンクの色を変更することができます。例えば、「a { color: blue; }」のように記述すると、すべてのハイパーリンクの文字色が青色になります。
Q3. JavaScriptを使って動的にハイパーリンクを作成することはできますか？
A3. はい、JavaScriptを使用することで動的にハイパーリンクを作成することができます。例えば、「document.createElement("a")」メソッドを使用して新しいアンカー要素を作成し、「href」属性にURLを設定することで、JavaScriptで生成したハイパーリンクを作成することができます。
その他の参考記事:jquery href 取得