マテリアルデザインのスタイルガイドを見ていたら、ボタンの高さは36dpとあり、さらにクリッカブルな領域は48dpにするという記述を見つけました。 https://material.io/guidelines/components/buttons.html#buttons-style だとすると、button要素内に透明の領域を‥‥、とかspanやdivなど親要素つけてそこに判定を‥‥、というよりはlabel要素使うのがマークアップとしては素直かな?と思いました。 さて、果たしてlabel要素はbuttonに使っていいんでしょうか?つー訳で仕様をチェックです。 https://html.spec.whatwg.org/multipage/forms.html#the-label-element その中に「labelable elements」という記述があるので見てみましょう。 https:
![label要素はbuttonにも適用できるの? - skpn @maepon](https://cdn-ak-scissors.b.st-hatena.com/image/square/db68e087a114ee00119678c2b40ec5180bcc44a6/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fmaepon.blog%2Fwp-content%2Fuploads%2F2017%2F04%2Fe382b9e382afe383aae383bce383b3e382b7e383a7e38383e38388-2017-04-08-16-34-43.png%3Ffit%3D994%252C487%26ssl%3D1)