2020年1月22日こんにちは、Kosei(https://twitter.com/pompom_stk)です。今回はa要素を使ったリンクの貼り方について解説していきます。Webサイトを作成するにあたって「リンクを張り付けること」は必要不可欠です。自分のサイトをわかりやすくするために、他のサイトのリンクを張り付けることも多々あります。HTML初心者にとってa要素は少し難しく感じるかもしれませんが、とても大切な要素なのでゆっくりと理解していきましょう。この記事の要点まとめリンクを張り付けるa要素a要素は、テキストや画像に対してリンクを張ることのできる要素。ハイパーリンクリンクはハイパーリンクの略称。ハイパーリンクとは、「ファイルの住所」を表したもの。href属性a要素を使いテキストや画像に対してリンクを張る場合、href属性が必要となる。href="属性値">テキストまたは画像</a>target属性target属性にはいくつかの種類がある。target="self"属性名selfは、今開いているウィンドウを使ってリンクを表示するもの。target="blank"属性値blankは、クリックするたび新規ウィンドウを開くもの。絶対パスと相対パスWeb上でリンクを張る場合、絶対パスと相対パスがある。絶対パスURLのようなhttp:から始まる指定方法。相対パス今いる階層を基準にして別のページへリンクさせる。a要素とhref属性を理解しようaタグ内にhref属性を入れて、herf属性に属性値を指定すればリンクを張ることができる。リンクを張り付けるa要素ハリボーリンクって緑の帽子かぶった運動神経抜群なイケメンだよね。なんだかすっごく勘違いしているよ?ヒナa要素とは、テキストや画像に対してリンクを張ることのできる要素で、「アンカー」と読みます。a要素はHTML初心者にとって少し難しく感じるかもしれません。p要素などは『<p>テキスト</p>』のように「テキストをタグで囲むだけで、囲まれたテキストが表示」されます。a要素はp要素のように、タグで囲むだけでリンクを表示することができません。ハイパーリンク「これからHTMLを勉強しよう」と思っている人は少なからずWebに関して興味のある人だと思うので、リンクを知らない人はいないと思いますが、一応説明しておきます。何気なく「そこのリンク押したらヤフーに飛ぶよ」みたいに言っているけど、実際よくわかっていない人もいるかもしれません。ここで一度、リンクについてきちんと理解しておきましょう。リンク(link)とは日本語にすると、「鎖」「関連づけられた」などという意味です。Web上でのリンクとは実は略称で、正式には「ハイパーリンク」と言います。ハイパーリンクは「ファイルの住所」を表したものです。ハイパーリンクを関連づけられたテキストをクリックすることで、記入されたファイルへ移動するという仕組みです。見るのが下線の入った青文字で表示されたものが、別のページへリンクします。これは例なのでリンク指定はされていませんが、こんなやつです。href属性a要素を使いテキストや画像に対してリンクを張る場合、「href属性」というものが必要となります。Reference(ハイパーテキストリファレンス)」の略称で、「エイチレフ」と読みます。href〜>となり、合わせて「アンカーエイチレフ」と読みます。この「〜」の部分ですが、ここには属性値を記入します。href="属性値">となります。hrefの後に=を書き、属性値をダブルクォーテーション(”)で囲みリンクを表示させます。属性値と聞くと難しく感じるかもしれませんが、href属性ではリンク先を記入します。href属性の後に属性値(リンク先)を書くことで、そこへ移動することができます。以降、この記事では属性名に対して絶対パス(後ほど説明します)と呼ばれる「URL」を当てはめて考えます。これは覚えなくてもいいのですが、プログラミングにおいて「=」とは、数学で習ったものとは意味が異なります。href)と左辺(ここで言う"URL")が同じ」という意味ではなく、「右辺に左辺を代入する」というものです。hrefに代入してURLを表示される」と覚えておく方が、後々楽かもしれません。href="URL">テキストまたは画像</a>と書きます。終了タグ(</a>)を忘れないようにしましょう。CodePen.上の例の場合、URLの部分にはこのSplaTechのトップページ、テキストの部分はサイト名を記入しています。サイト名がテキストとして表示され、それをクリックするとこのブログのトップページに移動するようになっています。「a」という要素、「href」という属性、この二つを組み合わせる必要があるため、p要素などと比べて難しく感じるかもしれません。慣れるまで何度か使ってみて、ゆっくりと理解していきましょう。「要素」と「属性」の違いについてはまた別の記事にします。画像にリンクを張るにはまた別の属性が必要となるので、これもまた別の記事にします。target属性ハリボーねぇもういいって、属性は。「また属性かよ、、」そう思ったあなた、もう少し頑張りましょう!target属性もhrefと同じように属性値を記入します。target属性の属性値にはいくつか種類がありますが、この記事では2つ紹介します。target="self"targetの属性値selfは、「今開いているウィンドウを使ってリンク先を表示するもの」です。target属性を指定していない場合と同じ効果なので、基本的には使いません。target="self">テキスト</a>です。hrefと同じように、target属性の後に=を付け、属性名であるselfをダブルクォーテーション(”)で囲みます。こちらをクリックしてみてください。新しいウィンドウを開かないのでうっとうしくないというメリットがありますが、他のサイトなどをリンクさせた場合、もとのページに戻ってきてくれない可能性があるというデメリットもあります。target="blank"targetのblankは、「新規ウィンドウを開いてリンク先を表示するもの」です。以下にblank属性の入ったリンクを用意します。こちらをクリックしてください。新しくウィンドウが開いたと思います。これが「blank」です。selfと違い、新しいウィンドウが開かれるためうっとうしいというデメリットがありますが、他のサイトへリンクさせても、selfよりはもとのページに戻ってきてくれる可能性が高いと言うメリットもあります。絶対パスと相対パスここからは、ここまでを理解できてまだ余裕のある方だけ読んでください。先ほど少しだけ出てきた「絶対パス」についてです。Web上でリンクを張る場合、「相対パス」と「絶対パス」というものがあります。これらに関してきちんと説明しようとすると長く難しくなるので、ここでは簡単に説明していきます。今は「こんなものもあるんだ」程度に捉えてもらえれば大丈夫です。絶対パス絶対パスは、「自サイト外のリンクを張る場合」に使用します。この記事でいくつかリンクを張り付けていますが、これらは全て絶対パスを使っています。絶対パスとは、URLのような「http:(またはhttps:)」から始まる指定方法のことを指します。基本的に自サイト外へのリンクに対して使いますが、この記事でも使ったように、自サイトに対して使うこともできます。href="https://pompom-stk.com/category/programming/html/“>HTMLに移動</a>と書きます。これを書いたものが、「HTMLに移動」です。クリックするとカテゴリーに移動します。このように、http:から始まるURLをリンクさせる指定方法が絶対パスです。相対パス相対パスは、絶対パスと比較すると書き方がやや複雑です。ここでは深く説明しません。相対パスは、「今いる階層(ページ)を基準にして別のページへリンクさせる」指定方法です。自サイトに対して使うもので、自サイト外に使用することはできません。説明は割愛しますが、自サイトに対して相対パスを使用するメリットもいくつかあります。href="../category/programming/html/">HTMLに移動</a>と書きます。これを書いたものが「HTMLに移動」です。これをクリックすると、先ほど絶対パスで指定したページと同じHTMLのカテゴリーに移動します。これ以外にも「ルート相対パス」というものも存在しますが、これもまた別の記事で説明します。今はあまり深く考えなくて大丈夫です。あれ?大丈夫?ちょっと難しかったかな?ヒナ今回は「a要素」「href属性」「target属性」「絶対パスと相対パス」これだけのことを解説していきました。HTMLを始めたばかりの人がこれを全て理解するのは少し難しいと思います。「aタグ内にhref属性を入れて、href属性に属性値(URLなど)を指定すればリンクを張ることができる」これだけは理解しておきましょう。余裕があればtarget属性についても理解しておくと、とても便利です。何度もしつこいですが、今は絶対パスと相対パスは無視して大丈夫です。Webサイトでリンクを張ることは、サイトをわかりやすくするためや商品を購入してもらうためなどに、よく使われます。大切なものなので、ゆっくりと理解していきましょう。pompom-stk関連記事p要素、div要素、span要素の違いを初心者向けに解説【HTML】p要素、div要素、span要素の違いについて初心者向けに解説した記事です。...文字のサイズと太さの指定方法【CSS】CSSで文字のサイズ、太さを変更する方法について初心者向けに解説していきます。け】この記事ではCSSの基本書式について、初心者向けにわかりやすく解説しています。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。