• 基本的なリンクの作り方
• 絶対URLと相対URL
• ページ内リンク（アンカーリンク）
• 外部リンクの作成
• 新しいタブで開くリンク
• メールアドレスへのリンク
• 電話番号へのリンク
• ボタンとしてのリンク
• 画像を使ったリンク
• ファイルのダウンロードリンク

基本的なリンクの作り方

HTMLでは、<a>タグを使用してリンクを作成します。基本的な構文は次のようになります。

<a href="https://example.com">ここをクリック</a>

上記のコードは「ここをクリック」というテキストが表示され、それをクリックするとhttps://example.comへ遷移します。

絶対URLと相対URL

リンクには「絶対URL」と「相対URL」があります。

絶対URL

Webサイト全体のURLを含むものを「絶対URL」と言います。

<a href="https://example.com/page.html">絶対URLの例</a>

相対URL

現在のページを基準として記述するものを「相対URL」と言います。

<a href="page.html">相対URLの例</a>

ページ内リンク（アンカーリンク）

同じページ内の特定の場所にジャンプするリンクを作成できます。

<a href="#target-section">このセクションへジャンプ</a>

リンク先にはid属性を指定した要素を用意します。

<h2 id="target-section">ここがターゲットのセクション</h2>

外部リンクの作成

外部のWebサイトにリンクを張る場合、URLをhrefに指定します。

<a href="https://www.google.com">Googleへ移動</a>

新しいタブで開くリンク

リンクを新しいタブで開くには、target="_blank"を追加します。

<a href="https://example.com" target="_blank">新しいタブで開く</a>

メールアドレスへのリンク

クリックするとメールアプリが開くリンクを作成できます。

<a href="mailto:example@example.com">メールを送る</a>

電話番号へのリンク

スマートフォンなどでクリックすると電話をかけられるリンクを作成できます。

<a href="tel:+81123456789">電話をかける</a>

ボタンとしてのリンク

CSSを使わずに<button>タグでリンクを作ることも可能です。

<button onclick="location.href='https://example.com'">ボタンリンク</button>

画像を使ったリンク

画像をクリックすると別のページへ遷移させることもできます。

<a href="https://example.com">
    <img src="image.jpg" alt="画像リンク">
    </a>

ファイルのダウンロードリンク

ファイルをダウンロードさせるリンクを作るにはdownload属性を使用します。

<a href="sample.pdf" download>PDFをダウンロード</a>