aタグとかいう序盤に出会う割に奥深いやつ

あんなにずっといっしょにいたのに、aタグのこと、よく知らなかったんだなって・・・。

的な感じで、webサイト作り始めのときから当たり前のように使っていたものなんですけど、全然使いこなせていなかったことに気づき、改めてちゃんと調べました。

aタグとはなんぞや・・・なんてことは省きます。みんな知ってるし。

まず、target=”_blank”。当たり前のように使ってたけど、単体で使うのではなく、rel=”noopener noreferrer”をつけないといけない。つまり、こんな感じ。

<a href="#" target="_blank" rel="noopener noreferrer"></a>

それぞれの役割について。「noopener」。これをつけないと、リンク先が、リンク元を操作できてしまう。リンクを押したときに、リンク先が開くと同時にリンク元も別のページに飛ばす、とかいうことができるので、悪意のあるサイトだった場合、フィッシング詐欺にあってしまう恐れがある、らしい。

こちらのページのDEMOがわかりやすい。

「noreferrer」。リンク先に対して、リンク元の情報を渡さないようにできる、らしい。例えば、ユーザーのIDなんかがURLに入っている場合、その情報が漏れてしまうのを防げる。でもブログなんかだと困る場合もあるらしい。アフィリエイトリンクとか。個人が細々とやってるブログなんかだと、そこまで徹底する必要はないかもしれませんが、くっつけても現状デメリットにはならないので、二つセットでつけることを習慣づけようかなと思います。

次。aタグの、クリック範囲について。例えば画像なしでボタンをつくるときに、div タグで形をつくって、全体をクリック範囲にしたい場合は、aタグに、css で display: block; をつけてあげればOK。ボタンのサイズを padding で調整するときは aタグの方に css で指定してあげるとうまくいく。height でサイズを決めているときは、aタグの方に height: 100%; を指定してあげる。

なるほどね!と感心してたんですが、そもそも div って、aタグでくくれるみたいですね。知りませんでした。じゃあそれでいいじゃん、って感じですね。

もしくは、div なんか使いたくないぜ!って時はもう、aタグを直接 css で装飾して、ボタンみたいにすることができる。

a.button { 
  padding: 10px 30px; 
  background: red; 
  color:#333; 
}

もしくは

a.button {
  display: inline-block;
  width: 300px;
  text-align: center;
  padding: 10px 0; 
  background: red;
  color:#333;
}

これは楽だ!aタグって、リンクさせる役割だよっていう印象が強すぎて、その発想がなかった。でもよく考えたら span とか p に対しては padding つけたり font-size 指定したりしてるから、思い込みと発想力だな。

参考はこちら。

css ってけして難しいものではないと思うんですけど、奥が深いように感じます。なんていうか、パズルみたいな。組み合わせいろいろあるよ!みたいな。どのプログラミング言語でも同じなんでしょうけれど。レゴだな。レゴで頭を鍛えよう。レゴランドに行こう。コロナ、はやく収束しないかな。

かしこ

タイトルとURLをコピーしました