【HTML,CSS,jQuery】ボタンで切り替えた背景色、文字サイズをページが遷移しても保持したい。

実現したいこと

よく自治体サイトであるような背景色、文字サイズ拡大ボタンを設置し、
ページが遷移してもその状態が保持されるよう実装したいです。

発生している問題・分からないこと

ヘッダーにボタンを設置し、それをクリックすることで背景色や文字サイズを変更させるところまでは実装できたのですが、
この状態をcookieを利用してページ遷移した場合にも保持させるというところで躓いています。

背景色変更ボタンは、style_dummy.cssという空のCSSファイルを切り替えています。
以下ソースコードの内容にCookieに値を保存させる記述はどのようになるのでしょうか。

該当のソースコード

index.html
1<!DOCTYPE html>
2<html>
3
4<head>
5    <meta charset="utf-8" />
6    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
7    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
8    <title>閲覧支援機能デモ</title>
9    <meta name="description" content="【ページの説明文】" />
10    <meta name="robots" content="index,follow" />
11    <link rel="stylesheet" href="css/style.css" />
12    <link id="changeStyle" rel="stylesheet" href="css/style_dummy.css" />
13    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
14</head>
15
16<body>
17    <div class="inner">
18        <ul class="support_list">
19            <li class="support_size_btn">
20                <ul>
21                    <li class="size_btn"><button class="medium" type="button">標準</button></li>
22                    <li class="size_btn"><button class="large" type="button">拡大</button></li>
23                </ul>
24            </li>
25            <li class="support_bgcolor_btn">
26                <ul>
27                    <li class="bg_btn"><button class="colorWht">白</button></li>
28                    <li class="bg_btn"><button class="colorBlk">黒</button></li>
29                    <li class="bg_btn"><button class="colorBlu">青</button></li>
30                </ul>
31            </li>
32        </ul>
33        <div class="container">
34            <p>ここに本文が入ります。文字サイズ・色、背景色が選択したボタンによって変わります。</p>
35        </div>
36    </div>
37
38    <script src="js/function.js"></script>
39</body>
40
41</html>

style.css
1@charset "utf-8";
2
3html {
4    font-size: 62.5%;
5    background-color: #fff;
6    color: #000;
7}
8.inner {
9    width: 1100px;
10    margin: 0 auto;
11}
12
13.support_list {
14    list-style: none;
15    display: flex;
16}
17.support_list > li > ul {
18    display: flex;
19    list-style: none;
20}
21.support_list > li > ul > li > button {
22    background-color: #fff;
23    border-right: none;
24    cursor: pointer;
25    font-size: 1.6rem;
26}
27.support_list > li > ul > li:last-child > button {
28    border-right: 2px solid #000;
29}
30.support_bgcolor_btn .colorBlk {
31    color: #fff;
32    background-color: #000;
33}
34.support_bgcolor_btn .colorBlu {
35    color: #ee0;
36    background-color: #47e;
37}
38
39p {
40    font-size: 1.6rem;
41}

style_black.css
1@charset "utf-8";
2
3html {
4    background-color: #000;
5    color: #fff;
6}
7.support_list > li > ul > li > button {
8    background-color: #000;
9    color: #fff;
10    border-top: 2px solid #fff;
11    border-right: none;
12    border-bottom: 2px solid #fff;
13    border-left: 2px solid #fff;
14}
15.support_list > li > ul > li:last-child > button {
16    border-right: 2px solid #fff;
17}
18.support_bgcolor_btn .colorBlk {
19    color: #fff;
20    background-color: #000;
21}
22.support_bgcolor_btn .colorBlu {
23    color: #fff;
24    background-color: #000;
25}
26
27

style_blue.css
1@charset "utf-8";
2
3html {
4    background-color: #47e;
5    color: #ee0;
6}
7.support_list > li > ul > li > button {
8    background-color: #47e;
9    color: #ee0;
10    border-top: 2px solid #ee0;
11    border-right: none;
12    border-bottom: 2px solid #ee0;
13    border-left: 2px solid #ee0;
14}
15.support_list > li > ul > li:last-child > button {
16    border-right: 2px solid #ee0;
17}
18.support_bgcolor_btn .colorBlk {
19    color: #ee0;
20    background-color: #47e;
21}
22.support_bgcolor_btn .colorBlu {
23    color: #ee0;
24    background-color: #47e;
25}

