質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.33%
Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

2回答

160閲覧

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

beam_12k

総合スコア0

Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2025/01/26 06:18

実現したいこと

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

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

ヘッダーにボタンを設置し、それをクリックすることで背景色や文字サイズを変更させるところまでは実装できたのですが、
この状態を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を使う方法が調べたら出てきましたが、自分なりにその方法で書いてみましたが思った挙動になりませんでした。

補足

特になし

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

syoshinsya-

2025/01/26 09:39

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

回答2

0

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

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

投稿2025/01/27 00:35

Lhankor_Mhy

総合スコア37207

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2025/01/27 06:40

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

0

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>

投稿2025/01/27 00:49

yambejp

総合スコア117203

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.33%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問