名古屋工業大学 先進セラミックス研究センター
井田 隆/Web 運営

文字サイズ拡大縮小ボタンの実装

Web ページに文字サイズ拡大縮小ボタンを実装する方法に関するメモです。


基本的な考え方

文字サイズの大中小ボタンを配置する簡便な方法を別のページに記載しています。しかし,

  1. 文字サイズ変更ボタンの文字サイズが連動して変化してくれない。
  2. ベージを読み込み直すと文字サイズが維持されず,デフォルト値に戻ってしまう。
  3. 選べる文字サイズが3段階のみである。

という不満があります。 ワンクリックで文字の大きさを切り替えられるボタンの実装は,お年寄りに優しいという面もあるのですが,むしろスマートフォンで閲覧する場合に効果があるように思われます。

ここでは,以下のサイトを参考にして,もう少し使いやすい文字サイズ変更ボタンの実装を試みました。

[→ フォントサイズ変更スクリプト(タイプC)

JavaScript ファイルの保存

上のサイトで公開されている JavaScript で記述された fscC.js というファイルを,ここでは js というディレクトリに保存することにします。

ボタンの実装

1.ヘッダー部の変更(ボタン風 style の挿入)

ボタンの代わりに a 要素を使います。 ボタン風の見た目にするために,HTML ヘッダ部に以下のような記述を付け加えます。

<style>
<!--
a.button {
margin:0.1em;
padding:0.3em;
border-top: solid 0.1em #eeeeee;
border-right: solid 0.1em #aaaaaa;
border-bottom: solid 0.1em #aaaaaa;
border-left: solid 0.1em #eeeeee;
background-color: #cccccc;
text-decoration:none;
}
a.button:hover {
background-color: #aaaaaa;
}
// -->
</style>

2.ヘッダー部の変更(javascript の参照)

JavaScript を参照するために,HTML ヘッダ部に以下のような記述を付け加えます。

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

3.ボタンの表示

HTML ファイルの <BODY> と </BODY> で囲まれるボディー部の中で,大中小ボタンを表示したい場所に以下のコードを挿入します。

<p style="text-align:right" id="nav">
文字サイズ:
<span style="white-space:nowrap">
<!-- 拡大縮小挿入部はじめ -->
<a href="#" onclick="fsc('larger');return false;"
 onkeypress="fsc('larger');return false;"
 class="button">拡大</a>
<a href="#" onclick="fsc('smaller');return false;"
 onkeypress="fsc('smaller');return false;"
 class="button">縮小</a>
<a href="#" onclick="fsc('default');return false;"
 onkeypress="fsc('default');return false;" 
 class="button">元に戻す</a>
<!-- 拡大縮小挿入部おわり -->
</span>
</p>

上のコードの中で,<p style="text-align:right"> 〜 </p> は右に寄せて表示する意味であり, <span style="white-space:nowrap"> 〜 </span> は改行を抑制する意味です。 ボタン風の外観は class="button" で指定されています。

4.補足

Windows Internet Explorer 9.0.8 と Mac OS 10.7 上 Safari 5.1.7, Firefox 14.0.1, Google Chrome 20.0, iOS5.1.1 上 Safari, Google Chrome で動作の確認をしました。「Google Chrome はローカル環境では cookie を作らない」ことに気づくまでかなり悩みました。


2012年7月19日