Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
学ぶ リンクの使用 | HTMLフォームとユーザー入力
究極のHTML

リンクの使用

メニューを表示するにはスワイプしてください

<a> タグは、ユーザーが異なるウェブページ間を移動できるハイパーリンクを作成するために使用。ユーザーがリンクをクリックすると、ブラウザはリンク先のページをサーバーにリクエストし、画面にレスポンスを表示。href 属性は、遷移先ページのURLを指定するために利用。

index.html

index.html

リンク属性

target

デフォルトでは、リンクは同じブラウザタブで開かれます。target属性を使用すると、この動作を変更できます。リンクを新しいタブで開くには、target="_blank"を使用します。

index.html

index.html

download

download属性は、HTMLの<a>タグで使用でき、対象リソースをブラウザで表示するのではなくダウンロードさせることを指定します。download属性が使用されている場合、ブラウザはユーザーに指定されたファイル名で保存するよう促します。例えば、次の機能を持つ要素を作成する必要がある場合:ユーザーがリンクをクリックすると、ブラウザはhttps://example.com/から"myfile.pdf"ファイルをダウンロードし、ファイル名myfile.pdfで保存するようユーザーに促します。

index.html

index.html

href

href 属性は、他のページへの移動だけでなく、メールアドレス、電話番号、特定のセクションへのリンク作成にも使用。

index.html

index.html

さらに、href属性はウェブページ内の特定のセクションへ移動するためにも利用可能です。アンカータグを作成するには、スクロールしたいセクションにid属性(ユニークな識別子)を割り当てます。href属性には、#記号に続けてid値を指定します。

次の例をCodeSandbox形式で確認しましょう。このプラットフォームではコードの確認や、機能の動作を調べることができます。

Note
ノート

リンクをクリックして、ライブページが特定のセクションへスクロールする動作を確認してください。また、aタグおよびh2タグの属性にも注目してください。

question mark

<a>タグの主な役割は何ですか?

正しい答えを選んでください

すべて明確でしたか?

どのように改善できますか?

フィードバックありがとうございます!

セクション 1.  10

AIに質問する

expand

AIに質問する

ChatGPT

何でも質問するか、提案された質問の1つを試してチャットを始めてください

セクション 1.  10
some-alt