ボタンクリックでフォントサイズと背景色を変えて状態を保持する

技術情報
本ページは広告およびアフィリエイトプログラムによる収益を得ています。

Webサイトの要件定義で、たまにフォントサイズや背景色の変更があるかと思います。

今回はボタンクリックでフォントサイズと背景色を変えて、かつ状態を保持する方法をご紹介いたします。

サンプル

ボタンをクリックすると状態が変化します。

サンプルをご覧ください。

サンプル

ソースと解説

ソースはjs、html、cssの3つとなります。

js

「フォントサイズ」と「いろ」に分かれます。

$(function() {

    var key = "font";

    var data = localStorage.getItem(key);

    if (data == "large") {

        $("body").css("font-size", "120%");

        $("#font-size li.large").addClass("current");

    } else if (data == "middle") {

        $("body").css("font-size", "100%");

        $("#font-size li.middle").addClass("current");

    } else if (data == "small") {

        $("body").css("font-size", "80%");

        $("#font-size li.small").addClass("current");

    }

    $("#font-size li").click(function() {

        $("#font-size li").removeClass("current");

        var fontSize = $(this).attr("class");

        if (fontSize == "large") {

            data = "large";

            localStorage.setItem(key, data);

            $("body").css("font-size", "120%");

            $("#font-size li.large").addClass("current");

        } else if (fontSize == "middle") {

            data = "middle";

            localStorage.setItem(key, data);

            $("body").css("font-size", "100%");

            $("#font-size li.middle").addClass("current");

        } else {

            data = "small";

            localStorage.setItem(key, data);

            $("body").css("font-size", "80%");

            $("#font-size li.small").addClass("current");

        }

    });

    $("#color li").click(function() {

        $("body").toggleClass("color");
        $("#color li").toggleClass("current");

        if ($.cookie("color_display")) {

            $.cookie("color_display", '', {


                expires: -1

            });

        } else {

            $.cookie("color_display", '1', {

                expires: 7

            });

        }

    });

    if ($.cookie("color_display")) {

        $("body").toggleClass("color");
        $("#color li").toggleClass("current");

    } else {


    }

});

js解説1

HTML5で実装された「localStorage」というWebStorageを使用しています。ここでキーのセットやスタイルなどの準備を行っています。

※WebStorageに関しては「Web Storage-HTML5のAPI、および、関連仕様」を参照。

    var key = "font";

    var data = localStorage.getItem(key);

    if (data == "large") {

        $("body").css("font-size", "120%");

        $("#font-size li.large").addClass("current");

    } else if (data == "middle") {

        $("body").css("font-size", "100%");

        $("#font-size li.middle").addClass("current");

    } else if (data == "small") {

        $("body").css("font-size", "80%");

        $("#font-size li.small").addClass("current");

    }

js解説2

