HTML/CSS

【HTML】aタグで設定したURLを別ページで開く方法

本記事では、aタグで設定したURLを別ページで開く方法について解説しています。自社内のページから外部のページに遷移させる時などに、このテクニックはよく使用されるので使い方を覚えておきましょう!

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

動画情報
作成者たにぐち まこと
学習時間9時間
受講者数43,706人
レビュー (9,232件)
動画の詳細はこちら

URLを別ページで開く

aタグで設定したURLは、デフォルト設定では別ページで開かず遷移元と同じページで開かれます。これを別ページで開くようにするには、aタグの属性にtarget=”_blank”を設定する必要があります。

<a href="URL" target="_blank">サンプル</a>

サンプルコード

それでは実際にaタグの属性値にtarget=”_blank”を設定して、正しく別ページが開かれ遷移するか確認してみましょう。今回は違いが分かるようにtarget=”_blank”を設定していないaタグと、target=”_blank”を設定しているaタグの2つを用意しています。

<ul>
  <li><a href="https://www.google.com/">Googleへ移動(別ページで開かれない)</a></li>
  <li><a href="https://www.google.com/" target="_blank">Googleへ移動(別ページで開かれる)</a></li>
</ul>

1つ目のリンク(未設定)は、別ページで開かず遷移元と同じページでGoogleページに遷移していることが確認出来ます。2つ目のリンク(設定済)は、別ページで開かれGoogleページに遷移していることが確認出来ます。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村