Webサイトやスマホアプリの実装に、ボタンは欠かせない要素の一つです。そんなボタンの実装に設定しておくと便利なCSSのスタイルを紹介します。 スマホでボタンをタップした際にズームなどの誤動作が起きないようにするCSS、ボタンのテキストが選択されてハイライトにならないようにするCSS、フォーカス時のアウトラインをより見やすくするCSS、ボタンの論理サイズを設定するCSSなど、デフォルトのスタイルとして設定しておくと便利です。 CSS Button Styles You Might Not Know by David Bushell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スマホでボタンをタップした際の誤動作を防止 ボタンのテキストの意図しない選択 ファイル選択のボタン ボタンをフォーカス時の視覚的なアウトライン
![CSSでボタンを実装するときに記述しておくと便利なスタイルのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/9ad36f7d3def37abc57330a29ed1d6f61aa8d5ee/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202402%2F2024040610%402x.png)