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

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。

＜第82号＞ 今週のおさらい
　　　　　　　　　　　　　　 　 毎週金曜日配信　What's New 2004/1/23
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
　　■ HTML講座  第26回 --- アクセシブルなフォーム
　　■ CSS講座　第３回 --- セレクタ

◆ HTML講座 --- アクセシブルなフォーム

閲覧者の環境に依存しないページの設計は、ここ最近の潮流である「アクセシビリティ」を構築する上で、大変重要なキーワードになっていることは周知のとおりです。

今回は、前回「第81号」で作成したフォームを、よりアクセス性のあるページに作り変えます。

■ 入力フィールドの構造化

前回作成したフォームの入力フィールドでは、そのラベル（入力フィールドを示す項目名）は、単に入力フィールドのそばに置かれました。

<p>
お名前： <input type="text" name="名前">　
メールアドレス：  <input type="text" name="メール">
</p>

確かに視覚系ブラウザで閲覧すると、「お名前」や「メールアドレス」の入力フィールドのそばでラベルが配置され、直感的にその入力欄に何を入力すればよいのか分かります。

お名前： メールアドレス：

最後に入力した内容を確かめて修正することも容易です。しかし、非視覚系ブラウザでは少し表現が異なります。そういったブラウザでは、

お名前 → テキスト入力 → メールアドレス → テキスト入力

という具合でレンダリングされます。もし、修正が必要な場合にはどうでしょうか。視覚的な効果が得られないため、直感的に求める入力フィールドを探すのが困難になります。

そこで、ラベルと入力フィールドを効率的に構造化し、それらをペアにすることで、非視覚系ブラウザでも、直感的に入力を支援することができます。HTML4.01では、label要素 が用意されており、入力フィールドを構造化します。

<p>
<label>お名前： 
<input type="text" name="名前">
</label>

<label>メールアドレス：
 <input type="text" name="メール">
</label>
</p>

ほんの少しだけ手を入れるだけで、優しいアクセシブルな入力フィールドを構築することができます。決して難しいことではありません。

■ メニュー項目のグループ化

select要素で利用するメニュー方式の各項目をグループ化して、閲覧者に該当する項目を作成します。これは、視覚系ブラウザにもアクセシブルなメニュー選択を提供します。

何もしないメニュー選択フィールド　 お選びください 会社員 学生 フリーター 自営業 無職

グループ化したメニュー選択項目　 お選びください 経営者/会社役員 部長/課長/係長 一般社員 大学生 専門校生 高校生 中学生 自営業 フリーター 主婦 無職

グループ化することにより、閲覧者は自分自身に該当するメニューの項目の中から直感的に選択することができます。グループ化は、optgroup要素 を使います。この要素も、各メニュー項目を構造化するアクセシビリティに則った要素型となります。

<select name="職業">
  <option selected>お選びください</option>
    <optgroup label="会社員">
    <option value="経営者">経営者/会社役員</option>
    <option value="役職者">部長/課長/係長</option>
    <option value="一般職">一般社員</option>
</optgroup>
    〜　以下省略　〜
</select>

■ 入力フィールドの移動

コンピュータの操作にマウスが使えない環境があることを知ってください。マウスは視覚的な画面操作を行うポインティングデバイスですが、目が不自由な方が使うことはありません。そのほとんどが音声指示や、キーボードからの操作になります。

HTML4.01では、そういった環境のための属性が用意されています。せっかく定義されている属性なのですから、使わない手はありません。むしろ積極的に利用していただきたい属性です。

  accesskey="任意の１文字"  a 〜 z までの英字で設定する
　tabindex ="数値"          0 〜 32767の間のいずれかの数値

アクセシブルなフォームのサンプル

(詳しいHTML構文は、今週のメールマガジン「第82号」をお読みください。)

前回作成したフォームと見比べてみても、視覚系ブラウザではほとんど変わる点がありません。しかし、非視覚系ブラウザを利用する閲覧者にとっては、大きな違いになったことに気がつくことでしょう。

PageTop

◆ CSS講座 --- セレクタ

スタイルシートを設定するセレクタでは、単に要素を指定するだけでなく、その組み合わせによってまったく違う設定の仕方が可能になっています。

特に、同一ページで同じ要素型に異なるスタイルを設定したい場合に、非常に有効に利用できることとなります。

■ 要素の指定

