問題

7
HTML

別タブで開くtarget_blankを設定しよう

この問題では、リンク先を別のタブ(新しいウィンドウ)で表示するように指定するaタグの属性指定target_blankについて学習します。 指定する場合のメリット・デメリットがあるので、それぞれを理解した上で使用できるようになっておきましょう。

HTMLの問題に挑戦しよう!

問題

別タブで開くtarget_blankを設定しよう

aタグにtarget属性を指定してみましょう。

リンクをクリックすると新しいウィンドウで開くように設定してください。

あらかじめエディタに書くコード

                    <a href="https://ninjacode.work/">忍者CODEはコチラ</a>
¥HTML¥
                

期待する画面

解答の画像

解答と解説(別タブで開くtarget_blankを設定しよう)

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

target属性を使用して新しいウィンドウで開くように指定するには
属性値を「_blank」と指定します。

簡単に実装できるので覚えておきましょう。

別タブで開くようにすることでのメリットデメリットがあるので
気になる場合は一度ググって見ておきましょう。

補足

target属性は必須の属性ではありませんが非常に便利な属性です。

外部リンクは別のウィンドウで開く設定にされることが多いです。
外部リンクとは自分のWebページ以外へのリンクのことを言います。
自分のWebページは開いたままとなるので、留まってもらえる可能性が高まりそうですね!

ポイント

target_blankとは

target_blankとは、リンク先を開く際に別タブ(新しいウィンドウ)で開くようにする指定するために用意されたaタグの属性とその値のことです。

使用する際は、aタグの中でtarget属性を指定してその属性値に_blankを指定します。
ユーザーのサイト離れを防ぐ際などにも役立つtarget_blankですが、使用するにあたってセキュリティ面には気を付けておく必要があります。セキュリティ対策の方法を事前に調べておいてから使うようにしましょう。

target_blankの使いどころ

target_blankは、外部リンク(他のサイトへ遷移するリンクのこと)の指定をするときに使用されることが多いです。

ブログなどのサイトでは、ところどころに外部リンクが設置されており、ユーザーは少しタイトルに好奇心を持ってリンクしたというケースが多いです。その場合、元サイトは閉じずに開いておきたいと思う方がほとんどではないかと考えられます。

このようにユーザーにとっても役立つ機能であり、開発者側にとっても、サイト離れを防ぐことのできる機能なので、数多くのWebサイトで使用されています。

さらにスキルアップしたい方は公式LINEから「HTML」と送信すると動画が見れます。

LINE登録して動画を視聴する
学習の事・キャリアの事、何でもOK!無料相談に申し込む