隔週金曜日配信 What's New 2004年10月15日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
┏┏┏┏ 初心者のためのホームページ作り/Web for beginner
┏┏┏ http://www.scollabo.com/banban/
┏┏
┏ ＜第103号＞
banban@scollabo.com
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格
的な Webページ作成に役立つことを目的に配信されております。
当講座では HTML4.01、XHTML1.1、XML1.0 を中心とした文法が主体となって
います。なお、このマガジンは等幅フォントでお読みいただくと快適に読める
ようになります。
今週のコンテンツ
■ 正しい文法のために 第６回 --- タグの入れ子関係
■ CSS講座 第22回 --- 音声スタイルシート
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆正しい文法のために --- タグの入れ子関係
HTMLの文法では、タグは Well-formed で記述せよという原則があります。こ
れは、タグの入れ子関係を示すもので、タグの中にタグを入れた場合の関連を
適切にする必要があります。
例えば以下の構文で説明しましょう。
<p><strong><abbr title="Hyper Text Markup Language"><code>HTML</code>
</abbr></strong> とは、文章の要素内容 にしるし付けすることです。</p>
この構文では、段落をあらわす要素内に略語の説明タグ、コードを表すタグ、
そして強調を示すタグなどが配置されています。
Well-formed とは、各タグの配置状態が適正かどうかを問います。上記の構
文では、１つの段落に複数のタグがあり、その開始タグと終了タグの対応が適
切に行われています。
分かりやすく説明すると
<p><strong><abbr><code> 〜 </code></abbr></strong>〜</p>
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃
┃ ┃ ┃ ┗━━━━┛ ┃ ┃ ┃
┃ ┃ ┗━━━━━━━━━━━┛ ┃ ┃
┃ ┗━━━━━━━━━━━━━━━━━━━┛ ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━┛
開始タグと終了タグの関係がお分かりでしょうか。何度か説明してきたとおり
HTMLは論理的な構造を求めています。構造に沿った構文では常にツリー構造で
構成されています。
ここでは段落になる p要素が親要素になっています。その直接の子要素は強
調を表す strong要素になり、その直接の子要素が abbr要素です。つまり p要
素から見れば abbr要素は孫要素となります。
省略語を示すabbr要素の子要素が code要素となり code要素は p要素から見
れば曾孫要素、strong要素から見れば孫要素となります。
もし、終了タグの対応に誤りがあれば、このような親子関係が破綻します。
言い換えれば、論理的な構造ではなくなってしまいます。
つまり Well-formed とは、そのような意味を含んでいるのです。
■終了タグの省略と Well-formed
HTMLの規格の中に、オプションとして幾つかの終了タグが省略できるタグがあ
ります。これは、ソフトウェア側で終了タグを補完することが前提です。
例えば、段落をあらわす p要素では終了タグを省略することができますが、
これは、次のブロックレベル要素が現れたときに段落を終えるという約束があ
ります。つまり、新たなブロックレベル要素が出現しない限り段落として扱わ
れます。
同様に、dd、li、td、th などは同じタグが現れるまでそれぞれの要素とし
て扱われます。
しかしながら、XHTML、XML では終了タグの省略を許していません。
本来ならばそれぞれのタグは要素内容を囲むわけです。構造的な文書を構成す
る上でも終了タグは重要な役目を担っています。オプションとして終了タグの
省略を認められていても、将来的なことも含め今のうちからきちんと終了タグ
で囲むクセをつけましょう。
そのほうが、後々のメンテナンスや更新時にきっと役に立ちます。タグは正
確な Well-formed で記述するよう心がけましょう。
テーブルの中にテーブルを入れるような複雑な構文では間違えやすくなりま
すので十分に気をつけてください。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆Tips
タグの入れ子関係を間違えた場合、ブラウザはどのように解釈してレンダリン
グするのでしょうか？
中には寛容なソフトもありますが、大体はうまくいきません。特に文字強調
や装飾を示すようなフレーズ要素では、前後関係があやふやだと表示されない
とか、めちゃくちゃな表現になったりします。
表示がおかしいと思ったら、とりあえず構文をチェックすることが望ましいも
のです。タグの入れ子関係は間違えやすいのでその点に留意押してください。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆CSS講座 --- 音声スタイルシート
スタイルシート (CSS) の Level 2 では、音声出力に関する属性と値が定義さ
れています。アクセシビリティの一環として数多くのスタイルが予定されてい
ますが、基本的に視覚系ブラウザでは実装されておりません。
ただし、現在音声による入出力が可能になっているパーソナル・コンピュー
タではソフトウェアによっては可能になっています。
実際、私の友人にはごく普通のコンピュータに音声出力ソフトを使って Web
ブラウジングしている視覚障害者がいます。
音声出力による音声ブラウザでは、女声や男声で声質を換えて見出しや段落な
どを読んでくれます。スタイルシートでは、任意に声質や音量、声の方向や読
み出し速度を変更することが可能です。
■アクセシビリティとスタイルシート
アクセシビリティとは、どのような環境でも自由にブラウジングできる点にあ
ります。コンピュータの基本ソフトや通信環境に依存しないユニバーサルな施
策を Webアクセシビリティと呼びます。
HTMLは基本的に文書の論理構造を示すだけで、物理的なレイアウトや見栄えな
どを分離することが求められています。スタイルシートは、文書の論理構造と
プレゼンテーション (見栄え) を両立させるものとして多くのサイトで利用さ
れていることは素晴らしいことです。
一方で、視覚障害者や肢体障害者も積極的に Webに参加し情報の受発信を行っ
ています。とりわけ目の不自由な方にとっては、音声による入出力は非常に重
要な手段となっています。
ページ上で装飾される数々のコンテンツは、そうした目の不自由な方は見る
ことができません。また、不用意なテキストでは何を表現しているのかさえ理
解することができません。
Webでは、閲覧環境による差別がないのが本来の姿です。その意味でも音声
に適したコンテンツ作りは大変重要な意味があります。
この CSS講座でここまで説明してきた内容のほとんどが視覚系ブラウザへの
対応でした。論理的な文書構造からプレゼンテーションを分離するための手法
としてスタイルシートは大変有効ですが、非視覚系ブラウザにも対応できるス
タイルも、あわせて学んでいきましょう。
■音声出力メディア向けスタイルシート
前回説明したとおり、音声出力メディアに向けたスタイルシートは、その冒頭
で @madia Aural を使います。
@media aural {
スタイルシート
}
音声は色や文字サイズのスタイルは不要です。あくまで耳で聞いて理解できる
ためのスタイルが中心となります。
□声の種類の指定
声の種類には、女声か男声、子供のなどがあります。
音色の指定は voice-family属性を使います。
voice-family属性の値とその意味
male 男声
female 女声
child 子供の声
defoult ソフトウェアが持つ声の種類 (指定しない場合)
具体的な書式
h1 { voice-family: female }
□声の高さの指定
発声する声の高低を示す単位はヘルツ「Hz」、あるいはキロヘルツ「KHｚ」で
数値が高いほど声が高くなります。ちなみに男性の声は 300Hzからとなります。
スタイルシートにおける音声の高さを指定するには、pich属性を使います。
pich属性の値とその意味
周波数 単位「Hz」「kHz」を使って発声の周波数を指定
x-low 最も低い声
low 低い声
medium 普通の高さの声
high 高い声
x-high 最も高い声
具体的な書式
h1 { pich: high }
p { pich: 600Hz }
□音声の音量を指定
音声の音量を指定するためには、volume属性を使います。この属性の基本的な
単位は 0〜100 までで、初期値は 50 となっており、数値が大きいほど音量も
大きくなります。
volume属性の値とその意味
数値 0〜100 の範囲で指定
% 設定されている音量の割合で指定
silent まったく音を出さない
x-soft 音量ボリュームが 0 の設定
soft 音量ボリュームが 25 の設定
medium 音量ボリュームが 50 の設定
loud 音量ボリュームが 75 の設定
x-loud 音量ボリュームが 100 の設定
具体的な書式
h1 { volume: loud }
p { volume: 55 }
□読み上げ速度を指定
音声がテキストを読み上げるための速度を指定します。非常に速い速度と非常
にゆっくりとした速度まで指定できます。音声の速度は speech-rate属性を使
います。
なお、初期値は「medium」となっています。
speach-rate属性の値とその意味
数値 １分間で読み上げる単語の数を指定
x-slow １分間に 80の単語数を読み上げる
slow １分間に 120の単語数を読み上げる
medium １分間に 180〜200の単語数を読み上げる
fast １分間に 300の単語数を読み上げる
x-fast １分間に 500の単語数を読み上げる
faster 現在の設定から 40を足した単語数を読み上げる
slower 現在の設定から 40を引いた単語数を読み上げる
具体的な書式
h1 { speach-rate: slow }
p { speach-rate: 190 }
□読み上げにアクセントを指定
声にアクセントをつけて再生するスタイルシートで、声に強さを持たせます。
アクセントは、stress属性を用います。値は数値で 0〜100 の間で指定します。
数値が大きいほど強くなり、低いほど平坦な読み上げになります。
stress属性の値とその意味
数値 0〜100 の間で指定する
具体的な書式
h1 { stress: 60 }
□句読点の読み方を指定
「。」や「、」などの読み方を指定します。音声ブラウザでは通常は読まずに
休止を入れて発声しますが、句読点を読ませたい場合に利用します。
句読点の読み上げの指定は、speak-punctuation属性を使います。
speak-punctuation属性の値とその意味
none 読まずに休止を入れる (初期値)
code 句読点をそのまま読み上げる
具体的な書式
p { speak-punctuation: code }
□数字の読み方を指定する
例えば 「123」という数字を「いちにいさん」と読むか「ひゃくにじゅうさん
と読むかを指定します。スタイルシートは speak-numeral属性を使います。な
お、あくまで数字に対してのみ適用するものです。
speak-numeral属性の値とその意味
digits 数字部分を個々に読み上げる
continuous 数字部分を１つの数値として読み上げる (初期値)
具体的な書式
p { speak-numeral: digits }
□読み上げの声の抑揚を
単純な棒読みではなく、読み上げる声に抑揚を持たせます。スタイルシートで
は、pich-range属性を使って抑揚を調整します。具体的には 0〜100 までの間
の数値を使い、数値が多いほど抑揚が強く、数値が低いほど棒読みになります。
pich-range属性の値とその意味
数値 0〜100 間での間で指定する (初期値は 50)
具体的な書式
p { pich-range: 60 }
□発声する声の横方向を指定
左右のスピーカーから流れる音声の音量をコントロールして (厳密には左右の
位相差) 音の出る方向を指定します。
音の横方向の指定は、azimuth属性を使います。初期値は中央 (center) です。
azimuth属性の値とその意味
center または 0deg 中央 (初期値)
center-right または 20deg 中央より右に20度の方向
right または 40deg 中央より右に40度の方向
far-right または 60deg 中央より右に60度の方向
right-side または 90deg 右からの方向
far-right-behind または 120deg 中央より右に120度の方向
right-behind または 140deg 後ろより右に40度の方向
center-right-behind または 160deg 後ろより右20度の方向
center-behind または 180deg 真後ろの方向
center-left-behind または -160deg 後ろより左20度の方向
left-behind または -140deg 後ろより左40度の方向
far-left-behind または -120deg 後ろより左60度の方向
left-side または -90deg 左からの方向
far-left または -60deg 前より左60度の方向
left または -40deg 前より左40度の方向
center-left または -20deg 前より左20度の方向
(deg は角度を表す単位です。)
具体的な書式
h2 { azimuth: far-left }
□発声する声の垂直方向を指定
音の出る垂直方向 (上下) を指定します。ただし、閲覧者が複数の音声出力装
置が備わっていることが前提です。
垂直方向の指定は、elevation属性を使います。初期値は 0度です。
elevation属性の値とその意味
角度 (rad) ラジアン値による方向の指定 (-90〜90度)
level 0度と同じ方向 (初期値)
above 90度と同じ方向 (90rad)
below -90度と同じ方向 (-90rad)
higher 現在の角度から上に10度の方向
lower 現在の角度から下に10度の方向
具体的な書式
h1 { elevation: higher }
p { rad: 15 }
□読み上げの一時休止を指定
ある特定の要素の前後で音声による読み上げを一時休止させる指定です。この
指定がある要素の前後で適用されます。段落が次の段落に移った場合などで利
用されます。
一時休止は、pause属性を使います。初期値は休止せずに読み上げます。
pause属性の値とその意味
時間 秒 (s)、あるいはミリ秒 (ms) で休止時間を指定する
% speech-rateで設定されている時間の割合
具体的な書式
p { pause: 500ms } 0.5秒の休止
□声の豊かさを指定
ここでいう「声の豊かさ」とは、明瞭度をあらわします。シャープな声と、
ボケた声とに分けます。この豊かさは、richness属性で指定し、基本的には
0〜100の間の数値で設定します。100に近いほどシャープになり、0に近いほ
どボケた感じになります。
richness属性の値とその意味
数値 0〜100の間で指定
具体的な書式
p { richness: 60 }
□読み上げの有無を指定
例えば■という文字は、「しかく」と発音します。このメールマガジンでも段
落のタイトルで利用していますが、視覚的には単なる記号に見えても、音声ブ
ラウザではそのまま発音してしまいます。
このように、読んで理解できないような文字を使う場合には、むしろそれを
読み上げないようにしたいものです。その場合に speak属性を使います。
speak属性の値とその意味
normal 言語の種類に応じて読み上げる (初期値)
none 読み上げをしない
spell-out 単語としてではなくスペルを読み上げる (英単語のみ適用)
具体的な書式
span.nonspeak { speak: none }
p { speak: spell-out }
□テーブルのヘッダセルを読み上げる
何度かお伝えしてきたとおり、音声ブラウザはテーブルのレンダリングが大変
苦手です。ある表組を読み上げて理解するのは本当に大変です。テーブルには
アクセシビリティに関する属性が用意されていますが、すべての音声ブラウザ
に適用するわけではありません。
そこで、テーブルのヘッダセルを利用して各表のセル内に収められるデータ
を理解可能にするスタイルシートを利用します。
例えば、以下の表とその構文を参考にしてください。
┌────┬───┬───┬───┐
│ 氏 名 │ 国語 ｜ 数学 ｜ 英語 ｜
├────┼───┼───┼───┤
｜田中さん｜ 60点 ｜ 65点 ｜ 73点 ｜
├────┼───┼───┼───┤
｜ばんばん｜ 24点 ｜ 30点 ｜ 25点 ｜
└────┴───┴───┴───┘
<table border="1" cellpadding="2" cellspacing="0" summary="試験結果">
<tr><th abbr="受験者">氏名</th>
<th abbr="受験科目その１">国語</th>
<th abbr="受験科目その２">数学</th>
<th abbr="受験科目その３">英語</th></tr>
<tr><td>田中さん</td><td>60点</td><td>65点</td><td>73点</td></tr>
<tr><td>ばんばん</td><td>24点</td><td>30点</td><td>25点</td></tr>
</table>
通常音声ブラウザでは、テーブルの各セルを左から右に順次読み上げます。こ
の場合には、「氏名、国語。数学、英語、田中さん、60点、65点……」という
具合になります。
ヘッダセルでは、テーブルの表題となる各項目となり、一般的な視覚系ブラ
ウザではセンタリングと太字で表現されます。そのヘッダセルを各データセル
ごとに読み上げれれば、音声だけでもある程度理解ができます。
例えば、「氏名、田中さん、国語、60点。数学、65点……」とセルごとに表
題を読み上げます。ヘッダセルの読み上げは、speak-header属性を使います。
speak-header属性の値とその意味
once ヘッダセル (th要素) を１度だけ読み上げる (初期値)
always 関連するセルのヘッダセルを常に読み上げる
具体的な書式
table { speak-header: always }
□背景音を指定
背景音 (バックグラウンド・サウンド) を指定した場合、その音は比較的小さ
な音量でうっすらと流れます。ただし、環境を考えると、少々ウザったいもの
です。さりげない音を選びましょう。
背景音の設定は、play-during属性を使います。
play-during属性の値とその意味
URI 再生する音のデータの URI を指定
mix 各要素で設定されている背景音をミックスする
repeat 繰り返し再生する
auto 親要素の再生音を中断せずに再生する
none 背景音を再生しない (初期値)
具体的な書式
body { play-during: sample.mp3 }
■まとめ
冒頭でも説明したとおり、音声出力というメディアを指定する場合には、必ず
@madia aural を指定してください。例えば以下のような具合でスクリーンと
共存させます。
body { background; #fff; color: #000 }
p { letter-spacing: 1px; line-height: 130% }
@media aural {
h1 { voice-family: female; volume: loud; richness: 70 }
p { voice-family: male; pause: 500ms }
}
このように、出力メディアを指定します。出力メディアで指定されたスタイ
ルシートは、他のメディアでは適用されずあくまで指定したメディアとなりま
す。{ と } の対応に気をつけてください。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
今回はここまで。
今週のおさらいは Webページにも掲載しましたので、是非参考までに見ておい
てください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明
しています。あわせて過去の記事のおさらいも掲載しています
（今週のおさらい）
http://www.scollabo.com/banban/magazine/review_103.html
次回は、10月29日に配信を予定しています。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、あなたがお使いのOS、ブラウザ、テキストエディタな
ど、なるべく分かりやすく制作環境を明記していただけると回答しやすくなる
と思います。
ただし、個人的な事由により返事が遅れることがあります。ご了承ください。
お急ぎの場合には、当サイト内の掲示板をご利用ください。きっと誰かが答え
てくれると思います。
発行者 ばんばん
協力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/ （ID 0000090196）
誤字・脱字・変換ミス・表現欠乏などには、平にご容赦願います。
■バックナンバー こちらで公開しています。
プレーンテキスト http://www.scollabo.com/banban/magazine.html
各号のおさらい http://www.scollabo.com/banban/magazine/
アーカイブ http://www.scollabo.com/banban/daf/archive.html
まぐまぐ http://backno.mag2.com/reader/Back?id=0000090196
■配信の変更・中止はこちらです。
個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助
かります。
当サイトにて http://www.scollabo.com/banban/magazine/top.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
＜えでぃた〜ず・る〜む＞
このメールマガジンを発行してから約２年半がたちました。6000名を超える読
者の皆様に支えられここまで来ました。そろそろ終わりにしようかなと思って
いる反面、まだまだやり残したことがあるような気もします。
「初心者のための」というタイトルがありますが、内容は中級車向けになって
いるようで、もう一度最初からやり直さなければとも考えています。近頃はリ
リースされるオーサリングソフトも高度になり、作者が自らの手でHTMLを記述
することも少なくなっているのではないでしょうか。
しばらくは悩みながらの配信になりそうです。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応
じておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、スクリプト、HTMLをご自分のページ作成に
自由に使っていただいても差し支えありません。
Copyright(C) 2002-2004 www.scollabo.com/banban/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
最新公開日 2004年10月28日
Copyright(C) 2002-2004 banban@scollabo.com