リンクの貼り方

はじめに

リンクを貼って見たいのですが、どうすればいいですか?
リンクを貼るためには、aタグといわれるものを使用するとリンクを設定することができますよ
aタグを使えば他のページにとばすことができるようになるんですね。
他には、aタグを使って、電話番号をクリックすると電話がかかるようにもできるようになりますよ。
あ それよく見ますね。電話番号押すとそのお店に電話がかかるようになってすごい便利です。
そうですね。他にもメールアドレスを押すとメールが開いたりするときにも使えますよ
なるほど・・ただ他のページに飛ばすだけじゃないんですね。
そうですね。では簡単に説明していきましょうか。

リンクを貼ってみよう

リンクを設定するためには、aタグといわれるタグを指定します。a(anchor)の略称で、指定した場所と場所とつなぎ止める役割を持っています。URLを指定する際には、href属性を使用します。

基本的な使い方は次のような形になります。(※aタグの部分だけ抜粋)

<a href="指定先のURL">リンクの文字 </a>

また、別タブで開いてページ遷移させたいときは次のようにtarget=”_blank”を指定しましょう。target属性はリンク先を開くときにどのように開くかを指定するときに使用します。

<a href="指定先のURL" target="_blank">リンクの文字 </a>

電話番号、メールなどを指定したい場合は次のように設定します。

<a href="tel:電話番号(ハイフンを抜いた状態で数字をそのまま書いてください)" >リンクの文字 </a>
<a href="mailto:メールアドレス(送信元)" >リンクの文字 </a>

サンプルコード

<html>
 <!DOCTYPE head>
  <meta charset="UTF-8">
  <title>htmlのリンクを貼ります。</title>
 </head>
 <body>
  <a href="https://weconet.co.jp">weconetのトップへ</a>
  <a href="https://weconet.co.jp" target="_blank">weconetのトップへ(別タブで開きます)</a>
  <a href="tel:012345678" >012-234-5678 </a>
  <a href="mailto:info@weconet.co.jp" >info@weconet.co.jp</a>
 </body>
</html>

サンプルコードの動作例

weconetのトップへ
weconetのトップへ(別枠で開きます)
012-345-6789(架空の電話番号です)
info@weconet.co.jp

関連記事

  1. 画像をhoverして時にズームさせるcssを書こう

  2. アコーディオンを作ってみよう

  3. cssを読み込む

  4. ラジオボタン の文字を押したら選択できるようにしよう

  5. ちょっと複雑なテーブルをHTMLで作ろう

  6. HTMLでセレクトボックスを作ろう

2020年9月
 123456
78910111213
14151617181920
21222324252627
282930