NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

jQueryで文字サイズを切り替えるボタンを作る

bell賞味期限切れコンテンツ

この記事は公開または最終更新から1306日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

よくお役所のサイトなんかにあるやつですね。
今回は,こんなふうにあらかじめ基準になるフォントのサイズを定義しといて,

それからjQueryで,

として,bodyのCSSに対してフォントサイズの指定を書き換えています。

で,CSS書く時に他のh1とかh2要素やdivとかspanでフォントサイズを指定するときは, パーセント指定します。
そうすれば基本サイズが変更になったときに,相対的に文字サイズが変化するのでいい感じに文字の拡大縮小ができるって寸法です。

逆にサンプルのフォント指定ボタン付近(AAとかS,M,Lってとこ)はテキストですがサイズが変わらないほうがいいので,ここはピクセルで絶対指定しています。

そうすれば当然,基本サイズに影響されず常に指定したフォントサイズになるので,ボタンのテキストや見出しまで大きさ変わっちゃうのはこまるなーって場合に役に立つはずです。

たぶん。

以下ソースです。

jQuery

もしもCSS側で読み込んだフォントサイズと,ボタンのデフォルトサイズが異なると変なのでとりあえず初期化しておきます。
デフォルトサイズであるMボタンが押された時と同じにすれば良いので,押された時の処理と同じ事を書いてあります。

あとはボタンが押されたタイミングでスクリプトを発火させて,bodyのCSSを書き換えるって感じです。

 

HTML (切り替えボタン部分のみ)

今回はテキストでやってますが,画像とかアイコンを使ってもいいかもしれませんね。
画像の方が直感的に判りやすい場合もありますし。

 CSS

一応JSうごかない環境用にbodyにもサイズ指定を入れてますが,JS有効だと結局jQuery側でもう一度上書きしちゃってるので,あとで修正とかでフォントサイズ弄るときに「かわらないよー!」ってなった場合はJS側もチェックしてみてください。(上記jQueryソースの補足も参照)

TAGS