• ベストアンサー

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

ホームページに文字サイズの変更ボタンを設置しようと考えています。 ボタンとしては「拡大する」と「標準」の2種類にする予定です。 この方法は、JavaScriptで可能なのでしょうか? CSS?? また、どうしてもある部分のテキストだけは、大きさの変更をしたくない(レイアウトが崩れるのを防ぐため)場合の方法も合わせてお願いします。

  • joie
  • お礼率56% (25/44)

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

最近、自治体の公式サイトなどでアクセシビリティの観点から、クリックで文字サイズを切り替えるようなページが増えていますね。 そういうものをイメージしておられるのだと思いますが、合ってますか? だとしたら、CSSとJavaScriptの組み合わせで実現しているものがほとんどです。 具体的には、大きい文字サイズでレイアウトを組んだCSSファイルと、小さい文字サイズでレイアウトを組んだCSSファイルを用意しておいて、JavaScriptを使ってブラウザが使うべきシートを指定している形になります。 ですので、文字サイズを変えたくない場所については、同じ指定にしておいて、サイズを変えるべき本文だけ違うサイズを指定するということも当然可能です。 「CSS 切り替え」のようなキーワードで検索してみるとたくさんヒットします。 例えば http://noongoro.main.jp/note/note0059.html

joie
質問者

補足

> 最近、自治体の公式サイトなどでアクセシビリティの観点から、クリックで文字サイズを切り替えるようなページが増えていますね。 > そういうものをイメージしておられるのだと思いますが、合ってますか? はい、そうです。 あの、文字の変更「大中小」ボタンの「拡大する」と「標準」バージョンです。 なるほど、CSSとJavaScriptの組み合わせなのですね。 キーワード検索の方法まで教えていただき、ありがとうございます。 試してみたら、お知らせしますね。

