よく自治体や官公庁のWEBページに設置されているフォントサイズの変更ボタンを作ってみましょう。
仕組みはいたってシンプルです。すぐに理解できると思います。
HTML, CSS と jQuery の関係について、基礎から学びたい方は以下を参考にしてください。
HTMLとCSSとjQueryの関係を超わかりやすく解説【初心者対象】
ページの文字サイズを変更するボタンを設置する
完成形はこんな感じです
See the Pen
Untitled by taichi (@taichi_na)
on CodePen.
画面右上にフォントサイズを切り替えるボタンを設置しています。これをクリックすると画面全体の文字サイズが切り替わる仕組みになっています。
最近ではあまり見かけない機能ですが、ユニバーサルデザインを考えたときに、結構重要なことなんです。あまりにもデザインコンシャスなサイトが増える中、こういった機能も決して忘れてはいけない、と私は思っています。
おしゃれさよりも、コンテンツを多くの人に伝えることがWEBサイトの使命ですよね！
少し熱くなりましたが、上の例で動きを確認して、さっそく作っていきましょう。
HTML, CSS を書いていきます
See the Pen
Untitled by taichi (@taichi_na)
on CodePen.
ヘッダーにタイトルと文字サイズを変更するためのボタンを配置し、フレックスボックスで横並びにしてあります。
そして下部にメインコンテンツが入っている、というよくある構成ですね。
CSSに、HTML内にはないセレクタが記述されています。
.small {
font-size: 12px;
}
.medium {
font-size: 16px;
}
.large {
font-size: 20px;
}
この３つですが、後ほど jQuery で body のクラスとして付けてあげます。
<body class=”small”> こんな感じですね。もちろん body に対してフォントサイズを指定するとページ全体がそのフォントサイズになってくれます。
そしてそれを切り替えてあげるわけです。
実際にその仕組みを jQuery を使って実装していきましょう。
jQuery を使って body にクラスを付与する
See the Pen
Untitled by taichi (@taichi_na)
on CodePen.
jQuery で行っていく処理は以下のような流れになります。
1. $(“header a”).click(function () {
まずは、ヘッダー内の a 要素がクリックされたときに～、という一文です。
2. $(“body”).removeClass();
もし body にクラスが付いていた場合に、そのクラスを削除します。
なぜなら、body に新たにクラスをつけることによって、文字の大きさを変えていくからです。
3. var size = $(this).html();
変数 size を定義します。this はこのスクリプト内の親要素を指すので、header a です。
その HTML を取得、要するにS,M,Lの文字のいずれかを取得することになります。
4. if (size == “S”) {
$(“body”).addClass(“small”);
ここからは if文 になります。もし変数 size が「S」ならば～ 要するに、Sがクリックされていたのなら、body に class=”small” を付け足します。
5. } else if (size == “M”) {
$(“body”).addClass(“medium”);
Sではなくて、変数 size がMだった場合、body に class=”medium” を付け足します。
6. } else {
$(“body”).addClass(“large”);
}
それ以外だった場合の処理です。要するに、クリックされたのがSでもMでもなかった場合、body に class=”large” を付けます。
そして最後に、return false; をいつものようにつけます。
ページ遷移が伴わない a に対して処理を行う場合にはこれを付けておきましょう。
今回はスクリプトの最後に、「消す命令」を入れませんでした。これまで学んできた例では、最後に「すべて消す」という命令が書かれているケースが多かったと思います。
今回のスクリプトでは序盤に、「今 body についている class を消す」という命令が入っているので、不要ということになります。
まとめ：変数と if文 を組み合わせて複雑な条件に対応させる
See the Pen
Untitled by taichi (@taichi_na)
on CodePen.
今回は変数と if文 を組み合わせた、Java Script っぽいスクリプトでしたね。
最初に変数 size を定義して、それに何が入るのかで条件分岐を作りました。
クラスをあらかじめつけずに、CSSだけを書いておいてそれを jQuery で反映させるというのはこれまでも何度かやりましたね。
addClass() はよく使うメソッドなので、繰り返し使って身につけましょう。
