HTML のハイパーリンクについて
HTMLにおいて、 要素はハイパーリンクを表し、あるウェブページから別のウェブページ、または同じページ内の別の場所への接続を提供します。 要素はインライン要素であり、テキストの一部として使用されます。
href 属性
要素が正しく機能するためには、href 属性が必要です。 href 属性は "hypertext reference" の略で、ハイパーリンクの宛先を指定します。
href 属性の値には、以下のような様々なものが使用できます。
- 絶対URL: https://www.example.com のような、完全なウェブアドレスを指定します。
- 相対URL: 現在のページからの相対パスを指定します。例えば、"contact.html" は同じディレクトリにある "contact.html" というファイルへのリンクになります。
- ページ内へのリンク: "#" 記号の後にID名を指定することで、同じページ内の特定の要素へのリンクを作成できます。
- メールアドレス: "mailto:" の後にメールアドレスを指定することで、メール送信画面を開くリンクを作成できます。
- 電話番号: "tel:" の後に電話番号を指定することで、電話をかけるためのリンクを作成できます。
要素の例
以下に、 要素の様々な使用例を示します。
| 例 | 説明 | コード |
| 別のウェブサイトへのリンク | Google のウェブサイトへのリンク | <a href="https://www.google.com">Google</a> |
| 同じディレクトリ内の別のページへのリンク | "about.html" という名前のページへのリンク | <a href="about.html">About Us</a> |
| ページ内へのリンク | "top" というIDを持つ要素へのリンク | <a href="#top">ページトップへ</a> |
| メールアドレスへのリンク | [email protected] へのメール送信画面を開くリンク | <a href="mailto:[email protected]">メールを送る</a> |
| 電話番号へのリンク | 012-345-6789 に電話をかけるリンク | <a href="tel:012-345-6789">電話をかける</a> |
コード例
<h1>ハイパーリンクの例</h1>
<p>これは <a href="https://www.example.com">外部リンク</a> の例です。</p>
<p><a href="contact.html">お問い合わせ</a> ページをご覧ください。</p>
<h2 id="top">ページトップ</h2>
<p>これはページ内リンクの例です。 <a href="#top">ページトップへ</a></p>関連QA
Q1: href 属性を指定しないとどうなるのですか？
A1: href 属性を指定しないと、 要素はハイパーリンクとして機能しません。リンク先が不明なため、クリックしても何も起こりません。
Q2: target 属性は何をするものですか？
A2: target 属性は、リンク先のページをどこに表示するかを指定します。例えば、"_blank" を指定すると、リンク先は新しいタブで開かれます。
A3: はい、 要素の中に画像を置くことで、画像をクリックするとリンク先にジャンプするような動作を実現できます。