Blog

webサイトのフォントサイズをjQueryを使って変更する

2013.09.17Cat:jQuery デザイナー

よくポータルサイトや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は以下になります。

 

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

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

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

 

DEMOのソースでいうと、

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

 

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

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

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

14pxとなります。

 

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

 

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

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

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

 

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

 

 

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

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

 

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

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

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