a要素とhref属性
クリックしてページジャンプ(移動)する実装を、「リンク」といます。リンクには、a(hypertest anchor)を利用します。テキストや画像に対してリンクを設定することができます。通常、リンクが設定されると文字列の下に「下線」が引かれ(スタイルシートを使うと、下線を無しにすることができます。)カーソルを乗せると、「指」の形に変わりクリックできることを意味しています。リンク先には、様々なものがあります。
- 別のウェブサイトへ移動する
- 同じウェブサイトの別ページに移動する
- 同じページ内を移動する
- その他・様々なリンク先
別のウェブサイトへ移動する
ヤフージャパン(https://yahoo.co.jp)へハイパーリンクしてみましょう。
<p><a href="https://yahoo.co.jp">Yahoo Japanへリンク</a></p>新しいウィンドウを開いて表示させる
リンクターゲット(target)を指定
ハイパーリンクには、リンク先を、「同じタブで開く」・「新しいタブを開く」・「新しいウィンドゥで開く」など、リンクを開くパターン(ターゲット)を指定することができます。
target=”_blank” (新しいウィンドウを開いて表示)
【新しいウィンドウタブでリンクする】 target=”_blank”を指定すると、新しいタブでリンク先が開きます。そのため、すべてのリンク先をtarget=”_blank”にすると、次々と新しいタブが開いてしまいます。また、target=” _blank”は、セキュリティ面で懸念されるとの指摘もありますが、現在の主要ブラウザは。target=”_blank”には、自動でnoopenerが追記される仕様になっているようです。引用先/MDN Developer
<p><a href="https://yahoo.co.jp" target="_blank" rel="noopener noreferrer">新しいウィンドウを開いて表示</a></p>同サイトの別ページへ移動する
同じウェブサイト内に、リンクする場合はファイルのパス、ファイル名を指定します。
▶︎ サンプルを見る
001.練習してみましょう。
同サイトの同ページ内を移動する
比較的「縦型」のLPサイト(ランディング型)によく見かけるリンク移動です。エレベータのようにページ内を上下に移動させます。
▶︎くだものやさんサンプル
設定方法
縦に長いコンテンツを作成します。着地させたい場所にIDを振ります。(例・h1 id=”tomato”) ID名は、半角英数でないといけません。#を先頭につけたID名をリンク先に設定します。(例<a href=”#tomato”>)
様々なリンク先
メールアドレスに設定
リンク先を、メールアドレスに設定することが出来ます。
<p><a href="mailto:hoge@gmail.com">お問い合わせは、こちらです。</a></p>電話番号に設定
リンク先を、電話番号に設定することが出来ます。携帯電話で、タップすると発信されます。
<p>
<a href="tel:123456789">こちらまで、至急お電話ください。</a>
</p>002.練習してみましょう。
