ホームページ作成講座別窓で開く

別窓で開く

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

<a href="" target="">～</a>

リンク先を別ウィンドウ（別タブ）で開きます。

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

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

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

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

target属性を使ったサンプル

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

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

body内には４つのリンクがあります。それらにtarget属性を付けてみましょう。 最初の１つだけ「_blank」を、残り３つは「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」だからです。

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