別窓で開く

更新日:2018.06.30
  1. HOME
  2. ホームページ作成講座
  3. 別窓で開く

前のページではリンクを張って別ページに移動する方法を見ました。 ここでは、リンク先を別窓または別タブで開く方法を見ていきます。

別窓で開く

リンク先を別窓(現在の多くのブラウザではタブ)で開く方法は、以下の属性をaタグに記述します。

<a href="" target="">~</a>
リンク先を別ウィンドウ(別タブ)で開きます。

ご覧のように、target属性を指定します。こうすることで、 今のページを残したまま別タブでリンク先を開きます。

属性値に「_blank」を指定すると、常に新しいタブで開きます。 属性値に任意の名前を付けると、同じ属性値が付いたリンクは同じタブで開くことになります。

多くのリンクを別窓を開くようにすると、タブがどんどん増えていくことになります。 必要と思える所でだけ使用するよう心掛けておきましょう。

各属性との間は半角スペースで区切ります。 順番に決まりはないので、先にtarget属性を記述して、その後href属性を記述しても問題ありません。

target属性を使ったサンプル

では、別窓でリンク先を開くサンプルを見てみることにしましょう。

前のページで作ったindex.htmlを開き、「index2.html」というファイル名を付けて保存して下さい。

body内には4つのリンクがあります。それらにtarget属性を付けてみましょう。 最初の1つだけ「_blank」を、残り3つは「page」という同じ値を指定してみます。

<a href="text/lesson1.html" target="_blank">ページタイトル</a><br>
<a href="text/lesson2.html" target="page">見出しタグ</a><br>
<a href="text/lesson3.html" target="page">ページ構成</a><br>
<a href="text/lesson4.html" target="page">段落・改行</a><br>

ブラウザで確認すると以下のようになります。 リンクをクリックして、どこに表示されるか確認して下さい。

最初のリンクをクリックする度に、新しいウィンドウ(またはタブ)が開いていくと思います。 targetの属性値が「_blank」だからです。

残りの3つは、同じウィンドウ(またはタブ)で開きます。同じ属性値が指定されているからです。

NINJABUTTON