【リンクを別タブで開く！】aタグの書き方を紹介！

ページを見ていてリンクをクリックした時に現在のページが更新されてしまって戻るのが 面倒だと感じたことはありませんか?またそのままサイトを離れてしまった経験はないでしょうか。

そうならないためにリンクを別タブで開く方法を紹介します！ユーザー側の視点に立って使いやすい サイトにして行きましょう！

目次

1. aタグの書き方/コード説明

早速リンクを貼る際のaタグの書き方について説明して行きます。そもそもaタグの使い方ですが、 通常は下記のように記載します。

See the Pen サイト by sekirara19 (@sekirara19) on CodePen.

この記載方法をするとリンクは貼れるのですが、リンクをクリックすると 現在のページがリンク先のページに更新されてしまいます。

そうすると、ユーザーがそのまま戻ってこない可能性も ありますし、毎回戻るを選択させるのも操作性が悪いですよね！

そこでaタグを下記のように記載すると リンクを別タブで開く事が出来ます。

See the Pen サイト別タブ by sekirara19 (@sekirara19) on CodePen.

簡単に説明して行きます。target="_blank"を追記する事で、リンクが別タブで開くようになります。

rel="noopener noreferrer"はセキュリティー対策のための魔法の呪文だと思っていただければ良いと思います。

簡単に説明すると”noopener”を記載する事でJavaScriptのwindow.openerというオブジェクトでサイトが不正操作されることを防ぎます。 また、”noreferrer”を記載する事で参照先に参照元のデータを渡さずにやりとりができます。非通知設定のようなものだと考えれば良いです。

実際に下記に2通りのリンクを貼っておくので実際にクリックして試してみてください。

本サイトTOPページ

本サイトTOPページ(別タブで開きます)

補足：リンクの文字色の変更方法

ちなみに、リンクの文字色はリンクだと分かりやすいようにデフォルトでは青い文字となりますが、 文字色を変更する事もできます。

See the Pen リンク文字色 by sekirara19 (@sekirara19) on CodePen.

aタグの中にstyle="text-decoration:none; color:「好きな文字色やコード」"を記載する事で実施可能です！

ちょっと雰囲気を変えたい時やリンクだとあえて伝える必要がない時等、必要に応じてカスタマイズしてみましょう！

2. まとめ

今回は短いですが以上となります。ここまででaタグの記載方法が理解できたでしょうか。私は静的HTMLで一からサイトを 作成していますが、初めのうちはHTMLの記載方法やタグが全く理解できずとても苦労しました。

それでも調べながらやっていけたのは良い参考書に巡り会えたからだと思っています。 WEBクリエイターボックス と言うサイトを運営しているManaさんが書いた「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」と言う書籍です！

本当に知識0の状態からこの書籍だけを読んでここまでサイトを作り上げる事が出来たので、 サイト製作を検討している皆さんは是非参考にしてみてください！