「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典イメージぴよ画像「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

アンカータグ

pointこの用語のポイント

pointHTMLタグだよ

pointリンクを書くときに使うよ

スポンサーリンク

簡単に書くよ

アンカータグ(英:anchor tag)とは

HTMLタグ(ホームページの内容に意味付けをする「目印」)のひとつ
であり

ホームページでリンクを書くするときに使うHTMLタグのこと
です。


image piyo

詳しく書くよ

順番に見ていきましょう。
まずは予備知識として「HTMLタグ」と「アンカー」について簡単に説明します。
「そんなの説明されなくても知ってるよ!」な人は適当に読み飛ばしてください。

HTMLタグは、ホームページの内容に意味付けをする「目印」です。

例えば、ホームページのファイル

あああ<b>ここは太字になります。</b>いいい

と書いたとしましょう。

そうすると、実際のホームページでは

あああここは太字になります。いいい

のような見た目になります。
「<b>」と「</b>」で囲んだ部分が太字になりましたね。

これは、ホームページの世界では「『<b>』と『</b>』で囲んだ部分は太字になる」というルールがあるからです。
言い方を変えると、太字にしたい部分には目印として「<b>」と「</b>」を付けるのです。

このときの「<b>」と「</b>」がHTMLタグ(のひとつ)です。
ホームページの内容に意味付けする「目印」です。

アンカーは、ホームページの話で出てくる「ポチっと押すと別のところに移動する仕組み」です。
ハイパーリンク」や単に「リンク」と呼ばれることもあります。
あなたもホームページを見るときにポチポチ押しているはずです。

アンカータグ

アンカーの書式は

<a href="【移動先のページ】">【ポチっと押す文字】</a>

です。
ホームページにアンカーをくっつけるときは、ホームページのファイルに以下のように書きます。

<a href="https://wa3.i-3-i.info/">わわわIT用語辞典</a>

そうすると、実際のホームページでは

わわわIT用語辞典

のような見た目になります。

以上を踏まえて、ホームページにアンカーを付けるときの書式

<a href="【移動先のページ】">【ポチっと押す文字】</a>

で出てくる

「<a href="~" >」と「</a>」

がアンカータグです。
ホームページのファイルに書く「ここはアンカーですよ!」の目印ですね。

あるいは

<a href="【移動先のページ】">【ポチっと押す文字】</a>

という書式全体を指して「アンカータグ」と表現している場合も あります。

アンカータグには「target」という属性があります。
target属性は「どの画面でリンク先を開きますよ」を指定する属性です。

例えば「target="_blank"」という指定は「新しい画面でリンク先を表示してくださいな」の指定です。

<a href="https://wa3.i-3-i.info/" target="_blank">わわわIT用語辞典</a>

のように書くことで

わわわIT用語辞典

のようなリンクになります。
このリンクを押すと、ページが移動するのではなく新しい画面が開きます。
ポチポチと押せば押すほど、どんどん新しい画面が開きます。

target属性として指定できるのは「_blank」「_self」「_parent」「_top」及び任意の名前です。

「_blank」は「新しい画面で表示してよ」の指定です。
先程の例にありましたね。

「_self」は「今表示している画面で表示してよ」の指定です。
targetを指定しないときと同じ動きをします。

「_parent」は「親フレームで表示してよ」の指定です。

「_top」は「フレームを解除して表示してよ」の指定です。

「_parent」と「_top」は、よく分からなければ気にしなくて かまいません。
フレーム分割していないと指定する意味がない上に、最近(この説明を書いている時点)はフレーム分割しているホームページがほとんどないからです。

また、target属性には適当な名前を指定することも できます。
例えば

<a href="https://wa3.i-3-i.info/" target="piyo">わわわIT用語辞典</a>

のように書くことで

わわわIT用語辞典

のようなリンクになります。
このリンクを押すと、最初の1回はページが移動するのではなく新しい画面が開きます。
ただし、何回もポチポチ押しても新しい画面は増えません。
最初の1回だけ新しい画面が開いて、あとはその新しく開いた画面の表示内容が更新されます。

不思議ですね。

どうしてでしょうか?

先程「targetという属性は『どの画面でリンク先を開きますよ』を指定する」と書きました。
それを踏まえて

<a href="https://wa3.i-3-i.info/" target="piyo">わわわIT用語辞典</a>

という指定を見てください。
これは「リンク先を『piyo』という画面で表示してよ」の指定です。

このリンクを最初にポチっと押したとき「piyo」という画面はありませんでした。
だから新しい画面が開きます。
その新しい画面の名前は「piyo」です。

それでは、2回目にポチっと押したときは、どうでしょう?

そうですね。
すでに「piyo」という名前の画面があります。
だから、ポチポチ押しても、2回目以降は新しい画面が開かないのです。
すでにある「piyo」という名前の画面に表示されます。

これがtarget属性で適当な名前を指定したときの動きです。

気を付けるべき点は、それくらいですかね。
他にもいろいろな属性が指定できるので、興味がある人は調べてみてください。


image piyo2

一言でまとめるよ

まぁ「アンカータグ」って単語が出てきたら「リンクにしたいときに使うHTMLタグ(ホームページの内容に意味付けをする「目印」)なんだな~」と お考えください。

一番上に戻るよ
スポンサーリンク
書籍画像012
書籍画像020

おまけ

■訳してみるよ

「anchor(アンカー)」の意味は「錨(イカリ)」とか「しっかりと固定する」とか「最終走者」とかです。
「tag(タグ)」の意味は「札(フダ)」とか「付箋」とかです。
何となく くっつけると

錨の札

となります。




書籍画像
わわわ説明術コラム
宣伝だよ
インフルエンサー六法 活動開始から情報発信、収益化までに潜むトラブル対策50
「分かった!」と思わせる説明の技術 知識ゼロの相手にも伝わるようになる本【Audible】
実践サイバーセキュリティ入門講座 現場に残された痕跡からハッカーの攻撃を暴け