◆当サイトで人気のプログラミング教室のおすすめランキングはこちら！
プログラミングは独学では非効率で、時間を無駄にするリスクがあります。効率的なカリキュラムで学べるスクールを受講しましょう。
Web Camp←【マンツーマンサポート】1ヶ月短期集中でプログラミングを学ぶスクール
TechAcademy
Tech Camp
WebCampProプログラミング学習から転職成功まで導く、当社人気のWebCamp Proコース。
10月生は満員となっております。11月生募集に向け、お早めの申込みをオススメします。
・プログラミング未経験でもエンジニア転職を絶対成功させたい
・スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください！
みなさんはHTMLの学習をしていませんか？
今回の記事ではURLをリンクにすることができるリンクタグを追加する方法を解説します。
他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の部分に移動（スクロール）する）
・プログラミングは8割はerrorとの戦いです。そんな時に役立つよくある間違いをまとめてみました。
こちらのよくある間違いを紹介！【HTML初心者入門】を参考にしてみてください。
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サイトを作成する上で基本となる部分ですので、しっかり基本を抑えてくださいね！
１ヶ月でHTML・CSSができる！「WebCamp」とは？
WebCampは１ヶ月でプログラミング・Webデザインスキルを学ぶ通い放題のプログラミングスクールです。
参加する方の90%は未経験者です！
短期集中型のスクールなので、期間を決めて圧倒的に効率よくサイト制作スキルを身に着けたい方におすすめです！
わからないことを講師にすぐ質問できたり、通い放題で自分のスケジュールに合わせて来校することができるので、独学で学習するよりも早く確実にスキルが身につきます。
学習の疑問点やWebスキルのマスターの仕方がわかる無料説明会も開催しています。ぜひお気軽にお申込みください！
プログラミング学習から転職成功まで導く、当社人気のWebCamp Proコース。
10月受入枠は満員となっております。11月枠に向け、お早めの申込みをオススメします。
・プログラミング未経験でもエンジニア転職を絶対成功させたい
・スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください！
▼未経験から1ヶ月でWebデザイン・プログラミングを学びたい方はこちら！
▼ついに開講！オンラインでWebデザインを学びたい方はこちら！
