文字サイズの変更ボタン設置方法

質問

ホームページに文字サイズの変更ボタンを設置しようと考えています。

ボタンとしては「拡大する」と「標準」の２種類にする予定です。
この方法は、JavaScriptで可能なのでしょうか？
CSS？？

また、どうしてもある部分のテキストだけは、大きさの変更をしたくない（レイアウトが崩れるのを防ぐため）場合の方法も合わせてお願いします。

回答No.1

piro19820122 · ベストアンサー

最近、自治体の公式サイトなどでアクセシビリティの観点から、クリックで文字サイズを切り替えるようなページが増えていますね。
そういうものをイメージしておられるのだと思いますが、合ってますか？

だとしたら、CSSとJavaScriptの組み合わせで実現しているものがほとんどです。

具体的には、大きい文字サイズでレイアウトを組んだCSSファイルと、小さい文字サイズでレイアウトを組んだCSSファイルを用意しておいて、JavaScriptを使ってブラウザが使うべきシートを指定している形になります。
ですので、文字サイズを変えたくない場所については、同じ指定にしておいて、サイズを変えるべき本文だけ違うサイズを指定するということも当然可能です。

「CSS 切り替え」のようなキーワードで検索してみるとたくさんヒットします。
例えば http://noongoro.main.jp/note/note0059.html

補足

> 最近、自治体の公式サイトなどでアクセシビリティの観点から、クリックで文字サイズを切り替えるようなページが増えていますね。
> そういうものをイメージしておられるのだと思いますが、合ってますか？

はい、そうです。
あの、文字の変更「大中小」ボタンの「拡大する」と「標準」バージョンです。

なるほど、CSSとJavaScriptの組み合わせなのですね。

キーワード検索の方法まで教えていただき、ありがとうございます。
試してみたら、お知らせしますね。