Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
学ぶ リンクの使用 | HTMLタグと属性
究極のHTML

bookリンクの使用

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

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

index.html

index.html

copy

リンク属性

target

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

index.html

index.html

copy

download

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

index.html

index.html

copy

href

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

index.html

index.html

copy

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

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

Note
ノート

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

コードを表示するには、コードサンドボックスの左側にあるスライダーをドラッグしてください。エディタ内の既存コードが表示されます。

question mark

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

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

すべて明確でしたか?

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

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

セクション 2.  9

AIに質問する

expand

AIに質問する

ChatGPT

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

セクション 2.  9
some-alt