HTMLのaタグtarget属性とは？使い方と各値の意味を徹底解説
HTMLのaタグ「target属性」とは
<a>要素のtarget属性は、リンク先のドキュメントをどこに開くかを指定するための属性です。新しいウィンドウやタブで開く、同じフレーム内で開く、親フレームで開くなど、リンクの表示方法を柔軟に制御できます。
基本構文
<a target="_blank|_self|_parent|_top|frame">
target属性に指定できる値
target属性には、主に以下の5つの値を指定できます。
- _blank：リンク先のドキュメントを新しいウィンドウ、または新しいタブで開きます。
- _self：クリックされたのと同じフレーム内にドキュメントを開きます（デフォルト値）。
- _parent：親フレーム内にドキュメントを開きます。
- _top：フレーム構成を解除し、ウィンドウ全体にドキュメントを開きます。
- frame名：あらかじめ名前を付けたフレーム内にドキュメントを開きます。
実装例
それでは、<a>要素でtarget属性を使用する具体的な例を見てみましょう。
サンプルコード
<!DOCTYPE html>
<html>
<body>
<h2>Learning is Fun</h2>
<p><strong>注意 −</strong> 以下のリンクは新しいウィンドウで開きます。</p>
<p><a href="https://www.tutorialspoint.com/tutorialslibrary.htm" target="_blank">Tutorials Library</a><br>
<a href="https://www.tutorialspoint.com/programming_examples/" target="_blank">Codes</a><br>
<a href="https://www.tutorialspoint.com/computer_glossary.htm" target="_blank">Computer Glossary</a>
<br>
</body>
</html>
このコードを実行すると、次のような画面が表示されます。出力されたリンクは、すべて新しいウィンドウ（タブ）で開きます。
コードの解説
上記の例では、target属性に「_blank」を設定しています。
<a href="https://www.tutorialspoint.com/tutorialslibrary.htm" target="_blank">Tutorials Library</a>
このようにtarget属性の値として「_blank」を指定すると、href属性で指定したリンク先が新しいウィンドウで開かれます。
target="_blank"
まとめ
target属性を使いこなすことで、ユーザーがリンクをクリックしたときの表示方法を細かく制御できます。特に外部サイトへのリンクでは「_blank」を指定して新しいタブで開くのが一般的です。その際は、セキュリティ対策として「rel="noopener noreferrer"」を併せて指定することを忘れないようにしましょう。
-
HTMLのstyle属性とは？構文と使い方をサンプルコード付きで解説
HTMLのstyle属性は、ドキュメント内の個々の要素に対してインラインスタイルを直接指定するための属性です。style属性はグローバル属性に分類されるため、すべてのHTML要素で使用できるのが特徴です。 style属性の基本 style属性の値には、「プロパティ名: 値;」という形式でCSSを記述します。複数のスタイルを同時に指定したい場合は、セミコロン（;）で区切って並べることで、1つの要素にまとめてスタイルを適用できます。 構文 style属性の基本的な構文は次のとおりです。 <タグ名 style="CSSプロパティ: 値;"></タグ名> そ
-
HTMLのstart属性とは？順序付きリストの開始番号を指定する方法
HTMLのstart属性は、順序付きリスト（<ol>要素）において、最初のリスト項目に付与される番号（開始値）を指定するための属性です。通常、順序付きリストは「1」から自動的に採番されますが、start属性を使うことで、任意の番号からリストを開始させることができます。 構文 start属性の基本的な構文は以下のとおりです。 <ol start="number"></ol> start属性の値には正の整数を指定します。例えば「5」を指定すれば、リストは「5、6、7…」というように採番されます。 使用例 それでは、HTMLのstart属性を使