HTMLリンク
HTMLリンクは、ウェブページ間やウェブページと他のリソース（ドキュメント、画像、音声ファイルなど）をつなぐために使用されます。リンクは、ユーザーがウェブをナビゲートするための重要な要素であり、テキストや画像をクリックして他の場所に移動することができます。
HTMLのリンクの基本
HTMLリンクの役割
HTMLリンクは、ウェブページ間のナビゲーションを可能にします。リンクを使用することで、ユーザーは簡単に他のページやリソースにアクセスすることができます。リンクは、通常、テキストや画像をクリックすることで機能します。
HTMLリンクの作成
HTMLリンクを作成するには、<a> タグを使用します。このタグは、リンクの目的地を指定するための href 属性を持ちます。
<a href="https://www.japanitguide.com">例のウェブサイトにアクセス</a>上記の例では、「例のウェブサイトにアクセス」というテキストがリンクとして表示され、クリックすると https://www.japanitguide.com に移動します。
HTMLのハイパーリンク
ハイパーリンクの基本
ハイパーリンクは、テキストや画像などをクリックして新しいドキュメントや同じドキュメント内の別の部分に移動することができます。ハイパーリンクは、<a> タグと href 属性を使用して作成されます。
<a href="https://www.japanitguide.com">例のウェブサイトにアクセス</a>ハイパーリンクの属性
<a> タグにはいくつかの重要な属性があります：
- href：リンク先のURLを指定します。
- target：リンクが開かれる方法を指定します。例：_blank（新しいタブまたはウィンドウで開く）、_self（現在のタブまたはウィンドウで開く）。
- title：リンクの追加情報を提供し、マウスをリンクの上に置いたときにツールチップとして表示されます。
- rel：リンク先との関係を指定します。例：nofollow、noopener。
基本的なリンクの例
<a href="https://www.japanitguide.com" target="_blank" title="例のウェブサイトにアクセス">例のウェブサイトにアクセス</a>この例では、リンクが新しいタブで開かれ、リンクにマウスを置いたときに「例のウェブサイトにアクセス」というツールチップが表示されます。
テキストリンクと画像リンク
テキストリンク
テキストリンクは、最も一般的なリンクタイプです。<a> タグを使用して、テキストをクリック可能なリンクに変換します。
<a href="https://www.japanitguide.com">例のウェブサイトにアクセス</a>画像リンク
画像をリンクにすることもできます。この場合、<a> タグで <img> タグを囲みます。
<a href="https://www.japanitguide.com"> <img src="/dist/images/logo/logo-ly.webp" alt="例の画像"></a>アンカーリンク
同じページ内での内部リンクを作成することもできます。これをアンカーリンクと呼びます。ターゲット位置に <a> タグを使用してマークを定義し、# 記号でそのマークを参照します。
<a href="#section2">第二部分に移動</a><!-- ページ内のどこかに --><a name="section2"></a>ダウンロードリンク
リンクをクリックするとファイルをダウンロードするようにするには、download 属性を使用します。
<a href="/html.pdf" download>ドキュメントをダウンロード</a>HTML リンク - target 属性
target 属性を使用すると、リンクされたドキュメントがどこに表示されるかを定義できます。
<a href="https://www.japanitguide.com" target="_blank" rel="noopener noreferrer">例のウェブサイトにアクセス!</a>この例では、リンクが新しいウィンドウで開かれ、noopener 属性と noreferrer 属性によりセキュリティが強化されています。
HTML リンク - id 属性
id 属性を使用してHTMLドキュメント内にブックマークを作成することができます。ブックマークはユーザーには表示されませんが、内部リンクとして使用できます。
<a id="tips">有用なヒントのセクション</a><a href="#tips">有用なヒントのセクションにアクセス</a>また、他のページからリンクすることも可能です：
<a href="https://www.japanitguide.com/html.html#tips">有用なヒントのセクションにアクセス</a>HTMLリンクの注意点
スラッシュの追加
サブフォルダにリンクする場合は、常にスラッシュを追加してください。例えば、href="https://www.japanitguide.com/html" のように書くと、サーバーはアドレスにスラッシュを追加し、新しいリクエストを作成します：href="https://www.japanitguide.com/html/"。
例
画像リンクの例
<a href="https://www.japanitguide.com"> <img src="/japanitguide.jpg" alt="例の画像"></a>ブックマークの例
<a href="#section2">第二部分に移動</a><a name="section2"></a>フレームからのリンク
<a href="https://www.japanitguide.com" target="_top">フレームを解除してアクセス</a>メールリンクの例
<a href="mailto:[email protected]">メールを送信</a>メールリンクの詳細な例
<a href="mailto:[email protected]?subject=問い合わせ&body=こんにちは">メールを送信（件名と本文付き）</a>HTMLリンクタグ
|
タグ |
説明 |
|
<a> |
ハイパーリンクを定義します |
QA
Q1: HTMLでリンクを作成するにはどのタグを使用しますか？
A1: HTMLでリンクを作成するには、<a> タグを使用します。<a> タグには href 属性があり、リンク先のURLを指定します。
Q2: 画像をリンクにするにはどうすればいいですか？
A2: 画像をリンクにするには、<a> タグで <img> タグを囲みます。例えば：
<a href="https://www.japanitguide.com"> <img src="/japanitguide.jpg" alt="例の画像"></a>Q3: ダウンロードリンクを作成するにはどうすればいいですか？
A3: ダウンロードリンクを作成するには、<a> タグに download 属性を追加します。例えば：
<a href="/html.pdf" download>ドキュメントをダウンロード</a>