みなさんはHTMLの学習をしていませんか？
今回の記事ではURLをリンクにすることができるリンクタグを追加する方法を解説します。
＼参加者満足度99％！／
無料カウンセリングに申し込む
※最短1分で申し込み可能
他URLへのリンクを生成できるタグ
HTML<a>要素 (アンカー要素) は、別のウェブページ、ファイル、同一ページ内の場所、電子メールアドレス、または他の URL へのハイパーリンクを作成します。
具体的には、<a>タグと</a>タグの間に、[対象となる文章]を記述すると、その文章をクリックしたときに、[URL]に設定されたWEBページにジャンプつまりページ移動することができます。
タグ表記
<a href=”[URL]” target=”_blank”>[対象となる文章]</a>
タグの省略
出来ません。開始と終了タグの両方が必要になります。
指定できる属性
1. href(リンクを設定する)
ハイパーリンクのリンク対象を URL または URL フラグメントで示します。
1-1. URLの場合
URL はウェブ (HTTP) ベースのドキュメントに制限されず、ブラウザがサポートする任意のプロトコルを使用できます。具体的に言うと、[file:](特定のファイル） や [ftp:]（FTP）、[mailto:]（メールアドレス） などがほとんどのブラウザで動作します。
※ただし、対応したソフトウェア（メールアドレスならメールソフト）が実行する環境に無いと意味はありません。
ジャンプ先のページやファイル名を、絶対パスか相対パスで指定します。
<a href="http://www.test.com/"> <a href="mailto:hogehoge@test.com">
1-2. URLフラグメント
URL フラグメントは、ハッシュ記号 (#) で始まり、現在のドキュメント内のリンク先位置 (HTML 要素の ID) を指定します。
<a href="#detail">説明を読む</a>
（同一HTMLドキュメント内のID:detailの部分に移動（スクロール）する）
2. target(特定のページにジャンプさせる)
タグにname属性を指定してフレーム名を付けておいたり、name属性を指定して開かれたページなど、既存ページやフレームにページを表示させることができます。
<a href="http://www.test.com/" target="right">
(rightという名前のフレームに表示）
また、特定のキーワードを指定することでも動作します。
2-1. _blank
新しいウインドウを立ち上げて、リンク先のページを表示する。
<a href="http://www.test.com/" target="_blank" rel="noopener">
2-2．_self
リンクを記述しているページ・フレーム、要するに自身のページににリンク先のページを表示させる。
<base href="http://www.test.com/" target="_self">
2-3. _parent
framesetを定義したウインドウにリンク先のページを表示する。
<a href="http://www.test.com/" target="_parent">
2-4. _top
フレーム表示を解除して、ウインドウ全体にリンク先のページを表示させる。
<a href="http://www.test.com/" target="_top">
サンプル
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE>サンプルページ</TITLE> </HEAD> <BODY> 私のサイトは、<a href="http://www.test.com" target="_blank">test.com</a>です。 </BODY> </HTML>
まとめ
初心者の方向けにリンクを追加する方法を紹介していきましたが、いかがでしたか？
リンクの追加はWebサイトを作成する上で基本となる部分ですので、しっかり基本を抑えてくださいね！
自宅にいながら、プロのキャリアアドバイザーに無料オンライン相談！
DMM WEBCAMPは転職成功率は98％※1の全コースオンライン対応の転職保証型のプログラミングスクールです。短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます！
外出自粛期間中でも、自宅にいながらオンライン学習でスキルを高めることができます。
キャリアに迷ったら、まずはビデオ通話で無料キャリア相談を受けてみませんか？
自宅で過ごす時間が増えた今こそキャリアアップを目指しましょう！この機会を活用し、ぜひDMM WEBCAMPの無料カウンセリングをご利用ください。
＼オンラインで実施中／
【無料】キャリア相談の日程を見る
※ 1 2020年４月時点
