最近行った実装で、テキストサイズの切り替えのご要望がありました。
読み込むCSSを変えるか、JSで制御するか、色々考えましたが、
あっさりステキなプラグインを発見したので活用させていただくことにしました。
たぶんレシピ的には30分もかからないくらいかと。
準備
プラグインは、「jQuery Text Resizer Plugin」
です。
フォントサイズをJSで指定し切り替えるか、あるいはJSでCSSのクラス名で指定し切り替えるか、スタイル直書きのCSSで切り替えるかを選べるのでとても便利。
私は各部分へのフォントサイズを相対値で細かく計算させてやりたかったので、
一番最初の指定で実装しましたよ。
以下、実装例です。
まずjQueryライブラリ(v1.3以降)と、Text Resizerライブラリを読み込ませます。
html
<script type="text/javascript" src="/js/jquery1.7.2.min.js"></script> <script type="text/javascript" src="/js/jquery.textresizer.min.js"></script>
そして下記htmlを任意の場所へ。フォントサイズ切り替えのためのトリガーになるリストです。
idは何でも良いです。
html
<div id="textsizer"> <p>文字の大きさを調整</p> <ul class="textresizer"> <li><a href="#nogo" class="small-text" title="Small">A</a></li> <li><a href="#nogo" class="medium-text" title="Medium">A</a></li> <li><a href="#nogo" class="large-text" title="Large">A</a></li> <li><a href="#nogo" class="larger-text" title="Larger">A</a></li> </ul> </div>
そしてJavascriptで実行します。
typeによってsizesオプションの指定方法が違うようなので、公式サイトもチェックしてください。
javascript
/* #textsizer aは、トリガーとなるリストを指定 */
$("#textsizer a").textresizer({
target: "#resize_column", //targetには、対象となるブロック等を指定
type: "fontSize", //fontSizeまたはcssClassまたはcssを指定
sizes: [ "12px", "14px", "16px", "18px" ],
selectedIndex: 1
});
切り替えの詳細を設定しよう
で、最後に重要なフォントサイズの指定です。このプラグインだと、targetに指定したものにフォントサイズをつけて切り替えますので、
targetの子要素には相対値でフォントサイズを指定しておきます。
逆に言うと、変えたくないところは固定フォントサイズで書いてあげれば変わりません。
bodyとかラッパーとかに一撃で指定する場合なんかは、
恐らくヘッダ・フッタやグローバルメニューなどはテキストサイズ切り替えを許さない場合もあるかと思いますので、この場合もフォントサイズは固定してしまえば良いと思います。
（アクセシビリティの問題はさておき、レイアウトが崩れずかつ”そこそこ”ユーザーに優しい、という立ち位置で言っています）
ただ私の例では、指定漏れがあると面倒くさそうなので、特定カラムだけを狙い撃ちで切り替える形としました。
htmlが下記とするならば、Text Resizerの対象は#resize_columnだけに絞る感じです。
html
<body>
<div id="wrapper">
<div id="header">...ヘッダ...</div>
<div id="side">...サイドカラム...</div>
<div id="resize_column">
...メインカラム...
<div class="child_column01">...メインカラムの子要素...</div>
<div class="child_column02">...メインカラムの子要素...</div>
<div class="child_column03">...メインカラムの子要素...</div>
</div>
<div id="footer">...フッタ...</div>
</div>
</body>
そして、CSSはこんな感じです。
css
#resize_column{ font-size:100%;}
.child_column01{ font-size:108.3%;} /* 100%=12px の時、13px相当*/
.child_column02{ font-size:116.7%;} /* 100%=12px の時、14px相当*/
.child_column03{ font-size:125%;} /* 100%=12px の時、15px相当*/
フォントサイズ指定は相対値ですが、この計算は、例えばText Resizerで最小の状態=12pxとした時、それぞれがどの程度の大きさになるのかで（本当にざっくりと）計算しています。
計算はこちらのサイトが信じられないくらい便利だったので、利用させていただきました。
クリックするとそれを起点に各フォントサイズを計算してくれるのよー。あなたが神か…！
実装はそんな感じです。
今まで特定のユーザーがターゲットとなる案件しかやったことなかっために、テキストサイズてあまり意識したことありませんでした。（クライアントへインタビューしても上が40代までを想定するとか）
が、高齢化社会においてはテキストサイズって今後はかなり気にかけないといけない点になりそうな気がします。そもそもIT業界自体が、徐々に高年齢化していきそうだしね…（ボソッ
ま、こんな簡単に実装できるなら、積極的に提案できるのではないかと思いましたよ。
ヨロシケレバー。
