REDLINE MAGAZINE | スタイルシートの切替

スタイルシートの切替

文字サイズ可変がユーザー側で自由にできるように、文字サイズは制作者が固定すべきではない。

ブラウザの設定で文字サイズを自由に可変できるのは大変有効的だと思うのだが、実際その機能に気づいているユーザーばかりではない。

最近サイトの中に「文字を大きくする」「文字を小さくする」等のボタンを配置し、Javascriptを利用してcssを切替て文字サイズの可変を可能にしているサイトも多いように感じる。

cssを差し替えるということだが、テキスト関連のcss指定だけ別ファイルにしておくのも１つの手だし、テキスト部分だけ文字サイズを変えて単一のcssファイルで管理する方法でも構わない。管理のしやすさを考えれば前者がおすめめである。

もちろんスタイルシートを切り替えるJavascriptなので、デザインごとごっそり変更する事も可能。使い方はお好みで。

問題のcssを切り替えるJavascriptは以下のサイトのページで公開されている。

http://www.alistapart.com/stories/alternate/

英語だけど下の方にスクロールしていくと.jsファイルをダウンロードできるリンクがあるのでそこをクリックするだけである。Javascriptの知識がないほとんどない私でも簡単に利用できたので、誰でも安心して利用できるはずだ。

ダウンロード後は普通に(x)htmlからそのファイルにリンク

<script type="text/javascript" src="js/styleswitcher.js"></script>

スタイルシート部分へのリンクは

<link href="css/default.css" rel="stylesheet" type="text/css" title="default" />

<link href="css/large.css" rel="alternate stylesheet" type="text/css" title="large" />

と、デフォルトcssファイルと代替cssファイルを記述。代替側のtitleの中身は任意。好きなものを入れてよし。

後は、「文字を大きくする/小さくする」のボタンなりテキストリンクに、設定。

<a href="#" onclick="setActiveStyleSheet('large'); return false;">文字を大きくする</a>

<a href="#" onclick="setActiveStyleSheet('default'); return false;">文字を小さくする</a>

こんな感じ。

この方法の他にもJavascript内で文字サイズを決定して文字サイズ可変するものなどもある。お好みで好きな方法でユーザビリティ、アクセシビリティを確保すべし。

2006年09月14日 14:05 | Red | パーマリンク