| web creators特別号 |
| いますぐ悩みが解決する！ Webデザイン仕事で役立つ54のアイデア |
インタラクション＆エフェクト 3-07
フォントサイズの切り替えボタン
アクセシビリティを考慮した、ページ全体のフォントサイズを変更できるボタンをjQueryで作成してみよう。今回は複数ページに渡って値を保持するためCookieを使用する。
制作・文／高橋としゆき（Graphic Arts Unit）
BROWSER IE…6over Firefox…3.6over Safari…4over Chrome…18over
01
今回は、ページを移動しても設定値が保存できるようにCookie を使用する。そのため、Cookie の扱いを簡単にするjQuery ライブラリ「JavaScript Cookie」を利用する【1-1】【1-2】。
公式サイトからプラグインのjsファイルをダウンロードしておこう。もちろん、jQuery本体も必須だ。
【1-1】「http://code.google.com/p/cookies/」から「JavaScript Cookie」をダウンロードする。
【1-2】「JavaScript Cookie」を使えば、Cookieの扱いが簡単になる。
02
まずはHTML を作成しよう。head要素で必要なプラグインを読み込み【2-1】、【2-2】のようなページ構成でマークアップする。
次に、フォントサイズを操作するコントロール部分とページの内容部分を記述する。
内容は「大見出し」「小見出し」「本文」「キャプション」という構成にした。
それぞれにクラス名を付加しておこう。
【2-1】jQuery本体と「JavaScript Cookie」のプラグインを読み込む。その下のscript要素内にフォントサイズ変更のためのスクリプトを書いていく。
【2-2】ページ内容の構成。
03
head要素に【3-1】のスクリプトを記入する。各ボタンを押した際にフォントサイズを変化させる値を連想配列で作成。その後、ドキュメントの読み込み後に、各ボタンクリック時の動作を設定する。
これはボタンをクリックしたときにchangeFontSize関数を実行するものだ。この関数は後の工程で解説する。
【3-1】
04
続いて初期のフォントサイズを取得する処理【4-1】を記述する。ここで指定したものが、すべての基準サイズとなる。さらに、Cookieに書き込まれたデータをチェックするための処理【4-2】を追記する。
Cookieに「fontRaito」が存在するかチェックし、存在すればその値を取得する。存在しない場合は「normal」の値を設定し、「中（normal）」のフォントサイズが表示されるように設定する。
【4-1】初期のフォントサイズを取得して、変数「defaultFontSize」に格納する。
【4-2】クッキーのデータが見つからない場合は、「中（normal）」のフォントサイズが表示されるように設定する。
05
さらに、【5-1】のコードを入力する。これがフォントサイズを変更する処理だ。まず、初期フォントのサイズと設定サイズを使ってフォントサイズを変更し、現在の値に該当するボタンに「current」のclass 名を付加する。
次に設定サイズの値をCookieに保存して終了だ。
【5-1】フォントサイズを変化させるchangeFontSize 関数。
06
最後にページのCSSを設定する【6-1】【6-2】。この際に注意したいのは、フォントサイズをすべて「em」や「%」など、親要素に対する相対値で指定することだ。こうしておけば、親要素である「#contents」のフォントサイズを変えるだけで、その他の要素のフォントサイズも変更することができる【6-3】。
複数ページが存在するサイトの場合、ページを移動する度にフォントサイズを設定しなければならないのはかなり不便だ。そのため設定サイズを別ページへ引き継ぐ処理が必須となる。今回はこれをCookieで実現した。
通常のJavaScriptのみでCookieを扱おうとすると少し面倒があるので、何らかのライブラリを使って処理を簡易化するのが有効と言えるだろう。
ちなみに、「jquery.cookies.js」の最新バージョンは2013年6月6日現在、2.2.0となっている。
【6-1】jCarousel を実行するスクリプト。
【6-2】矢印ボタンをクリックすると画像がスライドする。
【6-3】今回の各要素のフォントサイズ指定値。1emが親要素と同じサイズという計算だ。
[目次に戻る]
2013年1月29日発売のweb creators特別号「いますぐ悩みが解決する! Webデザイン 仕事で役立つ54のアイデア」から、毎週記事をピックアップしてご紹介! 近年さかんに目にするパララックス効果やMasonryを利用したレイアウトをはじめ、見やすくて使いやすいナビゲーション、フォームや製品紹介ページのユーザビリティを向上するインタラクション、表現の可能性を広げるHTML5+CSS3の機能、制作効率を向上するフレームワークの紹介、スマートフォンサイト制作のポイントとTipsなど、Web制作の仕事に役立つ54のアイデアが満載です。
※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。
