見出し画像

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ですることもできます。

ここから先は

451字

スタンダードプラン

¥500 / 月
初月無料
このメンバーシップの詳細

記事が役に立ったと思ったら、応援していただけると嬉しいです!