HTML/CSS

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

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

ITエンジニア特化の転職サイト!
自社内開発求人に強い【クラウドリンク】

先輩くん
先輩くん
年収、休日数、労働環境等クラウドリンクが審査し、これらを通過した優良求人情報のみ紹介しているよ!
後輩ちゃん
後輩ちゃん
100%自社内開発の求人だから、SESのように職場環境が変わらないのがいいね!
簡単30秒で無料登録!

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

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アクセスランキング にほんブログ村