プログラムは「習うより慣れよ」と思っているので、さっそくjQueryを使ってなにか作ってみることにします。簡単に作れそうなもので、かつ実用性があるものが良いだろうと思い、最近色々なところで目にするようになった「フォントスイッチャー」を作ってみました。文字の大きさが切り替えられるアレです。

今回は予めcss側で異なるフォントサイズを指定したクラスを用意しておき、jQueryによって特定のタグのクラスを切り替えます。今回はbody要素にfontL、fontM、fontSというクラスを付与することにします。ｃｓｓでの指定は以下の通り

プログラムは「習うより慣れよ」と思っているので、さっそくjQueryを使ってなにか作ってみることにします。簡単に作れそうなもので、かつ実用性があるものが良いだろうと思い、最近色々なところで目にするようになった「フォントスイッチャー」を作ってみました。文字の大きさが切り替えられるアレです。

今回は予めcss側で異なるフォントサイズを指定したクラスを用意しておき、jQueryによって特定のタグのクラスを切り替えます。今回はbody要素にfontL、fontM、fontSというクラスを付与することにします。ｃｓｓでの指定は以下の通り

前段階・準備

body.fontL #ContentsArea{
	font-size:115%;
}
body.fontM #ContentsArea{
	font-size:100%;
}
body.fontS #ContentsArea{
	font-size:80%;
}

私のサイトの場合ContentsAreaというDiv要素で、文章の部分を囲っているので上記のように書いています。CSSの「継承」を用いた方法ですので、個別の要素に絶対指定でフォントを指定している場合は上手く動かないかもしれません。

次ぎにクリックさせる要素ですが、これは普通に<a>タグを用います。jQueryの場合、特定の要素にイベントの付与(クリックとか、マウスオーバー)とかもできるのですが、ここでは普通に下記のようにしました。

<ul>
<li><a href="#" class="sizeL">フォントを大にする</a></li>
<li><a href="#" class="sizeM">フォントを中にする</a></li>
<li><a href="#" class="sizeS">フォントを小にする</a></li>
</ul>

jQueryで要素を指定する

さて、ここまでは全然プログラムのお話ではないので簡単かと思います。次はいよいよjQueryの書き方です。
jQueryの基本は$()です。考え方はCSSに似ています。$()を使って、特定の要素を指定しその後に処理を書くというやりかたです。ここでは<a>というタグのうち、class＝sizeLのものだけを取り出したい場合下記のように書きます。

$("a.sizeL")

「a.sizeL」というのはCSSで指定するのと全く同じですね。それもそのはず、jQueryは通常のCSSの指定をサポートしているからです。通常のDOMを指定するためにはgetElementById()などを使いますが、jQueryでは一切使う必要がありません。

さて、この<a>タグがクリックされたときにプログラムを実行したいのでした。それには「クリックされたとき」というイベントを書いてあげる必要があります。

$("a.sizeL").click

上に書いたように.clickだけでOKです。HTMLの<a>にonClickと書かなくても良いのです。つまりJavaScriptとHTMLを分離し、クリーンなHTMLを保ったまま機能を付加できるというわけです。これもjQueryの特徴の一つです。

クリックしたらクラスを付加する

クリックしたら、その後に実行したい処理を書きます。ここではbody要素に新たにクラスを付加します。クラスを付加するには.addClassを使います。最終的には下記のようなコードになります。

$(function(){
  $("a.sizeL").click(function(){
  $("body").addClass("fontL");
  return false;
  });
});

これでとりあえずプログラムが動くようになりました。「フォントを大にする」をクリックすると全体のフォントサイズが大きくなります。さらに、小、中をクリックしたときに変化するようにするためには下記のように書きます。

$(function(){
  $("a.sizeL").click(function(){
  $("body").removeAttr("class");
  $("body").addClass("fontL");
  return false;
  });
  $("a.sizeM").click(function(){
  $("body").removeAttr("class");
  $("body").addClass("fontM");
  return false;
  });
  $("a.sizeS").click(function(){
  $("body").removeAttr("class");
  $("body").addClass("fontS");
  return false;
  });
});

removeAttr(”class”)と書いているのは一度付加したクラスを消すためです。何故なら、これが無いと永久にクラスを付加し続けることになってしまい、プログラムが上手く動きません。一度クラスを消してリセットしているわけです。

とりあえず、これでjQueryでフォントサイズを変えることができました。

• フォントサイズ切替のデモはこちら

あとはこれにクッキー機能を付ければ、一度ブラウザを閉じても同じ指定フォントで見ることができます。フォントサイズ切替のやり方は他にも色々とあると思うので、もっと良いやり方がありましたら是非教えて下さいませm(_ _)m

関連エントリー

• 透過pngをIE6で使う方法いろいろとjQueryプラグイン
• 使えそうなjQueryプラグイン
• シマシマなテーブルをjQueryで作る
• コーディングコンテストの種明かし
• jQueryを使ってCSS切替機能を実装
• jQueryを使ったアコーディオンメニュー
• jQueryでクロスフェードをやってみる
• IE6で隣接セレクタを使うには
• 画像置換とSEOスパムの境界線
• ブラウザ間の差異をなくすCSSリセット

• Category
  • Ajax
  • CSS
  • jQuery
• 5 件のコメント

現在、この記事へのトラックバックは受け付けていません。