下記のソースでは「$(“#font-size li”).removeClass(“current”);」で他のサイズのボタンがクリックされたときに、クラスを取り去り、ボタンの状態を変えています。

また、「if (fontSize == “large”)~」で各サイズの状態を判定し、保持しています。

    $("#font-size li").click(function() {

        $("#font-size li").removeClass("current");

        var fontSize = $(this).attr("class");

        if (fontSize == "large") {

            data = "large";

            localStorage.setItem(key, data);

            $("body").css("font-size", "120%");

            $("#font-size li.large").addClass("current");

        } else if (fontSize == "middle") {

            data = "middle";

            localStorage.setItem(key, data);

            $("body").css("font-size", "100%");

            $("#font-size li.middle").addClass("current");

        } else {

            data = "small";

            localStorage.setItem(key, data);

            $("body").css("font-size", "80%");

            $("#font-size li.small").addClass("current");

        }

    });

js解説3

ここからは「いろ」の記述になります。「#color li」がクリックされたときにhtmlの「body」に「color」というクラス加えて、背景色とフォントの色を変えます。

また、「if ($.cookie(“color_display”))~」でクッキーに状態を保存しています。

    $("#color li").click(function() {

        $("body").toggleClass("color");
        $("#color li").toggleClass("current");

        if ($.cookie("color_display")) {

            $.cookie("color_display", '', {

                expires: -1

            });

        } else {

            $.cookie("color_display", '1', {

                expires: 7

            });

        }

    });

js解説4

下記の記述でクッキーの状態を判定し、背景色とフォントの色の状態を保持しています。

    if ($.cookie("color_display")) {

        $("body").toggleClass("color");
        $("#color li").toggleClass("current");

    } else {


    }

html

フォントサイズ、色、テキストの部分に分かれます。

<ul id="font-size">
    <li class="large"><a href="javascript:void(0);"><span>大</span></a></li>
    <li class="middle"><a href="javascript:void(0);"><span>中</span></a></li>
    <li class="small"><a href="javascript:void(0);"><span>小</span></a></li>
</ul>

<ul id="color">
    <li><a href="javascript:void(0);"><span>いろ</span></a></li>
</ul>

<p>
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>

html解説1

フォントサイズの部分です。「大」、「中」、「小」に分かれています。js用に「id=”font-size”」を使用しています。

また、ボタン画像をスライドさせるためにa要素を使用しています。「<span>」要素を使用している理由は後ほど解説します。

<ul id="font-size">
    <li class="large"><a href="javascript:void(0);"><span>大</span></a></li>
    <li class="middle"><a href="javascript:void(0);"><span>中</span></a></li>
    <li class="small"><a href="javascript:void(0);"><span>小</span></a></li>
</ul>

html解説2

いろの部分です。js用に「id=”color”」を使用しています。

また、ボタン画像をスライドさせるためにa要素を使用しています。「<span>」要素を使用している理由は後ほど解説します。

<ul id="color">
    <li><a href="javascript:void(0);"><span>いろ</span></a></li>
</ul>

html解説3

テキストの部分です。色を変更した時、わかりやすくするために記述しました。

<p>
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>

css

デフォルトの打ち消しと、フォント、ボタン、カラーのスタイルに分かれます。

ul,li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

h1 {
    font-size: 160%;
}

p {
    font-size: 100%;
}

#font-size li,
#color li {
    position: relative;
    z-index: 3;
    margin-bottom: 10px;
}

#font-size li a,
#color li a {
    display: block;
}

#font-size li,
#font-size li a,
#color li,
#color li a {
    width: 50px;
    height: 33px;
}

#font-size li span,
#color li span {
    position: relative;
    z-index: -1;
}

#font-size li.large a {
    background: url("./btn_large.png") no-repeat;
}

#font-size li.large a:hover,
#font-size li.large.current a {
    background: url("./btn_large.png") no-repeat -50px 0;
}

#font-size li.middle a {
    background: url("./btn_middle.png") no-repeat;
}

#font-size li.middle a:hover,
#font-size li.middle.current a {
    background: url("./btn_middle.png") no-repeat -50px 0;
}

#font-size li.small a {
    background: url("./btn_small.png") no-repeat;
}

#font-size li.small a:hover,
#font-size li.small.current a {
    background: url("./btn_small.png") no-repeat -50px 0;
}

#color li a {
    background: url("./btn_color.png") no-repeat;
}

#color li a:hover,
#color li.current a {
    background: url("./btn_color.png") no-repeat -50px 0;
}

body.color {
    background: #000;
    background-color: #000;
}

body.color h1,
body.color p {
    color: #FFF !important;
}

css解説1

デフォルトのスタイルを打ち消しています。

ul,li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

css解説2

初期表示のh1とpのフォントサイズを決めています。

h1 {
    font-size: 160%;
}

p {
    font-size: 100%;
}

css解説3

フォントとカラーで使用している「li」の基本プロパティです。「position: relative;」と「z-index: 3;」で「li」の「span」要素を後ろに表示する準備をしています。

#font-size li,
#color li {
    position: relative;
    z-index: 3;
    margin-bottom: 10px;
}

css解説4

