HTML リンクタグ 使い方やよく使う属性

HTML

HTML リンクタグ<a href=" ">の使い方やよく使う属性

今回はHTMLのaタグの使ってリンクを設定する方法について紹介していきます。

aタグを使うことで外部ページへのリンクを作れるだけでなく、同一ページ内のある箇所に移動する「ページ内リンク」や、クリックするとメールソフトが開くといった「メールリンク」等も作ることができます。

 

この記事を読むと分かること

  • aタグの基本的な使い方について
  • aタグを使って作成できるリンクの種類とそれぞれの書き方について
  • aタグのrel属性について
  • aタグのデザインを変更する方法について

 

 

 

aタグの基本的な使い方

aタグを使ってリンクを作りたい場合は以下のように記述します。

aタグの基本的な使い方を解説している図。

 

飛び先の指定にはhref属性を指定する

リンクの飛び先の指定にはhref属性を指定し、値には飛び先となるページのURLを指定します。

なお上の例のように、「https://〜」とURLを全て記述する書き方を絶対パスと言いますが、同一ドメイン内の他ページに移動する場合は、現在開かれているファイルの位置から目的のファイルまでの道筋を指定する相対パスを使ってもリンク先を指定する事ができます。

相対パスの指定方法を解説している図。

 

別タブで開く設定にしたい場合はtarget属性を指定する

href属性を使って作成したリンクはデフォルトではクリックした際に飛び先となるページが同一タブ上で表示されるようになっています。

 

これを別のタブ上で表示されるように変更してあげたい場合は、新たにaタグに対してtarget=”_blank”を指定してあげます。

これでリンクの飛び先となるページが別のタブで表示されるようになりました。

 

 

aタグで作成できるリンクの種類

aタグでは、ただ単に他のページへ飛ばすリンクだけでなく、他にも色々な種類のリンクを作ることができます。

■aタグで作成できるリンクの種類

  • ページ内リンク
  • 電話リンク
  • メールリンク
  • ダウンロードリンク

 

ページ内リンク:同一ページ内の特定箇所に飛ばせる

※実際に使われるよりも簡素なcssサンプルで掲載しています。

ページ内リンクのデモ。

同一ページ内の特定の箇所に飛ばす事ができるページ内リンクは以下の方法で、作成することができます。

■ページ内リンクの作り方

  • (STEP. 1) 飛び先となる要素にid属性を付与する
  • (STEP. 2) aタグのhref属性の値を「#id名」にする

ページ内リンクの仕組み

また別ページ内の特定箇所に飛ばすリンクを作ることも可能で、その場合はhref属性の値を「飛び先のページのURL#id名」としてあげればOKです。

(補足):同一ページ内のトップへ飛ばすリンクを作る方法

なお1点補足ですが、href属性の値を「#」とすることで同一ページ内のトップへ飛ばすリンクを作ることも可能です。

同一ページ内のトップへ飛ばすリンク

 

電話リンク:タップすると電話がかかる

リンクをクリックすると電話がかかるリンクを作成するには、「tel:発信先の電話番号」といった形で記述します。

電話リンクの作り方を解説している図。

「tel:」の後の電話番号はハイフンがあってもなくても問題ありません。

また、実際に電話リンクを使用する際は、メディアクエリとpinter-eventsプロパティを使用して「ウィンドウ幅が480px以上のはリンクが反応しないようにする」といった設定をしてあげると良いでしょう。

 

メールリンク:クリックするとメールソフトが開く

メールリンクのデモ。

リンクをクリックするとメールソフトが起動するメールリンクを作成するには、「href="mailto:メールアドレス"」といった形で記述します。

メールリンクの作り方を解説している図。

「mailto:送信先のメールアドレス」の後に「?項目名=任意の値」を記述してあげることで、あらかじめメールの内容などを記述しておくことも可能です。

メールリンクで予め設定しておける内容一覧。

(補足):メールリンクはスパムメールの被害に遭うリスクあり?

メールリンクを何も対策せずに掲載すると、スパムメールの被害に遭うリスクが高まります。

これは、HTMLファイル内にそのままメールアドレスが記載されていると悪意さるユーザーの自動収集プログラムによって簡単にメールアドレスが収集されてしまう為です。

その為、近年ではmailtoを使用してメールリンクを作る方法は少なくなってきており、使用しない方が無難です。

 

ダウンロードリンク:クリックするとファイルがダウンロードされる

ダウンロードリンクのデモ。

リンクをクリックするとファイルがダウンロードされるリンクを作成するには、href属性の値にファイルまでのパスを記述するのに加えて、download属性を追記する必要があります。

ダウンロードリンクの作り方を解説している図。

またdownload属性の値は任意で、これを指定する事でその名前でファイルをダウンロードさせることができます。

 

 

 

aタグのrel属性

aタグにはrel属性という属性が設定できます。

rel属性を指定しても見た目上何か変わるといったものではありませんが、検索エンジンに対して様々な指示を出すことが可能です。

ここではSEO対策やセキュリティ対策として重要な、知っておくと良いrel属性の値をいくつか紹介します。

■知っておいた方が良いaタグのrel属性

  • nofollow:リンク先を辿らせないようにする
  • noopener:リンク元の操作をできないようにする
  • noreferrer:参照元のリンク情報を渡さないようにする

 

