jQueryで文字サイズの大きさを変更するボタンを作ってみようと思います。
行政のサイトで良く見かけますよね。
これもjQueryで簡単に実現できます。
昔からある機能なので古いイメージがありますが、高齢者向けのサイトであれば必須ではないでしょうか。
小さい文字というだけで読むのを諦める人は多いと思います。
作るもの
小、中、大のボタンをそれぞれ作成し、ボタンをクリックするとPタグのフォントサイズを変更する。
これをjQueryで実現するので、画面遷移は不要でストレスが無い機能となりますね。
- 小ボタンをクリック：フォントサイズを0.5remに変更
- 中ボタンをクリック：フォントサイズを1.0remに変更
- 大ボタンをクリック：フォントサイズを1.5remに変更
HTML側
HTML側では小、中、大のボタンを作成します。
また、Pタグでテスト用の文字列も用意しましょう！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="container"> <div class="row"> <div class="col"> <button class="btn-s">小</button> <button class="btn-m">中</button> <button class="btn-l">大</button> </div> </div> <div class="row"> <div class="col"> <p>ボタンクリックで文字の大きさが変わります</p> </div> </div> </div> |
[ 4〜6行目 ]
小、中、大のボタンを作っています。
そのボタンがクリックされたかが分かるように、それぞれに独自のクラス名をつけています。
[ 11行目 ]
このPタグの文字列の大きさを変更します。
スクリプト側
小、中、大の各ボタンがクリックされた時の処理を記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(function(){ // 小ボタンクリック $('.btn-s').click(function(){ $("p").css('font-size', '0.5rem'); }); // 中ボタンクリック $('.btn-m').click(function(){ $("p").css('font-size', '1rem'); }); // 大ボタンクリック $('.btn-l').click(function(){ $("p").css('font-size', '1.5rem'); }); }); |
[ 3〜5行目 ]
小ボタンがクリックされた時に実行されます。
4行目でPタグの「font-size」を「0.5rem」に設定しています。
中ボタン、大ボタンでも同様にPタグの「font-size」に値を設定しています。
簡単ですね！
画面遷移無く、ボタンをクリックするとすぐに実行されるなんて素敵ですよね。
jQueryは素晴らしいです。
今回もサンプルを作っています。
参考になると嬉しいです。
[…] jQuery 文字の大きさ（フォントサイズ）の変更（小中大） Twitter Facebook 前のページ […]