- ベストアンサー
音声ブラウザ、スクリーンリーダー用CSSについて
ORUKA1951の回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
p.silence{ speak:none; } で、無視します。時間を開けるなら p.silence{ valume:none; } です。スクリーンリーダー用のプロパティは、視覚端末用のものとはまったく異なります。 HTMLにも工夫が必要です。わざわざ、スクリーンリーダー用、点字端末用にゴチャゴチャ書くのではなく、きちんと文書構造にしたがってマークアップしておきましょう。 <div class="section"> <h2>見出し</h2> <p>段落</p> <p>段落<img src="" alt="湖畔から見上げると壮大な富士山がますます大きく見えました。"></p> <div class="figure"> <h3>挿絵</h3> <p>段落</p> </div> <div class="nav"> ナビゲーション </div> </div> と言う風に、意味を表すclass名をつけておくべきです。そのうえで div.nav{speak:none;} img{azimuth:left-side;voice-family:male;} とすれば、「ナビゲーションは読まない」「画像の代替テキストは女声で左方向から」と、後からのメンテナンスも楽です。 CSS2.1 Aural style sheets ( http://www.w3.org/TR/CSS2/aural.html ) CSS2(古い) 音声スタイルシート ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/aural.html ) 少しばかり変更があります。出来ればCSS2.1を参照してください。media-type:speachになりました。(両方併記したほうがよいかも)
関連するQ&A
- 一部のページにデフォルトCSSを読み込ませない方法
一部ページにCSSを読み込ませない方法がありましたら、 ご教授ください。 例えば、 全ページに以下のCSSを共通で読み込ませてあります。 <link rel="stylesheet" type="text/css" media="screen" href="css/common.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/index.css" /> しかし、test.htmlだけ <link rel="stylesheet" type="text/css" media="screen" href="css/index.css" /> を読み込ませたくありません。 つまり、 <link rel="stylesheet" type="text/css" media="screen" href="css/common.css" /> は通常通り読み込んで、 <link rel="stylesheet" type="text/css" media="screen" href="css/index.css" />のみを 除外したいです。 * 共通のCSSは外すことはできません。 * また、CSSを新たに追加することもできません。 * head内にスクリプトを記述することができますが、スクリプトの記述で解決できますでしょうか。 自分で検索もしてみたのですが、答えに辿りつけません。 どのような方法がありますでしょうか。 何か方法がありましたら、ご教授ください。 よろしくお願いいたします。
- 締切済み
- CSS
- プリント用CSSについて
いつもお世話になります。 プリント用のCSSを作成しようと思うのですが、 複数記述してもエラーは出ないのでしょうか？ 説明がうまくないので具体例を書かせていただきます。 “a.css”“b.css"の各々のプリント用cssを “aprint.css”と“bprint.css"とした場合に <link rel="stylesheet" href="css/a.css" type="text/css" media="all"> <link rel="stylesheet" href="css/b.css" type="text/css" media="all"> <link rel="stylesheet" href="css/aprint.css" type="text/css" media="print"> <link rel="stylesheet" href="css/bprint.css" type="text/css" media="print"> この記述で不具合はないものかと悩んでいます。 それともa,bを統合して“c.css”という新たなものを作り、 プリント用“cprint.css”を設けるべきでしょうか？ できれば複数記述できると助かるのですが。 要領を得ない質問ですみませんが、ご教授いただけると嬉しいです。 どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- インラインフレーム内のcssを親フレームに適用する
インラインフレーム（子ウィンドウ）に表示されているページ（同一ドメイン上のページです）で読み込まれているcssを、ページ読み込み時に親ウィンドウ側でも読み込みたいと思っています。 内容としては 親ウィンドウ側css呼び出し部分 <link rel="stylesheet" type="text/css" href="test.css"> <link rel="stylesheet" type="text/css" href="test1.css"> 子ウィンドウ側css呼び出し部分 <link rel="stylesheet" type="text/css" href="test.css"> <link rel="stylesheet" type="text/css" href="test2.css"> となっているソースをページ呼び出し時に 親ウィンドウ側css呼び出し部分 <link rel="stylesheet" type="text/css" href="test.css"> <link rel="stylesheet" type="text/css" href="test2.css"> 子ウィンドウ側css呼び出し部分 <link rel="stylesheet" type="text/css" href="test.css"> <link rel="stylesheet" type="text/css" href="test2.css"> のように共通していないcssを子ウィンドウ側に合わせて変更したいのです。 子ウィンドウ内のページのソースは訳があって編集する事が出来ないので、親ウィンドウ側で子ウィンドウ内の <link rel="stylesheet" type="text/css" href="test2.css"> の href の値を読みこみ、親ウィンドウ側の href の値を置き換えるといった方法では無いかと思うのですが、具体的にどうすればよいのか分かりません。 どなたかご存知の方、ご教授ください。 よろしくお願いいたします。 また、ブラウザはIE6～8と、Firefoxを想定しています。
- ベストアンサー
- JavaScript
- widthでcss,js切換可能でしょうか。
【Web製作】widthでcssやjavascriptを切換えたいです。 マルチデバイス対応のWebSiteを製作しようと思うのですが、 widthによって、cssやjavascriptを切り替えたいのですがどのようにすれば良いでしょうか。 横幅が【959px以下】の場合は【style-1.css】と【base1.js】 横幅が【960px以上】の場合は【style-2.css】と【base2.js】を適応させたいです。 htmlに <link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 959px)"> <link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 960px)"> <link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 959px)"> <link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (orientation: portrait) "> <link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (orientation: landscape) "> と記述してもうまく動作しません。(確認は【PC】【iPhone】【iPad】です。) 私の解釈ですと、 1.<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 959px)"> ↑PCの場合、ウィンドウサイズが959px以下の場合【style-1.css】 2.<link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 960px)"> ↑PCの場合、ウィンドウサイズが960px以上の場合【style-2.css】 3.<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 959px)"> ↑PC以外で、画面表示サイズが最大959px以下のデバイスの場合【style-1.css】 4.<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (orientation: portrait) "> ↑PC以外で、画面表示サイズが最大959px以下ではないデバイスのポートレートモードの場合【style-1.css】 5.<link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (orientation: landscape) "> ↑PC以外で、画面表示サイズが最大959px以下ではないデバイスのランドスケープモードの場合【style-2.css】 と、解釈し指定しているのですがうまく動作しません。 そしてもう一つなのですが、 widthやポートレートモード、ランドスケープモードを判別しjsを切り替える事は可能でしょうか。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- javascriptにてcss切り替え
現在webサイトを作成しており、javascriptのcss切り替えにてページの色変更を作っています。 (青、緑、赤、三色で作成) デフォは青で表示しています。 その後緑、赤とリンクで色が変わるようにしています。 ここでご質問です。 緑をクリックした場合は緑に変わる(赤も同様)のですが、別ページにリンクした場合、緑(赤)ではなく青に戻ってします。 別ページにとんでも緑(赤)が引き継がれるにはどのように記述したらよろしいでしょうか? ソースは以下のとおりです。 <head> <link rel="stylesheet" type="text/css" href="css/blue/top.css" media="all" /> <script src="js/styleswitch.js" type="text/javascript"></script> <link rel="alternate stylesheet" type="text/css" title="blue" href="css/blue/top.css" media="all" /> <link rel="alternate stylesheet" type="text/css" title="green" href="css/green/top.css" media="all" /> <link rel="alternate stylesheet" type="text/css" title="red" href="css/red/top.css" media="all" /> </head> <body> <div style="width:200px;"> <a href="javascript:chooseStyle('blue', 30)">青</a><br /> <a href="javascript:chooseStyle('green', 30)">緑</a><br /> <a href="javascript:chooseStyle('red', 30)">赤</a> </div> </body> javascriptは以下のところからしようしています。 http://noongoro.main.jp/note/note0059.html javascriptは初心者です。 ご教授お願いいたします。
- ベストアンサー
- JavaScript
- フォントのサイズが変わってしまいサイトが崩れる
IEとファイヤーフォックスでフォントのサイズが変わってしまい、自作サイトが崩れてしまいます。 調べたところ下記のような情報があったのですが、この方法がよいのでしょうか？ http://kudox.jp/html-css/font-size-css また上記通りにする場合下記は <link rel="stylesheet" type="text/css" href="/css/fontsize.css" media="all" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="/css/fontsize_ie.css" media="all" /> <![endif]--> 最優先させるのでしょうか？最優先なら下記のような感じでよいのでしょうか？ <link rel="stylesheet" href="reset.css" type="text/css" /> <link rel="stylesheet" href="base.css" type="text/css" /> <link rel="stylesheet" href="page.css" type="text/css" /> <link rel="stylesheet" type="text/css" href="/css/fontsize.css" media="all" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="/css/fontsize_ie.css" media="all" /> <![endif]--> またmedia="all"はとりあえずすべてにつけておいたほうがよい属性と考えてよいのでしょうか？ 教えてください。
- ベストアンサー
- HTML
- type="text/css"
<link rel="stylesheet" type="text/css" href="http://web.fc2.com/css/index.css"> と <link rel="stylesheet" href="http://web.fc2.com/css/index.css"> では意味同じですか？ type="text/css"は省略したほうがいいのでしょうか？ しない方が良いのでしょうか？
- ベストアンサー
- CSS
- HTMLメールの外部CSSが有効になりません
HTMLメールから以下のように外部CSS（http://から始めてます）を利用したいのですが、実際にOUTLOOK 2003 SP3で見るとスタイルが適用されていません。 ローカルで同じHTMLをブラウザで開くとスタイルは適用されます。HTMLメールのときは何か特別なことが必要なのでしょうか？ <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> ヘッダ全体を以下に掲載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <title>TITLE</title> <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>
- 締切済み
- HTML
- CSS のときのヘッダの記述
<link rel="stylesheet" href="style.css" type="text/css" /> の link rel = の ●「 rel 」って何の省略なのでしょうか？ また、 ●href は Hyper link REFerence の略でしょうか？
- ベストアンサー
- HTML
お礼
＞ORUKA1951様 ご教示いただきありがとうございます。 speakにつきましては既に試してみたのですが、残念ながら読み上げられてしまっていました。 対応ブラウザとバージョンが狭いようで、ブラウザによっては…かもしれませんがＩＥ8でPC-Talker3を使用した際には 読み上げられてしまいました。 CSS2.1からmedia-type:speachということで aural, speachでの設定、またimportからではなく、<head>内に直接記載し指定しているのですが、やはりうまくいきません。 また文章構造のマークアップについてもありがとうございます。 普段からidやclassについては意識していいるのですが、改めて正しいマークアップの重要性を認識いたしました。 ありがとうございました。