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

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

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

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

HTML

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

Q&A

1回答

2032閲覧

大・中・小のボタンでサイトの文字サイズ変更をレスポンシブでもしたい

kanifugu

総合スコア1

JavaScript

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

HTML

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

1グッド

0クリップ

投稿2020/07/26 09:26

前提・実現したいこと

今時なんですが、サイトに「大」・「中」・「小」のボタンを設置し
フォントサイズを変える処理を入れております。

それをレスポンシブでも対応したいと考えております。

PC閲覧時では「rem」を指定しフォントサイズを変更しているのですが
スマートフォンサイズでは「vw」を指定していきたいのですが「vw」を使うと文字サイズ変更できず悩んでおります。

該当のソースコード

使用しているJavaScriptです

$(function(){ function initFontSize() { var size = (sessionStorage.getItem('fontSize'))? sessionStorage.getItem('fontSize') : '16'; changeFontSize(size); } function changeFontSize(size){ $('html').css('font-size', size + 'px'); $('[data-font!=' + size + ']').removeClass('active'); $('[data-font=' + size + ']').addClass('active'); sessionStorage.setItem('fontSize', size); } function addListeners() { $('[data-font]').on('click', function(){ changeFontSize($(this).data('font')); }); } function init() { initFontSize(); addListeners(); } init(); });

得られた結果

PC閲覧時では(rem指定)思った通りにフォントが大きくなりますが
スマートフォンでは、ボタンを押しても効かない状態です。

FrontEnd_Japan👍を押しています

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

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

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

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

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

kyoya0819

2020/07/26 10:55

私にはどこにもvwが使われていないように見えるのですが?
kanifugu

2020/07/26 11:16

ご返信ありがとうございます。 またわかりずらく失礼いたしました。 上記JavaScriptを指定した上で、各テキストに「vw」を指定するとフォントが大きくならない。 という意味です。
FrontEnd_Japan

2020/07/27 00:56

>各テキストにvwを指定すると この部分のコードも記載いただかないと解らないです
FrontEnd_Japan

2020/07/27 01:03

SPでもremで指定すれば効くという認識で合っていますか??
guest

回答1

0

ラジオボタンとCSSで処理すればよいのでは?

投稿2020/07/27 01:03

yambejp

総合スコア116724

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

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

yambejp

2020/07/27 01:04 編集

<style> [name="charsize"]{display:none} #dai:checked ~ .wrap{font-size:1.5em;} #sho:checked ~ .wrap{font-size:0.8em;} #dai:checked ~ * [for="dai"], #chu:checked ~ * [for="chu"], #sho:checked ~ * [for="sho"]{font-weight:bold;text-decoration:underline;} </style> <input type="radio" name="charsize" id="dai"> <input type="radio" name="charsize" id="chu" checked> <input type="radio" name="charsize" id="sho"> <div> <label for="dai">大</label> <label for="chu">中</label> <label for="sho">小</label> </div> <div class="wrap"> テスト </div>
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問