こんにちは、RPGではレベルを上げて余裕でクリア派のヨシミです。久しぶりの登場ですが相変わらずHTML関連の話をしようと思います。

今回の主役はタイトルにあるように<a>タグ。もしかしたら<a>←これ自体でエータグと読むかもしれないので、<a>タグ←こう書くとエータグタグと読んでいる人もいるかもしれないですね。可愛いのでエータグタグと読んでください。

<a>タグの役割

そもそも<a>タグってなんなの?HTMLを知らない人に聞かれたらなんと答えるか。

私なら「リンクだ!」と答えます。つまり、見ているwebページから別のwebページへ遷移させるためのタグです。

<a>タグの視認性

webページを見ていてクリックしたり、タップしたりすることがあると思います。それでページが遷移するのは前述した<a>タグのおかげです。ちょっと考えてもらいたいのは「なぜそこを押せると思ったか」です。

webページの中には数多くの文字や画像があります。それでもほとんどの人が直感的に押せる場所を判断していると思います。画像はともかくとして、文字でも押せる場所というのは直感的にわかりますよね。

それを意識して改めてwebページを見てみると、押せそうな場所というのはなんらかの工夫があるはずです。それは下線であったり、色が違っていたり、カーソルが変わったりするものです。

他にもカーソルをのせた時だけ背景の色が変わる、というものも見たことがあると思います。次はこのちょっと格好いいギミックについてお話します。

<a>タグの視認性2

動的なページというのは格好いいですよね。

画像のスライドであったり、カーソルをのせた時に色が変わったり。格好いいだけはでなく実用性もあります。

動くものは止まっているものよりもインパクトがあるため、より目につきやすいと思います。さらにいえばクリック率も上がっているかもしれません。少なくとも私は少しだけ押したい気持ちが上がります。

技術的な話でこれを実現しているのは「疑似セレクタ」もしくは「javascript」です。

例えばマウスをのせた時に背景色を変えるというギミックですが、これは疑似セレクタでは「:hover」を、javascriptでは「onMouseOver」を使って表現します。

これによってちょっと格好いい動的なギミックは実現されているのです。

tbotanA

<a>タグの未来

このマウスをのせた時という格好良くわかりやすい動的なギミック、実は欠点があります。

それはマウスがないデバイス、つまりスマホです。

スマホではこのギミックを設定していると2回タップしないと遷移できないことがあります。きっとこのギミックを作った人は、未来にはマウスなしにwebページを見れて遷移出来るデバイスが出来るなんて想像だにしなかったでしょう。

この先もきっと想像できない進歩が待っています。マウスが必要なくなったように、タップもすることなしにページ遷移が出来るようになる未来もそこまで迫っているかもしれませんね。