
jQueryとセレクトボックスでフォントサイズを変更するUIを作る
病院や学校のウェブサイトなどで、ユーザー側でフォントサイズを変更できるUIを見かけることがあります。
今回はjQueryとセレクトボックスを使ってフォントサイズを変更するUIを作る方法をご紹介します。
フォントサイズを変更するUI
HTML
<select name="fontSize">
<option value="87.5">文字サイズ:小</option>
<option value="100">文字サイズ:中</option>
<option value="120">文字サイズ:大</option>
</select>
HTMLはこんな感じ。
ここでは、selectタグのname属性にfontSizeと指定しました。
optionタグのvalueには大・中・小それぞれのフォントサイズ(数値のみ)を入力しておきます。
今回は%で指定しますので、上記のようになっていますが、pxですることもできます。
記事が役に立ったと思ったら、応援していただけると嬉しいです!