スポンサーリンク

[Web初心者でも簡単] HTMLでリンクを貼ろう(HTML実用編1)

フリーランス
本記事はこんな方にオススメ

「HTMLでリンクを貼る方法が知りたい方」

「ブログを始めたが、リンクの貼り方が分からない方」

「今までリンクを貼るときは、ネットでコピペしたHTMLを使っていたけど、HTML自体を理解したい方」

「そもそもリンクとは何なのか知りたい方」

本記事の内容

今回はHTMLを学ぶ初心者の方向けに、リンクの貼り方を通して、HTMLのタグや要素等の基礎知識を、実際に使っていく流れをご紹介します。

HTMLは難易度の高いものとしてみられがちですが、一度慣れてしまえば割とすぐに感覚をつかむことができます。

自分のブログ等でまだリンクを貼ったことのない方や、

リンクを貼ってはいるものの、ネットでコピペしたHTMLを使っていて、HTML自体の理解まではしていなかった…という方はHTML学習の入門として是非お役立てください♩

[Web初心者でも簡単] HTMLでリンクを貼ろう(HTML実用編1)

スポンサーリンク

リンクとは?

リンクとは、正式にはハイパーリンクと呼ばれるもので、指定した範囲のテキストや画像を他のwebページなどへと繋ぐ役割を果たすものです。

この様にクリックすると他のWebページに飛ぶ様なテキストをを見かけたことはないでしょうか?

jazziの時間。

これがリンクと呼ばれるもので、クリックするとリンクで繋げた別のWebページ等に移動する様になっています。

HTMLでリンクを設定してみよう

まずリンク設定のHTMLを見てみよう

先ほどご紹介したリンクは、HTMLではこの様な表現となります。
<a herf=”http://jazziblog.com”>jazziの時間。</a>

この様にリンクを設定したい場合は、以下の様な形のHTMLを使用します。

<a herf=”リンク先のURL”>クリックする時のテキスト内容</a>

ちなみにリンク先のURLとは、リンクを繋げたいWebページを開いたときに、パソコンの画面上の上部に表示されているものです。

URLとはサイトの住所を示したものと認識してください。

まとめると、リンクを貼るときはこの様に考えてみてください。

<a herf=”リンクで繋げたいWebページの住所=URL”>クリックするときに表示したいテキスト</a>

リンク設定に必要な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の基礎知識について、まとめています。

[初心者目線で解説] HTMLを読む為にこれだけは知っておこう(HTML基礎編2)
本記事はこんな方にオススメ 「Wordpress等でブログやサイトを運営していて、HTMLについて学んでみたい方」 「HTMLを学んでみたいが、難しそうでなかなか手を伸ばせない方」 「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 herf=”リンクで繋げたいWebページの住所=URL”>クリックするときに表示したいテキスト</a>

またこれに、リンク先のウィンドウやタブ等の表示方法を指定したいときは、開始タグ(<a>)内に、半角スペース+target=”属性値”を付け加えます。

公式はこの様になります。

<a herf=”リンクで繋げたいWebページのURL target=”リンク先の表示方法を指定する属性値””>クリックするときに表示したいテキスト</a>

コメント

  1. […] […]

タイトルとURLをコピーしました