「CSS」transform:scale()でチェックボックスのサイズを変更する
書式
scale(sx)
scale() は CSS の関数で、二次元平面上における拡縮する変形を定義します。
transform:scale() の引数に倍率を指定します。
値sx
変倍ベクトルの横座標を表します。
変倍の量がベクトルで定義されるため、水平方向と垂直方向に対して異なる変倍で大きさを変えることができます。
使用例
<!DOCTYPE html>
<html>
<head>
<style>
div{
font-family: verdana;
font-size: 20px;
background-color:skyblue;
}
</style>
</head>
<body>
<div>
<input type="checkbox" name="chk" value="1" style="transform:scale(1.0); checked"> 東京
<input type="checkbox" name="chk" value="2" style="transform:scale(2.0);"> 東京
<input type="checkbox" name="chk" value="3" style="transform:scale(3.0);"> 東京
</div>
</body>
</html>
結果
「transform:scale()」を使用してチェックボックスのサイズを変更します。「2.0」と「3.0」を指定してチェックボックスのサイズは2倍、3倍に変更します。