チェックボックスのサイズを1行で変更する方法
チェックボックス（checkbox）のデフォルトのサイズは小さくてチェックしにくいですよね。
ここでは、1行コードを付け足すだけで、 チェックボックスのサイズを変更できる方法を紹介します。
「transform」プロパティを使用する
「transform」プロパティは要素を変形させたい場合に使用します。
次のように指定すると 1.4 倍の大きさとなります。
transform: scale(1.4);
チェックボックスのサイズを変更してみる
デフォルトサイズ
まずはデフォルトサイズのチェックボックスです。
デフォルトサイズ
1.4倍サイズ
次は「transform: scale(1.4);」を指定したチェックボックスです。
1.4倍サイズ
このサイズなら、デフォルトサイズよりもチェックしやすくなりますね。
大きくしたチェックボックスのコードは次の通りです。
<p><input type="checkbox" value"" class="big"> 1.4倍サイズ</p>
<style>
input.big {
transform: scale(1.4);
}
</style>
このように、「transform」プロパティを使用することで、 簡単にチェックボックスのサイズを変更できます。