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

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

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

 

 

 

 

aタグの基本的な使い方

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

 

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

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

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

 

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

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

 

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

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

 

 

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

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

 

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

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

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

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

 

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

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

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

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

 

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

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

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

 

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

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

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

 

 

 

aタグのrel属性

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

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

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

 

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

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

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

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

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

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

 

 

 

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

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

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

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

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

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

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

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

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

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

 

 

 

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

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

 

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

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

 

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

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

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

 

リンクの下線を消す

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

 

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

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

 

 

まとめ

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

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

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

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

 

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

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

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