最も基本的でポピュラーな手法として、単純にセレクタの指定を要素にするものです。この場合、そのページで配置されている同じ要素すべてに適用されます。

 em { color: #ff0000 }   　em要素の文字色を赤色に指定

当たり前のことですが、特定の要素に限って指定するこの方法は、当然ながら他の要素には適用することはありません。あくまで、該当するem要素のみとなります。

■ すべての要素に同じ指定

すべての要素にまったく同じスタイルをしているのには、アスタリスク記号をセレクタに指定します。これによって、ブラウザ画面に表現されるすべての要素に同じ設定が行えます。

  * { color: #000000 }     すべての要素の文字色を黒色に指定

要素が何であれ、一切合財すべての要素にスタイルが適用されます。（あまり現実的ではありませんが・・） ユーザスタイルシートの設定には便利な機能です。

■ 複数の要素に同じ指定

全部の要素に同じ設定はどうかと思っても、幾つかの要素に同じ設定を適用したい場合があります。その場合、利用したい要素をカンマで区切って指定します。

　em, strong, dfn { color: #ff0000 }  各要素の文字色を赤色に指定

このように設定することで、任意の要素をいくつでも同じスタイルを適用させることができます。１つの要素ごとに指定するよりも効率的です。

■ 特定の親要素内に配置される要素の相関関係

要素が、ある親要素内で配置されてはじめてスタイルシートを適用する方法で、より実戦的なスタイルシートを作成することができます。この場合、他の親要素、あるいは単独では何も変化がありません。

  p em { color: #ff0000 }  p要素内の em要素の文字色を赤色に指定

これは、段落を示す p要素 内で配置された場合に限って　em要素の文字色を変化させるというスタイルシートです。当然、他の要素内で配置された場合にはスタイルが適用されることはありません。ある部分では変わらないけど、特定の要素内に配置されたときに限ってスタイルを適用するという方法は、様々な場面で使われます。

■ 特定の親要素内に配置される要素の相関関係

要素が、ある特定の要素内で配置されたとき、その場合の要素のみにスタイルを適用する方法です。ただし、このセレクタを解釈できる視覚系ブラウザが少ないのが難点です。

  body > p { color: #ff0000 } body要素内の p要素の文字色を赤色に

この場合には、body要素直下で配置する p要素に適用され、他の親要素内では適用されません。同じ要素が別の親要素に配置されたときには便利かもしれません。同じ効果としては、上記の特定の要素内で配置する要素の相関関係でしょう。

■ 同じ親要素内に配置される要素の相関関係

同じ親要素に配置された２つの要素のうち、ある要素のみがスタイルシートを適用するという方法です。このセレクタを解釈するブラウザが少ないのも残念なことです。

　h1 + h2 { color: #ff0000 }  ２つのうちの h2要素だけが適用される

この場合、この２つの要素に共通する親要素は body要素です。（別なブロックレベル要素に配置されることもありますが・・）そのとき、h1要素の直後にある h2要素のみスタイルシートを適用させるものです。そのため、h1要素の直後に配置されていないとスタイルは適用されません。使い方によっては効果的でしょう。

■ クラスセレクタ

より実戦的なスタイルシートを作成する上で、クラスセレクタは欠かすことができません。クラスは、任意にその名前を設定し、必要と思われる要素に適用します。

  p.green { color: #00ff00 }
  あるいは、
　.green { color: #00ff00 }

要素名＋ピリオド＋クラス名、とした場合、その適用先は指定した要素のみ可能です。他の要素には適用されません。しかし、要素名の指定がなく ピリオド＋クラス名、とした場合には、他の要素にも適用することができます。

要素にスタイルシートを適用する場合には、汎用属性として定義されている class属性 を使います。

  <p class="green">この範囲の文字は緑色です。</p>

なおクラス名は、先頭に数字を配するのは好ましくありません。また、環境によっては大文字と小文字を区別することがありますので、扱いには気をつけてください。

■ IDセレクタ

クラスセレクタと同様に多く利用されているのが、識別子を利用する IDセレクタです。ただし、IDを利用する場合、ある IDを持ったスタイルは、１つのページで１回しか書くことができません。同じ IDを複数使うことができませんので気をつけてください。

  p#green { color: #00ff00 }
  あるいは、
　#green { color: #00ff00 }

要素名＋ハッシュマーク＋識別子、とした場合、その要素だけでしか適用することができません。しかし、ハッシュマーク＋識別子、としたときには、どの要素にも適用することができます。

要素にスタイルシートを適用する場合には、id属性 を使います。

  <p id="green">この範囲の文字は緑色です。</p>

id属性を使って識別子を指定する場合、厳密に大文字と小文字の区別がありますので、扱いには注意してください。

セレクタには、擬似クラスや擬似要素というものがありますが、CSS講座を進めながら解説します。次回からは、実際のスタイルを定義する属性とその値について解説します。

PageTop / Home / 目次

初版更新日 2004/1/23

Copyright（C） 2002-2004 banban@scollabo.com