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

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解説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解説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;
}