本記事はこんな方にオススメ
「HTMLでリンクを貼る方法が知りたい方」
「ブログを始めたが、リンクの貼り方が分からない方」
「今までリンクを貼るときは、ネットでコピペしたHTMLを使っていたけど、HTML自体を理解したい方」
「そもそもリンクとは何なのか知りたい方」
本記事の内容
今回はHTMLを学ぶ初心者の方向けに、リンクの貼り方を通して、HTMLのタグや要素等の基礎知識を、実際に使っていく流れをご紹介します。
HTMLは難易度の高いものとしてみられがちですが、一度慣れてしまえば割とすぐに感覚をつかむことができます。
自分のブログ等でまだリンクを貼ったことのない方や、
リンクを貼ってはいるものの、ネットでコピペしたHTMLを使っていて、HTML自体の理解まではしていなかった…という方はHTML学習の入門として是非お役立てください♩
[Web初心者でも簡単] HTMLでリンクを貼ろう（HTML実用編１）
リンクとは？
この様にクリックすると他のWebページに飛ぶ様なテキストをを見かけたことはないでしょうか？
これがリンクと呼ばれるもので、クリックするとリンクで繋げた別のWebページ等に移動する様になっています。
HTMLでリンクを設定してみよう
まずリンク設定のHTMLを見てみよう
<a herf=”http://jazziblog.com”>jazziの時間。</a>
この様にリンクを設定したい場合は、以下の様な形のHTMLを使用します。
ちなみにリンク先のURLとは、リンクを繋げたいWebページを開いたときに、パソコンの画面上の上部に表示されているものです。
URLとはサイトの住所を示したものと認識してください。
まとめると、リンクを貼るときはこの様に考えてみてください。
リンク設定に必要なHTMLタグを知ろう
今回のリンクのHTMLで使うタグは、aタグ（<a>）と呼ばれるものです。
基本的に（<a>）から始まるタグを見かけた際は、リンク関連のものだと推測しましょう。
今回のHTMLのまとめは以下の通りです。
HTML：<a herf=”http://jazziblog.com”>jazziの時間。</a>
開始タグ：<a herf=” “>
要素内容：jazziの時間。
終了タグ：</a>
属性：aタグ（<a>）を使用した、リンクの設定
属性名：herf
値：http://jazziblog.com
上のまとめの内容がイマイチ、ピンと来ない。または分からない…という方はこちらの記事をご参考ください。
初心者目線で、開始タグや属性等のHTMLの基礎知識について、まとめています。
リンク先のWebページをどう開くか指定したいとき
ここからはちょっとした応用編です！ただし加えればいいだけの簡単なものです。
リンクの貼り方は先ほどご紹介しましたが、実はそのリンク先をどの様に表示するかの方法の指定ができます。
例えば新しくウィンドウを開いたり、タブを開いたりしてリンク先を表示するというものです。
具体的にはtargetという属性をaタグ（<a>にプラスすることで、可能になります。
これが意外と簡単にできるので、順次ご紹介していきますね♩
target属性を書き足せば簡単にできる
リンク先を表示するウィンドウの指定は、targetという属性をaタグ：<a>に書き足すことで可能になります。
具体的には半角スペース＋target=”属性値”で可能です。
具体的に先ほどのHTMLとの違いを見せた方が分かりやすいと思うので、以下をご覧ください。
先ほどのHTML：
<a herf=”http://jazziblog.com”>jazziの時間。</a>
表示ウィンドウを指定したHTML：
<a herf=”http://jazziblog.com” target=”_blank”>jazziの時間。</a>
付け加わったのは、半角スペース＋target=”_blank”ということになります。
実はこの「半角スペース＋target=”属性値”」でリンク先を表示するウィンドウを指定ができます。
今回は属性値という””の中身を、_blankに指定したので、別ウィンドウが新しく表示され、そこにリンク先が表示される設定です。
属性値によって、このウィンドウの開き方が変わるので、それは次にまとめます！
target属性の属性値とウィンドウの開き方の一覧
属性値の一覧
1. _blank : 新しいウィンドウやタブを開いてリンク先を表示する
2. _self : リンク元と同じウィンドウやタブを開いてリンク先を表示する
3. _parent: 現在のウィンドウやタブに親があれば、その親のウィンドウやタブでリンク先を表示する
4. _top : 最上位のウィンドウやタブにリンク先を表示する
リンクの貼り方のまとめ
リンクを貼る時の公式は、こちらです。
またこれに、リンク先のウィンドウやタブ等の表示方法を指定したいときは、開始タグ（<a>）内に、半角スペース＋target=”属性値”を付け加えます。
公式はこの様になります。
コメント
[…] […]