よくポータルサイトやECサイト等では、ページのフォントサイズを変更できるになっていますが、

jQueryを使って簡単にできるようなので、実際にやってみました。

 

ここでのポイントは、「フォントサイズをemで指定する」ことです。

フォントサイズの指定は、px,pt,em等ありますが、

僕は基本的にはpxを使っています。

その方が自分としてはわかりやすいですし、パッとソースを見た時でもサイズがわかるからです。

 

そもそも、フォントのそれぞれのプロパティはどう違うのかっていうと、

詳しくはここで説明しませんが、フォントサイズ変更する際に重要なのは、

px,pt：絶対単位

em,%：相対単位

ということです。

 

それぞれのサイズの一覧はこちらをご覧ください

PXtoEM.com: PX to EM conversion made simple.

 

実は、今まではemの存在を知っていたのですが、

理解はしていなかったので、pxを使って、フォントサイズを変更するようにしていました。

（もうそれは大変でした・・・）

 

ちょっと前にemを理解してから、これなら簡単じゃん！という衝撃を受け、フォントサイズ変更がとても簡単になりました。

 

ただ、css設定する時に、emだとサイズがわかりにくいので、調べながらやる必要があるのが、

ちょっとめんどくさい所かもしれません。その際は先程紹介したサイトをご覧下さい。

 

前置きが長かったのですが、

とりあえずデモをご覧下さい。

DEMO

DEMOの解説

まずはhtmlは以下になります。

XHTML

<div id="fontSize"> <h3>文字の大きさを変更</h3> <ul> <li class="small">小</li> <li class="middle">中</li> <li class="large">大</li> </ul> </div><!-- #fontSize end --> <div class="box"> <h3>文字の大きさの設定:1.2em</h3> <p>文字の大きさの設定:1em</p> </div> <p>文字の大きさの設定:1em</p>

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div id="fontSize">         <h3>文字の大きさを変更</h3>         <ul>           <li class="small">小</li>           <li class="middle">中</li>           <li class="large">大</li>         </ul>     </div><!-- #fontSize end -->       <div class="box">       <h3>文字の大きさの設定:1.2em</h3>       <p>文字の大きさの設定:1em</p>     </div>     <p>文字の大きさの設定:1em</p>

 

先程も説明したのですが、

emは相対なので、同じ1emを指定しても、

親要素の有無、指定によってサイズは変わってきます。

 

DEMOのソースでいうと、

bodyには、0.75em(12px)が設定されています。

 

普通のpタグは1emを指定しているので12pxのサイズになります。

boxのクラスがついたdivのpは同じ1emですが、

boxには、1.167emが指定されているので、

14pxとなります。

 

ソースが複雑だとわけわかんなくなるかもしれないので気をつける必要があります。

 

jQueryは簡単で、押されたボタンに対応して、

bodyのフォントサイズを変更すればOKです。

emで指定した所は相対的に変化してくれるので、サイト全体の文字サイズを変更することができます。

 

そのソースは以下になります。

 

JavaScript

$(function(){ $("#fontSize li").click(function(){ $("#fontSize li").removeClass("current"); var fontCss = $(this).attr("class"); $(this).addClass("current"); if(fontCss == "large"){ $("body").css("fontSize","0.875em"); }else if(fontCss == "middle"){ $("body").css("fontSize","0.75em"); }else{ $("body").css("fontSize","0.625em"); } }); });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

$(function(){   $("#fontSize li").click(function(){   $("#fontSize li").removeClass("current"); var fontCss = $(this).attr("class"); $(this).addClass("current"); if(fontCss == "large"){   $("body").css("fontSize","0.875em"); }else if(fontCss == "middle"){   $("body").css("fontSize","0.75em"); }else{   $("body").css("fontSize","0.625em"); }   }); });

 

DEMOでは上のソースとはちょっと違い、
ローカルストレージを使い、ページが変わっても、フォントサイズの設定が変わらない様にしています。

興味のある方はDEMOのfix.jsのソースをご覧下さい。

 

これは3段階でしかサイズを変えられないので、
どんどん大きくしたり小さくしたりはできません。

そのバージョンも今度また作成したいと思います。