Home | 第89号 | 第90号 | 第91号 | 目次

初心者のためのホームページ作り　第90号

Web作成支援

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。

なお文中、疑問点や分からない点がありましたら、ご遠慮なく当方まで メールにてご質問ください。

＜第90号＞ 今週のおさらい
　　　　　　　　　　　　　毎週金曜日配信　What's New 2004年3月26日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
　  ■ HTML講座  第32回 --- アクセシブルなテキスト
　　■ CSS講座　第11回 --- 背景画像
◆ HTML講座 --- アクセシブルなテキスト
私自身の反省を込めて、コンテンツとしてのテキストがどうあるべきかを解説します。視覚的な判読と、その環境にない非視覚的な判読を織り交ぜて、正しいテキストを目指したいと思います。
■ 各種記号
テキストの中で利用される様々な記号は、視覚的に見れば何でもないようですが、音声ブラウザで閲覧すると、作者の意図とは違ったレンダリングをします。
このページでも、■とか◆などを用いていますが、音声ブラウザは両者とも、「しかく」と発音します。
こうした問題を解決するためには、記号部分を画像化する、あるいは音声ブラウザで読めないように工夫する必要があります。
画像化した記号 これは、画像化した記号です。画像化した場合には、alt属性を空にすること (引用符を２つ続けて記述する) で、音声ブラウザに影響することなくテキスト部分のみを発音することができます。
  <img src="dot.gif" width="12" height="12" alt="">
もう１つの方法は、音声ブラウザ向けのスタイルシートを用意して、記号部分を発声させないようにします。以下は、その書式です。 
 @media aural {
  .mark {	
          speak:   none;   
          volume:  silent }
     }
このスタイルシートは、適用するメディアを「音声」と指定しており、視覚系ブラウザに影響するものではありません。内容は、このクラスに指定された要素に囲まれた範囲に適用し、音声出力をゼロにしています。これによってその部分のみ何もレンダリングされないことになります。
■ 日時と数値
何気ない日時や数値のテキストでも、環境が異なるとわけが分からなくなります。特に音声ブラウザでは、数値や日時の解釈がへたくそ (失礼) なため、2004/3/26 などと書くと、「にせんよんぶんのさんぶんのにゅじゅうろく」と発音します。
また、\1000 などとした場合は、「えんまーくせん」と発生します。 $50 は、「どるまーくごじゅう」と発声します。本当に困ったことになります。
日付は、「2004年3月26日」と書くことを、数値は、「1000円」と書くことが推奨されています。少々面倒とは思いますが、誰にでも正しくテキストコンテンツの内容を伝えることができます。
■ 絵文字
電子メールではポピュラーになっている絵文字は、ささやかな感情を相手に伝えるための手段として人気があります。
そうした絵文字を Webページでも使いたい気持ちは理解できますが、閲覧環境によってはその意味が正しく伝えられないばかりか、場合によっては違った意味に変換され誤解を生むとも限りません。
電子メールは、あらかじめ受け取り先が分かっているので、変な誤解はないと思いますが、Webページは不特定多数の人が閲覧するので、できるかぎり絵文字を控えるようにしましょう。どうしてもという場合は、画像を用意するほうがスマートです。
■ 文字にスペースを入れる
リストや表組で、テキストに空白を入れて表現する場合があります。例えば、「場　所」とか「時　間」などというように文字間にスペースを入れる表現です。
音声ブラウザでは、空白を１つの区切りとして解釈します。そのため、「場　所」とした場合、「ば、ところ」と発音します。また、「神　奈　川　県」とすると。「かみ、な、かわ、けん」とも発音し、閲覧者はわけが分かりません。
このように文字間にスペースを入れるのは好ましくありません。必要な場合には、スタイルシートを利用してスペースを入れるようにしましょう。
 p { letter-spacing:  1em }
