回答受付が終了しました

HTML/CSSでボタンを作る時、皆さんどうやってますか? ① <a href="#"><div class="btn"></div></a> ② <div class="btn"><a href="#"></a></div> ③

回答(3件)

0

HTML5で<div>を<a href>で囲んでも問題ないようになりましたが、HTML4では認識されていませんでした。 その流れで昨年まで、Wordpressでも<div>を<a href>で囲むことはできませんでした。 ので、①を使うならdivではなくspan推奨です。 ②の場合は<a href>にstyle="display:inline-block;width:100%;height:100%"をつけないとdivいっぱいがボタンと機能しません。 それなら普通に③で良いです。 アイコン+コメント形式なら <a href=""> <span class="icon">★</span> <span class="text">ログイン</span> </a> となりますので、①か③。 ②はまず使わないかと思います。

0

どれも正しいと思います。 でもどれも欠点持ちです。 理想は3ですがデザインごとにクラス指定がいるので煩雑。 1が一番楽ですが、対象によっては無関係のエリアまでボタンになる。 2は外側のエリアいっぱいまでアンカーを広げる手間はありますが常識的。ただアンカーだけでロールオーバーにすると弱い。

1

独学ですが、 (3)でボタンっぽくCSSでデザインするか <a href="#"><button type="button">トップ</button></a> が多いかな。

1人がナイス!しています