• ベストアンサー

HP上で文字サイズを変更できるようにするには・・・・。

実は視覚障害者や弱視の方を対象とした ホームページを作ろうと取り組んでいるのですが、 下記のサイトのようにJavaScript+HTML+CSSで 文字サイズなどを変更できる機能を作りたいのです。 何か参考になるサンプル・書籍・HPなどございましたら教えていただければ幸いです。 またこの場で教えてくれる方がいれば助かります。 http://www.ssct.co.jp/

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

  • ベストアンサー
noname#19175
noname#19175
回答No.4

> 文字サイズなどを変更できる機能を作りたいのです。 それぞれのデザインに合わせたCSSファイルをそれぞれ作成しておき、 <link>のhrefやdisabledを切り替える、という方法でできます。 スクリプトは参考URLやANo.2のURLをご覧ください。 > http://www.ssct.co.jp/​ (こちらのページではその目的のために作られたわけではないと思いますが) こんな色にしていれば、「文字、コントラスト設定」の文字が読めるとは思えませんし、読めないボタン(セレクトフィールド)を押したり変更できるとは思えません。 それをふまえて「誰にでも」使いやすいボタンを設置できる自信がおありなら、それでも良いと思いますが、、、 ブラウザの設定で文字サイズを変更できるようになっていますし、 独自のスタイルにすることも出来ますので、むしろそちらを推奨します。 色の設定については、Operaの「表示」メニュー -> 「スタイル」 -> 「ユーザーモード」 から、高コントラスト表示やアクセシビリティレイアウトなどが参考になると思います。 http://jp.opera.com/ また、こちらのColorDoctorが参考になると思います。 http://jp.fujitsu.com/about/design/ud/assistance/

参考URL:
http://critical.s6.xrea.com/web/cssselect.shtml
tubasa101
質問者

お礼

ぜひ試してみます。 丁寧なご回答いただきありがとうございます。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (3)

  • fire--
  • ベストアンサー率49% (146/293)
回答No.3

どうしてもhtml上でやる必要があるのでしょうか。 ブラウザはIEにしてもfirefoxにしても、通常使うものは メニュー(の表示)やキー操作で文字サイズを変えられるように なっています。 その説明をホームページに入れておけば、それを読んだ方は あなたのホームページ以外でもサイズを変更できるようになります。

tubasa101
質問者

お礼

ご回答いただきありがとうございました。 確かにブラウザ上でも設定はできますが、 最初に説明文を書くスペースが無いため タグ上に埋め込もうと思いました。

全文を見る
すると、全ての回答が全文表示されます。
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

http://okwave.jp/kotaeru.php3?qid=1428297 みたいな感じで <link…> を使ったスタイルシートを、タグに指定したID を使って切り換えられると思います。

tubasa101
質問者

お礼

早速試してみます。 ご回答いただきありがとうございます。

全文を見る
すると、全ての回答が全文表示されます。
noname#20941
noname#20941
回答No.1

以下のページで「文字拡大ツール」というのを配布されています。ブログツールということですが、以下のページのサイトトップでも使用されているので、普通のホームページでも機能するのではないかと思います。

参考URL:
http://www.50ism.com/blogsize/
tubasa101
質問者

お礼