このスタイルシートは、文字間に１文字分の空白を入れます。音声ブラウザでは、こうしたスタイルシートを実装していないため閲覧者を混乱させることなく、視覚的な効果を得ることができます。
■ 実体参照
Webページで表現するテキストの中に、実体参照符号 といわれる文字を入れることは大変問題です。
例えば、「 < 」という不等号記号はタグの「開始区切り子」として定義されています。そのため、Webブラウザはタグの出現を待ち続けることになり、その範囲は何も表示できなくなります。
また、初心者が起こしやすい実体参照符号のミスに、「 & 」という記号があります。これは「アンパサンド」と呼ばれる実体参照となるもので、& は、必ず「 &amp; 」と記述しなければなりません。
次回は略語や専門用語に関するテキストのアクセシビリティについて解説します。
PageTop
◆ CSS講座 --- 背景画像
スタイルシートでは、ほとんどの要素に背景画像を表示させることができます。
例えばこのように、インラインレベル (ごく普通の文字列と同じに扱う) 要素にも背景画像を表示させることさえできます。
■ 背景画像の指定
通常 文書型定義 (DTD) が Transitional の場合、body要素 と、table要素で、background属性を使えば、背景画像を表示させることができます。
HTML4.01 Strict や、XHTML1.1 の場合は、スタイルシートで背景画像を指定することになります。
スタイルシートの具体的な書式は以下のとおりです。
div { background-image: url("images/backimage.gif") }
このスタイルシートでは、汎用ブロックの div要素に、背景画像を指定するもので、基本的に１つの画像を繰り返して表示させます。
background-image属性のサンプル
■ 背景画像の並び方の指定
スタイルシートでは、背景画像の並び方を指定することができます。通常は、初期値として１つの背景画像を繰り返して表示しますが、background-repeat属性を使うことで、横方向だけ、あるいは縦方向だけ、というような指定ができます。
background-repeat属性の値と機能は以下のとおりです。
なお、背景画像の並びを指定する場合、あらかじめ background-image属性によって、背景画像を指定する必要があります。
スタイルシートの具体的な書式は以下のとおりです。
 div { background-image:   url("backimage.gif");
　　 　background-repeat:  repeat-x }
background-repeate属性のサンプル
■ 背景画像の位置指定
スタイルシートでは、背景画像の位置まで指定することが可能です。background-repeat属性と組み合わせることで、思いがけない効果も発揮できます。
背景画像の位置指定は、background-position属性を使いますが、あらかじめ background-image属性を使って、背景画像を指定する必要があります。また、背景画像を１つだけ表示したい場合には、background-repeat属性を使う必要があります。
background-position属性の値と機能は以下のとおりです。
なお、属性値を２つ並べる場合は、半角スペースで区切って記述します。属性値を１つだけに指定することも可能です。
スタイルシートの具体的な書式は以下のとおりです。
 div { background-image:     url("backimage.gif");
　　　 background-repeat:    norepeat;
　　　 background-position:  top right }
background-position属性のサンプル
■ 背景画像を固定して表示
スタイルシートでは、背景画像が画面のスクロールに関係なく同じ位置で固定して表示させることも可能です。
この場合、あらかじめ位置を指定することもでき、常に同じ位置を保持します。背景画像を固定するには、background-attachment属性を使います。
background-attachment属性の値と機能は以下の２つが定義されています。
スタイルシートの具体的な書式は以下のとおりです。
 body { background-image:      url("backimage.gif");
 　　　 background-repeat:     no-repeat;
 　　　 background-position:   top left;
 　　　 background-attachment: fixed }
background-attachment属性のサンプル
　(注意！ サンプルはインラインフレームを利用しています。)
■ 背景画像に関わる一括指定
背景画像に関するそれぞれの属性を使わなくても、一括で指定してしまう方法があります。指定できる内容は、背景色、背景画像、背景画像の並び、背景画像の位置、背景画像の固定など１度に指定します。
背景画像の一括指定は、background属性を使います。この属性の具体的な書式は以下のとおりです。
 div { background: #fff url("backimage.gif") left repeat-y }
ここでは、background-color (背景色の指定)、background-image (背景画像の URI の指定)、background-position (背景画像の位置指定)、background-repeat (背景画像の並び指定) を一括で指定しています。
なお、必要でない属性値については記述する必要がありません。また、各属性値の記述順は自由に設定できます。
background属性のサンプル
次回は浮遊 (フロート) について解説します。
This page is Valid HTML 4.01! 初版公開日 2004年3月26日
Copyright（C） 2002-2004 banban@scollabo.com