【HTML】リンクを簡単に作成する方法

【HTML】リンクを簡単に作成する方法

業界最安値のプログラミングスクール｜SkillHacks(スキルハックス)(PR)


データ入力代行の業者探しは【簡単・無料・厳選優良業者】のEMEAO!(PR)

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>

「【HTML】リンクを簡単に作成する方法」への8件のフィードバック

  1. We absolutely love your blog and find many of your post’s to be exactly
    I’m looking for. Do you offer guest writers to write content available
    for you? I wouldn’t mind producing a post or elaborating on a lot of the subjects
    you write related to here. Again, awesome web log!

  2. Definitely imagine that which you stated. Your favourite reason appeared to be at the net the easiest thing to bear in mind of.
    I say to you, I certainly get irked whilst other folks consider worries that they just do not recognise about.
    You managed to hit the nail upon the top and defined out the whole thing without having side effect ,
    people can take a signal. Will probably be back to get more.
    Thanks

  4. I’ll immediately snatch your rss as I can not to find your e-mail subscription hyperlink or
    newsletter service. Do you’ve any? Please let me recognise so that I may subscribe.

    Thanks.

  5. Hello would you mind letting me know which web host you’re working with?
    I’ve loaded your blog in 3 completely different internet
    browsers and I must say this blog loads a lot faster then most.
    Can you suggest a good web hosting provider at a reasonable price?
    Many thanks, I appreciate it!

  6. Hello! I’ve been following your web site for a while now and
    finally got the courage to go ahead and give you a shout out from Austin Texas!
    Just wanted to say keep up the great job!

  7. I’m excited to find this site. I wanted to thank you for ones time due
    to this wonderful read!! I definitely savored every little bit of it and i
    also have you book-marked to see new stuff in your site.

コメントは受け付けていません。

コメントは受け付けていません。