ユーザービリティを考慮してWEBページを制作するのに役立つscriptがA List Apart: Articles: Text-Resize Detectionのエントリーで紹介している"textresizedetector.js"
このスクリプトは、ページを閲覧しているユーザーの任意に指定するフォントサイズを検知して、合わせて各要素のクラス指定を操作できるというもの。
いくらユーザービリティを考慮に入れたWEBページデザインでさえも、フォントにおいてデフォルト設定サイズ以外の大きさにリサイズされた場合、自然とデザインさえも崩れてしまいます。当然のことでしたが、このスクリプトを導入することで、任意のサイズまでフォントのサイズ変更がされた場合、適宜対応してデザインを変更できるということが可能になります。
適切にスタイルシートを使う-アクセシビリティガイドライン
WEBページをデザインする際に気をつけておかなければならないのが、ユーザーエージェントでフォントサイズを操作できるように相対単位にてCSS指定しておくこと。
このことは、アクセシビリティガイドラインにも謳ってあります。WEBデザインで間違ったデザインの一つとして特に注意したい項目でもあるフォントサイズ。
デザインのみを追い求めようと絶対単位（px指定）で設定した場合、それはユーザーのためのデザインではなく、デザイナー自身の自己満足になってしまうということです。
デザイン上や制作するデザイナーの年齢などによってページのデフォルト設定するフォントサイズはさまざま。でも本来の目的は、ユーザーのためのWEBコンテンツ提供を目的としたページ制作+デザインである。無視して制作されても結果の得られないWEBページになってしまう。せっかくいいデザインのページであってもユーザーのリピートなどが得られなければ、本末転倒でもある。特に気を付けたい。
（引用：ウェブコンテンツ・アクセシビリティ・ガイドライン1.0 技術書）
- ガイドライン3. 正しくタグ付けし、適切にスタイルシートを使う
3.4 マークアップ言語の属性の値やスタイルシートのプロパティの値には、絶対的な大きさを表す単位ではなく、相対的な大きさを表す単位を使用する。
textresizedetector.js
ユーザーの表示フォントサイズを検知して適宜対応するブロック要素のマークアップ上に、空の<span></span>要素を追加します。
<span></span>要素の高さを検知して、フォントサイズが変更されたかを判断し、それを処理に反映・実行させます。
ユーザーがフォントサイズを変更したときに、任意の処理がされるように適宜javascriptで処理を設定する必要があります。（［function init()］の部分のスクリプトがリサイズを検知して処理を行う。）
サンプル
A List Apart: Articles: Text-Resize Detectionでは、3つのサンプルを紹介しています。
※IE・Firefoxであれば、【ctrl】+【マウスホイール】（※ホイールのついたマウス）でフォントサイズを簡単に変えることができます。
- Demonstration of the fontResizeSwitch() functionality
フォントサイズを検知してダイアログにてサイズを表示します。
このページでサイズをいろいろと変えてみると処理が変わります。
最初のフォントサイズ・現在設定しているフォントサイズ・サイズの開きをダイアログに表示します。- Demonstration of the TextResizeDetector functionality
このサンプルは、最初は水平で配列しているメニューコンテンツをフォントサイズ20ピクセル以上に設定された場合に、デフォルトの階層表示へと切り替わるようになっています。
- Example of changing a submit button
- このサンプルは、submitボタンの表示が最初は画像が指定されていますが、フォントサイズ20ピクセル以上に設定された場合に、デフォルトボタンに切り替わるようになっています。
以上のようなサンプルでフォントサイズの変化に合わせてデザインを変えることができるということを実証しています。すごい！
実際に自分でも作ってみたいのですが、只今勉強中のため、処理のスクリプトがつくれません。残念。
ただ、ちょっと勉強することで何かできるかなといった感じです。
A List Apart: Articles: Text-Resize Detectionでの他の応用例を紹介しています。- フォントサイズに合わせて、異なるCSS設定を表示するように切り替える。（これが一番やりたい！）
- 任意のフォントサイズまでにリサイズされたときに、
- あるブロック要素を非表示にする
- 更なるコンテンツを表示するようにする
- サイドコンテンツの幅を変更する・・・など
Comments:でその他のアイデアなんかも見つかるかも。興味のある方は、読んでみるといいです。
導入に関しては、javascriptのDOM操作に関する知識がないとちょっと難しいかもしれません。
サンプル検証のエントリーを作っている最中ですが、いまいち理解に苦しんでいます。後日検証エントリーアップします。
参照サイト
- A List Apart: Articles: Text-Resize Detection
- http://alistapart.com/articles/fontresizing
参考サイト
以下のサイトの"addEventListener""getElementById"などを参考にしてもらえれば、少しはわかりやすくなると思います。
- JavaScript DOM リファレンス
- http://www.openspc2.org/JavaScript/JavaScript_DOM/index.html
コメントする