関連するQ&A

  • 文字サイズ変更ボタンについて教えてください。

    文字サイズ変更ボタンについて教えてください。 大きな表をひとつ作成してその中をメニューボタンやコラムの場所用に分割配置したページを作成しました。ネット上に出ているjqueryをアレンジして、文字サイズボタン作成して動かしてみるのですが、表の中にある文字サイズが変更されません。 表を使用せずにネット上に出ているjsファイルを使用してテストページを作成するとうまく文字サイズが変わってくれるのですが・・・・? 表の中の文字を文字変更ボタンで拡大縮小するのは無理なのでしょうか? どなたか教えてください。

    • ベストアンサー
    • HTML
  • 文字サイズを固定して、一部の文字を変更

    ホームページを作成しています。ページ全体は、テーブルを多用しており、 レイアウトが崩れないように以下のCSSを使って、文字サイズを固定しています。 <style type="text/css"><!-- *{ font-size: 13px; } --> </style> ここで、問題が起きたので、悩んでいます。 一部の文字にサイズを大きくしたいと思って、フォントサイズを変更しようと 思って色々やってみましたが、ダメでした。 どうすれば、一部の文字サイズを自在に変更出来るのでしょうか。

  • 文字サイズを変更してもくずれないレイアウト

    お世話になります。 CSSで文字サイズを「小・中・大」と変更できるサイトはよく見かけるのですが、文字サイズを変更した際に、レイアウト(背景の画像や枠の幅)は同じなので、1行だったものが2行になってしまったりします。 それを回避したサイトを制作するにはどのようにしたら良いでしょうか? 現状の策としましては、 ・CSSを3つ用意し、さらにそのCSSに合わせたレイアウトのHTMLをそれぞれ用意しておく。 ※この場合、ページの進退でそのCSSをそのまま引き継ぐ方法が未解決です。 どなたかご教授いただければと思います。 以上、宜しくお願い致します。

  • アクティブ画像があるフォントサイズ変更ボタン

    こんにちは。 javascriptで、フォントサイズを変更出来るようにしたいです。 「大」「中」「小」という3種類のボタンがあり、デフォルト状態を「中」に設定する予定です。 で、文字サイズを変更したいユーザーが「大」なり「小」なりのボタンをクリックすると文字サイズが変更できるようにしたいのですが、 そのときにそれぞれの文字サイズ変更ボタンのマウスオーバー時とアクティブ時(もし文字サイズの「大」を選んだのならば「大」のアクティブ画像)に画像を変えたいのです。 いろいろ探してはいるのですが、なかなか難しく困っています。。 どなたか方法や参考サイトなどをお教え頂けませんでしょうか。 どうぞよろしくお願い致します。

  • ブラウザの文字サイズ

    お世話になります。 IEなどのブラウザで文字サイズを変更するとき、変更後のサイズをCSSなどを使って、こちら側で設定することはできるのでしょうか? 例えば、文字サイズが「中」なら1.5em、「最大」なら2emなどです。 当方、ホームページを運営しているのですが、文字サイズを「最大」などに変更するとレイアウトが崩れて困っています。よろしくお願いします。

  • Netscape7.1でブラウジングしても文字サイズが変更しない方法

    こんにちは。 Netscape7.1でブラウジングしても文字サイズが 変更しないホームページの作成方法についてお聞きします。 ホームページを作成した際に、CSSを使って 文字サイズの指定をしました。 IEでは、きちんとサイズ固定されていますが、Netscape7.1では、文字サイズの固定ができません。 Netscape7.1でも文字サイズが固定できる よい方法を教えてくださいm(__)m

  • 文字サイズ変更ボタンでサイズが思うように制御できません

    文字サイズ変更ボタンを配置して、下記のhtmlで大中小に変えられるようにしています。 <div><a id="fsize_l" onclick="document.body.style.fontSize='130%'" href="javascript:void(0);"><img src="../../images/b_fsize_l.jpg" alt="文字サイズ 大" width="85" height="25" /></a></div> <div><a id="fsize_m" onclick="document.body.style.fontSize='100%'" href="javascript:void(0);"><img src="../../images/b_fsize_m.jpg" alt="文字サイズ 中" width="19" height="25" /></a></div> <div><a id="fsize_s" onclick="document.body.style.fontSize='70%'" href="javascript:void(0);"><img src="../../images/b_fsize_s.jpg" alt="文字サイズ 小" width="29" height="25" /></a></div> 元々の文字サイズは%で制御しているのですが、大→中(=標準)に戻した時、元々のサイズとは異なるサイズになってしまいます。 どうしてでしょうか? 標準サイズを100%とし、中サイズも100%と記述しています。

    • ベストアンサー
    • HTML
  • 文字サイズ・配色変更ボタンの必要性

    文字サイズ・配色変更ボタンの必要性 職場のHPを今度リニューアルします。 最近、文字サイズやサイト内の配色を変更できるボタンを導入するサイトが増えていますが、実際に視力の悪い方や色の見えにくい方は、あのボタンを使っているのでしょうか? お年寄りから小学生まで見るサイトなので、文字は大きめ(サイズ可変)デザインのかっこよさより読みやすさ重視の配色を心がけています。 私のイメージでは、目の悪い方はもともとブラウザで文字サイズを大きく設定していたり、ウィンドウズ自体をハイコントラストの設定にしていたりすると思うのですが(Macでも白黒反転できますよね)、ボタンを使っているのでしょうか。 目はずっと見えてきていたのに、だんだん視力が下がってきて色んなサイトが見難くなってきている高齢者には有用だったりするのでしょうか? でもそれなら別のサイトに移動したら文字サイズはまた小さくなってしまうわけで、 文字サイズ変更ボタンや色変更ボタンより、ブラウザやモニタの設定の仕方をわかりやすく 書いておくほうが親切かなと思いますし、実際そういうサイトも見かけます。 モニタの色を白黒反転させるのは極端な気がするので(色の見えにくい症状にも種類があるようですし)、 もしかしたら配色変更ボタンはつけたほうがいいのかなぁとも考えています。 画像もCSSで白黒反転しているサイトも見かけましたが、あれは本当に見やすくなっているのでしょうか。

    • ベストアンサー
    • CSS
  • Webページの文字サイズ変更ボタンについて

    下記ページのような文字サイズの変更ボタンは どのように作られているのでしょうか? IEの文字サイズ変更では変えられないように 固定されていますよね? JavaScriptに関するページをいろいろ見たり 本で調べたりしましたがわかりません。 それとも他の技術が使われているのですか? どうぞよろしくお願いいたします。 http://www.gikai.city.edogawa.tokyo.jp/

  • ブラウザの文字のサイズの変更の対応

    IE8を使用しているんですが、”文字のサイズ”を変更すると レイアウトが崩れてしまいます。 他のページをみると (1)サイズにあわせて全体も拡大される (2)サイズの変更を無効?(変更しても変更されない) があるみたいなのですが、 (2)のように、IEで文字のサイズを変更しても、かわらないやりかたを ご存知の方、ご教示ください。 よろしくお願いします。

    • ベストアンサー
    • CSS

専門家に質問してみよう