fnuction.js
1$(function(){
2
3    // 文字サイズ変更ボタン
4    var body = $("body");
5    $(".medium").click(function(){
6        $("html").css("font-size","62.5%");
7        body.removeClass("font_large");
8    });
9    $(".large").click(function(){
10        $("html").css("font-size","100%");
11        body.addClass("font_large");
12    });
13
14    // 背景色変更ボタン
15    var elem = document.getElementById("changeStyle");
16    $(".colorWht").on("click", function(){
17        elem.href = "css/style_dummy.css";
18    });
19    $(".colorBlk").on("click", function(){
20        elem.href = "css/style_black.css";
21    });
22    $(".colorBlu").on("click", function(){
23        elem.href = "css/style_blue.css";
24    });
25});

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

jquery.ookie.jsを使う方法が調べたら出てきましたが、自分なりにその方法で書いてみましたが思った挙動になりませんでした。

補足

特になし

syoshinsya-

2025/01/26 09:39

質問ないのソースコードにはcookieを扱う部分がありません。サーバーサイドでcookieの設定を行いたいと言うことでしょうか？下記の記載があるので、ユーザーのブラウザないで実行されるJSで設定するのかと思っていました… > jquery.ookie.jsを使う方法が調べたら出てきましたが、自分なりにその方法で書いてみましたが思った挙動になりませんでした。もしそうなのであれば、試したと言うソースコードを記載すると回答しやすいです。

行動規範の内容に同意します

回答2件

ローカルストレージを使った方が楽かもしれません。

課題：文字色と背景色をローカルストレージに保存する | code集

投稿2025/01/27 00:35

Lhankor_Mhy

総合スコア37345

yambejp

2025/01/27 06:40

今回のケースだとlocalStorageの方が楽でしょうね →サーバーにデータを送らなくてもよい（クッキーはサーバーに送られる） →設定に期限を設定しないでよい（クッキーは基本的にデータに期限を設定する） →samesiteなどセキュリティ対応が不要という条件があうならlocalStorageを優先案としてみてください

行動規範の内容に同意します

jQueryのcookieはあまり機能がよくないのでjs-cookieを利用ください

まずCSS
style_dummy.css

css
1body{background-Color:whte;}

style_black.css

css
1body{background-Color:black;color:white;}

style_blue.css

css
1body{background-Color:blue;color:yellow;}

として
prev.html

html
1<link rel="stylesheet" href="style_dummy.css" id="changeStyle" />
2<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
3<script>
4window.addEventListener('DOMContentLoaded',()=>{
5  const defaultCSS='style_dummy.css'
6  const href=Cookies.get('bgcolorhref')??defaultCSS;
7  changeStyle.href=href;
8});
9document.addEventListener('click',({target})=>{
10  if(target.matches('.colorWht,.colorBlk,.colorBlu')){
11    const href=target.value;
12    changeStyle.href=href;
13    Cookies.set('bgcolorhref',href);
14  }
15});
16</script>
17<button type="button" class="colorWht" value="style_dummy.css">white</button>
18<button type="button" class="colorBlk" value="style_black.css">black/button>
19<button type="button" class="colorBlu" value="style_bluecss">blue</button>
20<a href="next.html">next</a>

next.html

html
1<link rel="stylesheet" href="style_dummy.css" id="changeStyle" />
2<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
3<script>
4window.addEventListener('DOMContentLoaded',()=>{
5  const defaultCSS='style_dummy.css'
6  const href=Cookies.get('bgcolorhref')??defaultCSS;
7  changeStyle.href=href;
8});
9document.addEventListener('click',({target})=>{
10  if(target.matches('.colorWht,.colorBlk,.colorBlu')){
11    const href=target.value;
12    changeStyle.href=href;
13    Cookies.set('bgcolorhref',href);
14  }
15});
16</script>
17<button type="button" class="colorWht" value="style_dummy.css">white</button>
18<button type="button" class="colorBlk" value="style_black.css">black/button>
19<button type="button" class="colorBlu" value="style_bluecss">blue</button>
20<a href="prev.html">prev</a>