nofollow:リンク先を辿らせないようにする

まず1つ目に紹介するrel属性の値はnofollowです。

こちらは指定する事で、検索エンジンに対して「リンク先のページは見に行かなくても良いよ」といった指示を伝える事ができます。

信頼性や関連性の低いページへのリンクや広告リンクを貼っている場合などに、検索エンジン対策でnofollowを指定するケースがあります。

(※)広告や有料プレースメントのリンク(一般的に「有料リンク」と呼ばれます)に対して過去はnofollowを使用するのが一般って気でしたが、近年ではsponsored と呼ばれるrel属性が登場し、有料リンクに対してはsponsoredを使用することが推奨されています。

有料リンクに対する Google の方針についての説明は以下の記事をご覧下さい。
(参考)Google に外部リンクの関係性を伝える

 

他にも「リンク先のページに被リンクによるSEO評価を与えたくない」といった場合などにもnofollowが使用されます。

■nofollowを使用するシチュエーション

  • 信頼性や関連性の低いページへのリンクを貼っている場合(SEO対策)
  • 有料のリンク(広告)を貼る際
  • リンク先のページにSEO評価を与えたくない場合

 

 

noopenerとrefferer: セキュリティ対策

2つ目に紹介するrel属性の値はnoopenerとnoreferrerです。

noopenerはリンク元の操作をできないようにする

noopennerは、新しいタブでページを開いた時に「リンク元の操作をできないようにする」といった指示をする事ができます。

ブラウザのバージョンが低い場合、target="_blank"を指定して新しいリンクを開いた場合、リンク先(開かれた新しいタブ)からwindow.openerというオブジェクトを用いてリンク元(元タブ)の操作ができてしまうというセキュリティの穴が存在します。

もし、リンク先に指定したサイトが悪意あるサイトであったり、ハッキングされているサイト(実質悪意あるサイトの振る舞いをするサイト)だった場合に、リンク先から自分の見ていたリンク元ページが操作されるリスクがあり、noopenerを設定しているとそれを防ぐことができます。
 

■noopenerを使用するシチュエーション

  • 別タブ設定(target=”_blank”)で信頼性が低いサイトへのリンクを貼っている場合(セキュリティ対策)

(※)なお、最近の主要ブラウザ(Google Chrome、Safari、Firefoxなど)では「target="_blank"」が指定されているaタグやareaタグに対して、規定値として「rel=”noopener”」が適用されるようになっています。
 

noferrerは参照元のリンク情報を渡さないようにする

また、noferrerに紹介するrel属性の値はnoreferrerです。

こちらは指定することで、「参照元のリンク情報を渡さないようにする」といった指示をする事ができます。

■noreferrerを使用するシチュエーション

  • 参照元のリンク情報を渡さないようにする場合

 

(あわせて読みたい関連記事)

noopenerとnoreferrerについて詳しく知りたい方は、以下のブログ記事にて解説しておりますので、気になる方はあわせてご覧ください

rel="noopener noreferrer"の意味とアフィリエイト広告への影響

 

 

(補足):rel属性には複数の値を指定することも可能

rel属性を複数設定したい場合は値を半角スペース区切りで記述することで複数指定をする事ができます。

 

aタグのデザインを変更する

最後にaタグのデザインを変更する方法をいくつか紹介します。

aタグ自体の使い方というわけではなく、CSSによる装飾の話ですが、よく使うので補足します。

 

リンクの文字色を変更する

aタグの文字色を変更するには、aタグに対してcolorプロパティを指定します。

HTMLを学び始めたばかりの頃であれば、aタグが他のタグで囲われている場合に、aタグの親要素に対してcolorプロパティを指定しがちですが、これだとリンクの文字色は変わらないので注意が必要です。

aタグの親要素に対してcolorプロパティを指定しても文字色は変更されない。

 

リンクの下線を消す

リンクにデフォルトで付いているアンダーラインを消している例。

リンクにデフォルトで付いているアンダーラインを非表示にしたい場合は、aタグに対して「text-decoration: none;」を指定してあげればOKです。

 

リンクホバー時のみスタイルを変える

ホバー時のみアンダーラインを消している例。

ホバー時のみにスタイルを適用させたい場合は擬似クラス「:hover」を使用して、「a:hover{〜}」と記述してから「〜」の中に指定したいCSSを記述します。

 

 

まとめ

まとめです。今回はHTMLのaタグの使ってリンクを設定する方法について紹介しました。

aタグの基本的な使い方を解説している図。

aタグは非常に使用頻度の高いHTMLタグの1つで、Webサイトを1から作る場合だけでなく、WordPressでブログを書いている際にもよく使うのでしっておくと便利です。

なお、そのほかのHTMLの使い方を「【HTMLの基本を徹底解説!】初心者向けHTMLの基本とよく使うタグ一覧」に記載していますので、HTMLの勉強をしたい方は合わせてご参考ください。

今回は以上になります。最後までご覧頂き、ありがとうございました。

 

合わせて読みたい記事

これからサーバー・ドメインを契約してホームページを作りたいという方は「【総まとめ】個人ホームページの作り方・Webサイト自作方法」をご参考ください。

おすすめのレンタルサーバーについては「【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressホームページの作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

WordPress(ワードプレス)の使い方総まとめ

WordPress(ワードプレス)の使い方  総まとめ版

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-HTML