a要素の背景でボタン画像を出すために「display: block;」を指定しています。

#font-size li a,
#color li a {
    display: block;
}

css解説5

ボタン画像を背景で出すためにa要素に幅と高さを指定し、「li」のクリック範囲をボタン画像と同じにしています。

#font-size li,
#font-size li a,
#color li,
#color li a {
    width: 50px;
    height: 33px;
}

css解説6

「position: relative;」と「z-index: -1;」でspan要素(「大」、「中」、「小」、「いろ」のテキスト)を「li」の後ろに表示しています。

htmlで記述している「span」要素は、テキストを画像の後ろに表示するためにあります。

#font-size li span,
#color li span {
    position: relative;
    z-index: -1;
}

css解説7

フォントサイズを変更する「大」、「中」、「小」のボタン画像を表示しています。

a要素の「:hover」疑似要素でカーソルがボタン上に重なったときに、ボタン画像を変更しています。

「.current」はボタンの状態を保持するためのクラスです。「hover」と同じ内容なので「,(カンマ)」でまとめています。

#font-size li.large a {
    background: url("./btn_large.png") no-repeat;
}

#font-size li.large a:hover,
#font-size li.large.current a {
    background: url("./btn_large.png") no-repeat -50px 0;
}

#font-size li.middle a {
    background: url("./btn_middle.png") no-repeat;
}

#font-size li.middle a:hover,
#font-size li.middle.current a {
    background: url("./btn_middle.png") no-repeat -50px 0;
}

#font-size li.small a {
    background: url("./btn_small.png") no-repeat;
}

#font-size li.small a:hover,
#font-size li.small.current a {
    background: url("./btn_small.png") no-repeat -50px 0;
}

ボタン画像はすべて同じサイズで、下記の画像のようになっています。

カーソルがa要素に重なったときに、スライドさせるため、通常とクリックされたときの状態を一個の画像としています。

上記CSSにある「-50px」はボタンをスライドさせる部分の横幅に当たります。

フォントサイズ大のボタン画像

css解説8

「いろ」のボタン部分になります。内容はフォントの部分と同じです。

#color li a {
    background: url("./btn_color.png") no-repeat;
}

#color li a:hover,
#color li.current a {
    background: url("./btn_color.png") no-repeat -50px 0;
}

css解説9

「body」に「color」というクラスが加えられたときに、背景色とテキストの色を変えています。

「!important」はh1やpのエレメントで色指定をされている場合を考慮し、記述をしています。bodyにも必要であれば記述します。

色を変えるエレメントを追加する場合は、h1やpの後に「,(カンマ)」で追加したい要素を追記していく形になります。

body.color {
    background: #000;
    background-color: #000;
}

body.color h1,
body.color p {
    color: #FFF !important;
}

全ソース

jqueryは「jquery-1.11.3.min.js」と「jquery.cookie.js」を使用しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>
    ボタンクリックでフォントサイズと背景色を変えて状態を保持する
</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript">
$(function() {

    var key = "font";

    var data = localStorage.getItem(key);

    if (data == "large") {

        $("body").css("font-size", "120%");

        $("#font-size li.large").addClass("current");

    } else if (data == "middle") {

        $("body").css("font-size", "100%");

        $("#font-size li.middle").addClass("current");

    } else if (data == "small") {

        $("body").css("font-size", "80%");

        $("#font-size li.small").addClass("current");

    }

    $("#font-size li").click(function() {

        $("#font-size li").removeClass("current");

        var fontSize = $(this).attr("class");

        if (fontSize == "large") {

            data = "large";

            localStorage.setItem(key, data);

            $("body").css("font-size", "120%");

            $("#font-size li.large").addClass("current");

        } else if (fontSize == "middle") {

            data = "middle";

            localStorage.setItem(key, data);

            $("body").css("font-size", "100%");

            $("#font-size li.middle").addClass("current");

        } else {

            data = "small";

            localStorage.setItem(key, data);

            $("body").css("font-size", "80%");

            $("#font-size li.small").addClass("current");

        }

    });

    $("#color li").click(function() {

        $("body").toggleClass("color");
        $("#color li").toggleClass("current");

        if ($.cookie("color_display")) {

            $.cookie("color_display", '', {

                expires: -1

            });

        } else {

            $.cookie("color_display", '1', {

                expires: 7

            });

        }

    });

    if ($.cookie("color_display")) {

        $("body").toggleClass("color");
        $("#color li").toggleClass("current");

    } else {


    }

});
</script>
<style type="text/css">
ul,li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

