フォントサイズの切り替え機能について
フォントサイズの指定をremで指定してるんですが、後から拡大機能を付けたいと言われました。ヘッダー、フッターはそのままでコンテンツ部分のみ拡縮させたいんですが、どういう方法が一番効率的でしょうか？
いい案があれば、お願い致します。
JS書く。拡大ボタンをクリックしたらコンテンツ部分のidとか取得して、その中だけのfont-sizeを現在のものから+25%とか、お好きな数字にする。
remで指定してるんでその方法は取れないんですよね。
jsで別のremを割り当てたcssクラスに置き換えるとかじゃダメですか？
remってbodyだかhtml要素で設定したフォントサイズを基準にフォントサイズを相対的に決めるやつ？
:rootかhtmlを基準にする奴です。拡大させたいコンテンツ部分に大きいサイズ用のクラスをJSでつけたところで、コンテンツ内のフォントサイズの指定がrem指定でルート基準なんで、影響されないんですよね。
10pxがルートのフォントサイズとした場合、10px x 1remが10px x 1.5remになったらサイズ変わるんじゃないの？
質問に質問になってしまってるけどー笑
htmlに設定すれば変わるんですが、それだとヘッダー、フッター含むページ全体に影響しちゃうんですよね。
えー、よく分からない。理解不足と知識不足ですまん。。。コンテンツ部分が1remだったとしたら、1.5remに変更すれば、コンテンツ部分だけ文字サイズ大きくなりそうな気がするけど違うんですね。
それだとフォントサイズ指定してるセレクター全部読み取って変更する事になりますよね？コンテンツ部分を1.5remにしたとして、その中のフォントサイズを指定してる箇所に関しては影響うけないんで。
あー、なるほど。コンテンツ部分の親要素だけrem変えても、コンテンツ部分の子要素も結局ルートを基準にしたremだから、コンテンツ部分の親要素のremだけ変えても意味が無いと。
そういう事ですね。
ありがとうございます！トピ主にベストアンサーを上げたいと思います！ピッタリ♩
トピック自体は何も解決してないんで、引続きお願いします。
よし、任せて！じゃー、コンテンツ部分内でフォントサイズ変えたい要素に同じクラスを割り当てて、jsでそれらのクラスのフォントサイズだけ変えた別クラスに一括変更すれば？応急処置的な対応になってしまうけどー！
ってゆーか、ちゃんとremの仕組みを理解してないので勉強します。。。
そこまでするなら、emか%に変更する作業してもあんまかわらなそうですね。
ヘッダー、フッター部分のフォントサイズのみpx指定じゃダメなの？
ヘッダー・フッターをpxにしてhtmlのルートフォントサイズを変更という事でしょうか？
はい
ダメなのかってきいてるんだよ
みんなの回答 4 件
JS書く。
拡大ボタンをクリックしたらコンテンツ部分のidとか取得して、その中だけのfont-sizeを現在のものから+25%とか、お好きな数字にする。
jsで別のremを割り当てたcssクラスに置き換えるとかじゃダメですか？
remってbodyだかhtml要素で設定したフォントサイズを基準にフォントサイズを相対的に決めるやつ？
ヘッダー、フッター部分のフォントサイズのみpx指定じゃダメなの？
ダメなのかってきいてるんだよ
関連するトピックス