＜a＞タグはハイパーリンクを指定する際に使用するタグです。
ホームページでテキストや画像ををクリックすると別のページが表示されたり、ページの別場所へ移動したりするのがハイパーリンク（リンク）です。
今回は別のページへリンクを貼る方法をご紹介致します。
テキストにリンクを貼る
それでは早速テキストにリンクを貼って見ましょう。
飛び先は一先ずyahooさんにして見ましょう。
HTML
<a href="https://www.yahoo.co.jp/">このテキストにリンクを貼ります</a>結果表示
このテキストにリンクを貼ります※クリックするとページが遷移します。遷移後はブラウザの戻るボタンで戻ってきてください。
＜a＞～＜/a＞で挟んだ箇所がリンク部分になります。
リンクの飛び先は「href=“この中のURL”」にリンクが飛ぶ様になります
テキストの一部分にリンクを貼りたい
先程はテキスト全体にリンクを貼りました。
では、テキスト内の一部分にリンクを貼りたい場合はどうしたら良いでしょうか。
HTML
このテキスト内の<a href="https://www.yahoo.co.jp/">この部分にだけ</a>リンクを貼ります。
結果表示
このテキスト内のこの部分にだけリンクを貼ります。※クリックするとページが遷移します。遷移後はブラウザの戻るボタンで戻ってきてください。
この様にリンクを設置したい場所にだけ＜a＞～＜/a＞で囲む事によって、ピンポイントでリンクを貼る事が出来ます。
実用性を考えたリンクのHTMLソース
実際に文章にリンクをつける時は、ただ＜a＞をそのまま設置するよりも＜p＞や＜div＞を使用した中に＜a＞タグを使う事が殆どのです。
HTML
<!-- <p>を使っている場合 -->
<p><a href="https://www.yahoo.co.jp/">このテキストにリンクを貼ります</a></p>
<!-- <div>を使っている場合 -->
<div><a href="https://www.yahoo.co.jp/">このテキストにリンクを貼ります</a></div>結果表示
※クリックするとページが遷移します。遷移後はブラウザの戻るボタンで戻ってきてください。
この様に＜p＞や＜div＞がある場合、要素の入れ子に＜a＞を使います。
クリック実行後の表示方法の設定
リンクをクリックした後はページが遷移する訳ですが、target指定をする事で表示方法を変更する事ができます。
新しいタブにページを遷移する「_blank」
HTML
<a href="https://www.yahoo.co.jp/" target="_blank" rel="noopener">_blankでリンクを貼ります。</a>結果表示
_blankでリンクを貼ります。※クリックすると新規タブでページが表示されます。
※「_blank」を設定する場合は「rel=”noopener”」を設置しましょう。
※「rel=”noopener”」はセキュリティの為に必要になります。
自分自身のウィンドウ（フレーム）に表示する「_self」
HTML
<a href="https://www.yahoo.co.jp/" target="_self">_selfでリンクを貼ります。</a>
結果表示
_selfでリンクを貼ります。※クリックするとページが遷移します。遷移後はブラウザの戻るボタンで戻ってきてください。
ウィンドウがフレームに分割されていれば分割を解除して表示する「_top」
HTML
<a href="https://www.yahoo.co.jp/" target="_top">_topでリンクを貼ります。</a>結果表示
_topでリンクを貼ります。※クリックするとページが遷移します。遷移後はブラウザの戻るボタンで戻ってきてください。
ウィンドウがフレームに分割されていれば1段だけ分割を解除してその親フレームに表示する「_parent」
HTML
<a href="https://www.yahoo.co.jp/" target="_parent">_parentでリンクを貼ります。</a>結果表示
_parentでリンクを貼ります。※クリックするとページが遷移します。遷移後はブラウザの戻るボタンで戻ってきてください。
以上4種類がありますが、「_blank」以外はただページが遷移している様に見えます。
実はフレームを分割したページじゃない限り普通に遷移するだけになります。
フレーム分割表示をしない限りtargetを指定する場合は「_blank」だけになります。
まとめ
webサイトにリンクはつきものです。
サイトを制作する際には必ず出てくるコードになりますので、覚えちゃいましょう(＾＾)
HTMLコーディングのオススメ本
1冊ですべて身につくHTML＆CSSとWebデザイン入門講座
知識ゼロから体系的に学べる!HTMLとCSSの基本。最新の技術に対応!レスポンシブ、Flexbox、CSSグリッド。手を動かしながら学べる!プロの現場で役立つテクニック。コードの知識からデザインのことまで1冊ですべて学べる!
できるホームページ HTML＆CSS入門 Windows 10/8.1/7対応
タグの理解が深まる!入力例と結果、機能がひと目でわかるからHTMLコードがすぐ身に付く。CD‐ROMに収録の画像編集ソフトでホームページを彩るロゴも作成できる!
現場のプロから学ぶ SEO技術バイブル(特典PDF付き)
セマンティックWebに対応するための構造化マークアップ。MFI時代におけるモバイル対応からAMP対応まで。検索意図・共起語を意識したコンテンツSEO。Googleの特許から紐解く被リンク・サイテーション獲得戦略。レンダリング・ネットワークの仕組みから理解する高速化技術。施策だけで終わらせないモニタリングレポート。