h1 {
    font-size: 160%;
}

p {
    font-size: 100%;
}

#font-size li,
#color li {
    position: relative;
    z-index: 3;
    margin-bottom: 10px;
}

#font-size li a,
#color li a {
    display: block;
}

#font-size li,
#font-size li a,
#color li,
#color li a {
    width: 50px;
    height: 33px;
}

#font-size li span,
#color li span {
    position: relative;
    z-index: -1;
}

#font-size li.large a {
    background: url("./btn_large.png") no-repeat;
}

#font-size li.large a:hover,
#font-size li.large.current a {
    background: url("./btn_large.png") no-repeat -50px 0;
}

#font-size li.middle a {
    background: url("./btn_middle.png") no-repeat;
}

#font-size li.middle a:hover,
#font-size li.middle.current a {
    background: url("./btn_middle.png") no-repeat -50px 0;
}

#font-size li.small a {
    background: url("./btn_small.png") no-repeat;
}

#font-size li.small a:hover,
#font-size li.small.current a {
    background: url("./btn_small.png") no-repeat -50px 0;
}

#color li a {
    background: url("./btn_color.png") no-repeat;
}

#color li a:hover,
#color li.current a {
    background: url("./btn_color.png") no-repeat -50px 0;
}

body.color {
    background: #000;
    background-color: #000;
}

body.color h1,
body.color p {
    color: #FFF !important;
}
</style>
</head>
<body>

<h1>
    ボタンクリックでフォントサイズと背景色を変えて状態を保持する
</h1>

<ul id="font-size">
    <li class="large"><a href="javascript:void(0);"><span>大</span></a></li>
    <li class="middle"><a href="javascript:void(0);"><span>中</span></a></li>
    <li class="small"><a href="javascript:void(0);"><span>小</span></a></li>
</ul>

<ul id="color">
    <li><a href="javascript:void(0);"><span>いろ</span></a></li>
</ul>

<p>
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</body>
</html>

まとめ

  • ソースはjs、html、cssの3つ。
  • フォントサイズの保持にはHTML5で実装された「localStorage(WebStorage)」を使用。
  • 背景色の保持にはクッキーを使用。
  • 「position: relative;」でspan要素(ボタンのテキスト)を後ろに表示。
  • ボタン画像は通常とクリック時の一個にまとめ、a要素の「:hover」でスライドで表示。
  • h1とpの色変更の指定は「!important」で強く行っている。
  • jqueryは「jquery-1.11.3.min.js」と「jquery.cookie.js」を使用。

。フォントサイズの動作におもしろそうだったので「localStorage」を使ってみました。「position: relative;」と「z-index」で「大」、「中」、「小」などのテキストを画像の後ろに表示する方法ですが、画像が透過するタイプだとテキストが見えてしまうという問題があります。

画像が透過する場合は、「display: none;」でテキストを非表示にする、「text-indent: -9999;」で画面外に飛ばすなどの方法が必要になります。

カレント画像に関しては、スライド方式を行わない場合、imgのsrcを変更し、カレントの画像を表示するなどの方法が必要になります。

みなさんはどういった感じで実装されるでしょうか。「もっとスマートにできるよ!」といった意見があればコメントなどいただければと思います。

スポンサーリンク
技術情報
スポンサーリンク
シェアする
ボヘミアンをフォローする
この記事が気に入ったら
フォローしよう
最新情報をお届けします。
スポンサーリンク

コメント