【CSS】空のaタグでボタンを作るCSSについて

• 2018年11月26日
• コーディング

とあるコーダーさんから上がってきたコードでこんなのがあった。※余計なクラスは省略
div全体がボタンになっているというUI。

HTMLはこんな感じ。

<div>
  <h3>ボタン</h3>
  <p>詳細はこちら</p>
  <a href=""></a>
</div>

CSS(SCSS)はこう。

div {
  height: 130px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #aaaaaa;
  h3 {
    font-size: 18px;
    text-align: center;
  }
  p {
    position: absolute;
    right: 4%;
    bottom: 5%;
    font-size: 12px;
  }
  a {
    display: block; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

aタグで何も囲まずポジションabsoluteでdivの範囲いっぱいにかぶせてるっていうスタイル。
その人だけと思ってたけど意外と他の人もやってる。。

なんでaタグを空にしているんだろう？気になる。。

聞いてみたら「特にこだわっていないけど、aタグの中にblock要素や長い文章などはよろしくないっていう印象があるから。」とのこと。

それってhtml4までじゃなかったでしたっけ？
しかも空タグの方がよろしくないでしょ。

html5でaタグではblock要素、inline要素がなくなり、aタグでもdivなどを囲むことが出来る。

a 要素

a 要素が href 属性を持つ場合、それはリンクアンカーを表します。

HTML5 タグリファレンス - W3 Watch Reference

 

1 Share

4 Users

7 Pockets

個人的にはこっちの方が気持ちいい。
というか構造的にもあってると思う。

<div>
  <a href="">
    <h3>ボタン</h3>
    <p>詳細はこちら</p>
  </a>
</div>

a {
  height: 130px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #aaaaaa;
  h3 {
    font-size: 18px;
    text-align: center;
  }
  p {
    position: absolute;
    right: 4%;
    bottom: 5%;
    font-size: 12px;
 }
}

他に理由があれば知りたい。

更新 : 空のaタグが必要になるかもしれない場合がありました。

【CSS】続:空のaタグでボタンを作るCSSについて

空のaタグが必要なケースを見つけました。そもそもの経緯以前空のaタグをposition:absoluteで全面覆ってボックス型のボタンを作る方法について「その必要はないのでは？」という記事を書きました。引き続き調べたら「もしかすると空のaタグを使う場合もあるのでは？」と思い始めたので書いてみた。前の記事はこちら。aタグの中に別のaタグ(リンク)を入れたい場合例えばカード型UIのレイアウトがあったとした時に、カード全体は記事へのリンク。カードの中にあるボタンは別のページへのリンクを設置したい時。サンプルデザインこの場合...

何もないけどヨロシク。

• 2018年11月26日
• コーディング