ご回答ありがとうございます。 上記の文字拡大ツールは音声ブラウザが対応していないため使用できないと思います。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • HP作成のための資料は何がいいか

     お世話になっております。  HPを作成するために、勉強を始めました。  『できるホームページ HTML&CSS入門』(インプレスジャパン 2011年1月出版)で  勉強していますが、まったくの初心者向けでおおまかなためあまり詳しくないので  もう少し参考になる本を購入しようと思っています。  ここでの過去の同じような質問と回答を拝見したところ、  『ホームページ辞典 HTML・CSS・JavaScript 第5版』(アンク 2012年3月出版)か  『HTMLタグ辞典+CSS 第7版』(アンク 2012年7月出版)のどちらかが  いいのかなぁと思いました。  現在、この2冊の古い版の本を図書館で借りていますが  HTML、XHTML、CSS、Javascriptを網羅してわかりやすい資料がないか探しています。  おすすめの資料がありましたら、教えてください。  よろしくお願いいたします。

  • JavaScriptを1から勉強したいのですが。

    こんにちは。 当方、1からJavaScriptを勉強したいと思っています。ただ、その勉強する理由はいずれPHPをホームページ内に埋め込んでいきたいと思っていまして、そのためのプログラミング言語の入門としては、JavaScriptがよいと聞いたことがあります。そのために、プログラミングの初歩としてJavaScriptから入っていきたいと思っています。 そこで、そういった基礎を学べるような書籍をぜひ教えていただきたいと。 ちなみに、HTML、CSSは大体タグ打ちできます。ソフトは、DreamweaverとFireworksを使っています。JavaScriptはサンプルなどから引っ張ってきて、それを変更したりして、今までホームページ内に埋め込んでいました。 よろしくお願いします。

  • HPの文字の大きさを変えるCSSがうまくいきません

    ネット上によく出ているjsやcssを利用した文字サイズを変える方法を、ソースを取り込んでみるのですががうまくできません。 初心者なので、かわかり易く教えていただると助かります。 尚、styleswitcher.jsはダウンロード済です。 ソースは、 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="style1.css" title="style1"> <link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2"> <link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3"> <script type="text/javascript" src="styleswitcher.js"></script> <style type="text/css"> style1.css body {font-size: 100%;} style2.css body {font-size: 80%;} style3.css body {font-size: 120%;} </style> <title></title> </head> <body> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style2'); return false;">サイズ小</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style1'); return false;">サイズ中</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style3'); return false;">サイズ大</a> <br> <br> テスト<br> </body> </html> よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • Javascriptを用いて文字サイズを変更可能にするには

    ブラウザの『文字のサイズ』からではなく、Javascriptを用いてフォントサイズを変更させたいのですが、うまくいきません。 HTML紹介サイトにて、類似のものを見付けたのですが、こちらはボタンを使っています。文字リンク(<a href="javascript:fontsize1()">文字を大きく</a>のように)でフォントサイズを変えることは出来ないのでしょうか。 http://l-c.moo.jp/mozi40.htm ご存知の方がおられましたら、どうかご回答下さい。

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

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

  • 文字サイズの大中小について

    お世話になります。 今、ホームページを作成しているのですが… ホームページ上で、文字のサイズを簡単に切り替えられる様にしようと思い、探してみたところ、styleswitcher.jsというJavascriptがあったので貰ってきました。 http://alistapart.com/stories/alternate/ ここからstyleswitcher.jsをいただいてきました。 文字の大きさが大、中、小になるように.cssファイルを3つ作り、拡張子.cssはcssフォルダに、拡張子.jsはjsフォルダに分けていれています。 <head> <script type="text/javascript" src="js/styleswitcher.js"></script> <link href="css/main_small.css" rel="stylesheet" type="text/css" title="small" /> <link href="css/main_normal.css" rel="stylesheet" type="text/css" title="normal" /> <link href="css/main_large.css" rel="stylesheet" type="text/css" title="large" /> </head> という風に、ヘッダーのところにリンクを貼りました。 IE、Firefox、Opera、safari(windows用)では、動作確認が出来たのですが、NN7だけが動きませんでした。 設定を確認したところ、Javascriptを有効にするにはチェックがついていました。 設定のところでOKを押してから、切り替えボタンを押すと文字サイズが切り替えられるのですが、違うページに移動してしまうとその機能は動きません。 正直、Javascriptについての知識は全くなく、何がおかしいのか検討も付きません。 googleで何か情報がないか探してみたのですが、Firefoxに問題がある文章はいくつか見かけたのですが、NNに関する情報は見つけられませんでした。 各ブラウザにもいろいろ特徴があるから、動かなくても仕方ないのかな? でも、NNユーザーの為にも何とかしたいなぁと思いますし、一体どうしたら良いのか困ってます。 大変申し訳ないのですが、どなたかアドバイスをいただけませんでしょうか?よろしくお願いします。

  • 文字のサイズ変更について

    ホームページ作成初心者です。 javaにてホームページの文字サイズを制御しています。 Javaは <script type="text/javascript"><!-- fsize = 12; function sizesetpt(val){ document.body.style.fontSize = val + "px"; var tds=document.getElementsByTagName("td"); for(var i=0;i<tds.length;i++){ tds[i].style.fontSize = val + "px"; } } //--> </script> という風に書いています。 HTML内に <form action=""> <img src="image/small.gif" width="28" height="28" onclick=""sizesetpt(10)"> <img src="image/middle.gif" width="28" height="28" onclick=""sizesetpt(12)"> <img src="image/big.gif" width="28" height="28" onclick=""sizesetpt(14)"></form> と書いています。 一応問題無く動いていますが、可能であれば 「今は小サイズの文字で見ていますよ」というのがわかるように 小サイズ表示になっている時には文字小のボタン画像を別の画像に変更したいと思っています。 (例) 白地に黒字の「小」ボタン(画像)を押す ↓ ページが文字小サイズ表記になる ↓ その時はボタンは黒地に白字の「小」ボタン(画像)になっている そのような操作はできるのでしょうか? もし出来るのであればやり方をお教え頂けると助かります。 イメージとしては以下のサイトのような感じです。 もっと複雑なjavaやCSSを使うのでしょうか? http://www.n-kankyo.com/ よろしくお願いします。

  • ページ全体の拡大/縮小が行える、JavaScriptのサンプルを教えていただけますでしょうか?

    ページ全体の拡大/縮小をJavaScriptにて行いないたい(対象はIEのみ)のですが、検索をしてみると、「文字サイズの拡大/縮小」や「画像の拡大/縮小」はよく見つかるのですが、ページ全体の拡大/縮小のサンプルを掲載しているページはあまり見かけません。 検索("ページ ズーム javascript"等のキーワードで)で何件か見つかって、試してはみたのですが、それらのプログラムですと、私のほうのHTML+CSSで使用すると、何とも説明しがたいおかしな挙動をしてしまいます。HTML+CSSの見直しも色々行ってみたのですが、なかなか改善されません。 みなさんがご存知のJavaScriptのサンプル(ページ全体の拡大/縮小)が掲載されているURLを教えていただけますでしょうか? 教えていただいたサンプルを実装し、色々探ってみたいと思っています。 ※ちなみに、イメージは↓このような感じです。 http://appleworld.com/4tr/

  • CSSなどでページ全体のテキストサイズを変更する

    皆様こんにちは。 HTMLでサイズ指定されたテキストサイズを CSSやjavascriptなどで変更する方法はありませんでしょうか? 例えば下記のようなサイズ指定されたページ全体のテキストサイズを cssなどで150%大きくするといった方法です。 ----------------------------------- <html> <head> </head> <body> <h1>こんにちは</h1> <font size="2">こんにちは</font> <font size="1">こんにちは</font> こんにちははじめまして </body> </html> ----------------------------------- 何か方法があれば ご回答よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • HPビルダー文字入力について教えて下さい。

    HPビルダーで先日ホームページのファイルをUPしたばかりです。 実はビルダーで作成時の入力した文字がホームページ上で見るとすごく小さく表示されました。 ビルダー上で大きめに作成すれば良いのでしょうが、大きく作成すると他の文字と重なり、見にくくて仕方ありません。 図形はそのまま表示されていたので、入力文字を全部図形にしてしまおうとも思ったのですが、そうするとボリームが出てしまい困っています。 現在、マイホスティングで場所を借りてホームページの公開しているのですが、各プロバイダー毎に文字の表示サイズは異なるのでしょうか? もしビルダーで作成時に表示される文字サイズを見る方法があれば教えて下さい。HTMLタグでの文字サイズは2か3を使っていました。HTLMタグで文字サイズを4か5ぐらいに設定したら、ホームページ上でもそれなりに見えていました。 もしご存知の方がいらしたら、是非教えて下さい。