毎週金曜日配信 What's New 2004/1/23
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
┏┏┏┏ 初心者のためのホームページ作り/Web for beginner
┏┏┏ http://www.scollabo.com/banban/
┏┏
┏ ＜第82号＞
banban@scollabo.com
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格的
な Webページ作成に役立つことを目的に配信されております。
当講座では HTML4.01、XHTML1.1、XML1.0 を中心とした文法が主体となってい
ます。なお、このマガジンは等幅フォントでお読みいただくと快適に読めるよう
になります。
今週のコンテンツ
■ Webデザイン 第26回 --- リンク
■ HTML講座 第26回 --- アクセシブルなフォームの作成
■ CSS講座 第３回 --- セレクタ
■ 属性の解説（第９回） ---
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆Webデザイン（第26回） リンク
ナビゲーションの役目を果たすリンクには、自身のサイト内を参照するものと
他のサイトを参照する２つに分類されています。
■外部サイトへのナビゲーション
コンテンツの中で、他の有用な情報を提供するサイトへリンクする方法は、当
メールマガジンのサイトでも相当数に渡って利用しています。
たった１つリンクを貼るだけで、閲覧者は簡単にそのサイトを訪問し、ネッ
トワークを介してお互いの情報を共有し合えることは、正にインターネットの
醍醐味でもあります。
そのようなリンクによる関係は、その先の外部リンクによってさらに広がり
ます。友達の友達は友達である、というような展開を見せることになることで
しょう。積極的に外部サイトを参照できるようにしたいものです。
自分よりも有用なサイトがあれば、それを真似るよりもリンク１つ置くだけ
で十分です。
■外部リンクへのマナー
外部のサイトへリンクする場合には、できるだけそのサイト名を正確に記述す
ることが礼儀というものです。単に「ここ」というのはマナー違反です。閲覧
者にもそのリンク先がどのようなものか分かりにくいものです。
外部のサイトにリンクを張る場合、これといってリンクを張る旨を伝えなく
てもかまいません。（と、私はそう思っています。）
リンクを貼る際にはいちいち断りをしなくてもよいということです。そのサ
イトが会員制の排他的性格を持つものであるならば、その限りではありません
が、インターネットという空間で公開されている事実を考えると、リンクを貼
るのに、何のお断りがあるでしょうか。
また、有用なページにリンクするということも大切なことです。別にそのサ
イトのトップページでなくても、必要と思われるページにリンクすることは、
閲覧者に余計な操作とリソースの損失を強いることなく参照できるわけです。
来年開かれる愛知万博の公式サイトでは、トップページ以外のリンク、個人
サイトからのリンク、商用サイトからのリンクを禁じると発表しました。
開いた口がふさがらないばかりか、ふさがった口まで開いてしまいます。私
に言わせれば、そのようなサイトこそ Webの世界から退くべきと考えます。
国民的関心事である愛知万博の公式サイトは、公共性の強いサイトであり、
だからこそ、その門は広く開けておくべきです。
一体、インターネットを何だと思っているのでしょうか！（怒）
■リンクフリー
よく見られるのが、「このサイトはリンクフリーです。ご自由にリンクを貼っ
て頂いてもかまいません。」という記述です。
別に揚げ足を取るつもりはありませんが、「リンクフリー：Link Free 」な
どという英語は存在しません。
また、「リンクフリー」と明示しているにもかかわらず、「リンクの際には
ご連絡ください。」と書いてあるサイトもありますが、これはどういうことで
しょうか。リンクが自由であるならば、それを断る連絡など最初から不要なは
ずです。
もし、リンクに際して連絡を強いるのであれば、「リンクに関してはあらか
じめご連絡ください。」と明記すべきと考えます。
■バナー
他サイトへのリンクに利用されるのが、バナーといわれる画像です。バナーと
は「Banner」旗、軍旗、国旗、(スローガンなどを書いた)横断幕などの意味が
あります。
こうしたバナー画像にはアニメーションを利用して「チカチカ」させたりし
て目立つような工夫がされています。こうしたバナー画像をリンク集などでた
くさん見せることは、見た目には派手で綺麗に見えますが、しかし容量が大き
いのです。特にアニメーション画像は静止画像よりも重たいのです。
そうしたバナー画像をたくさん表示すると、当然ネットはトラフィックを生
みます。リンクを案内するナビゲーションは、テキストだけで十分です。別に
私のサイトでバナーを持っていないという「やっかみ」から言っているのでは
ありません。（絶対に、きっと、多分）
リンク先の情報を正しく書いてあったほうが、閲覧者にとって、はるかに有
益です。また、バナー画像の出来・不出来でサイト先を判断されてしまったら
それこそ、そのページの作者にとって悲劇というものです。
■外部リンクからやってきた閲覧者への配慮
当サイトでも他のサイトで示されるリンクからやってくる多くの閲覧者がいま
す。同時に、当サイトから外部リンクで示されるサイトへ移動する閲覧者も少
なくありません。
外部リンクからやってきた人が、そのサイトの他のページを見たいとき、そ
こに他のページに移動できるナビゲーションがなければ、閲覧者は行き止まり
に陥り、どこにも移動できない事態が発生します。
インターネットという広大な Webの世界で示される個々のサイトは、ある意
味では巨大なデータベースのようです。それぞれの有用で有益なデータベース
が、「ハイパーリンク」という形式で共有される空間において、互いを結びつ
けるリンクこそ、HTMLの最も特徴的な仕組みです。
訪れる閲覧者が迷うことなく、利用しやすいページを作成することは、デー
タベースを、より運用しやすい環境を提供することに他なりません。
（第26回 中傷・批判につづく）
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆HTML講座 （第26回） アクセシブルなフォーム
前回は簡単にフォームの作成について説明しました。今回は、前回作成したフ
ォームを中心に、よりアクセシブル（高いアクセス性）なフォームについて詳し
く解説します。
■アクセシビリティとは？
アクセシビリティを一言で説明すると、そのページが誰でも、どのような環境
でも、情報の同一性を共有できるということです。
もし、作者と同じ環境が閲覧者にある場合、作者は閲覧者の環境を意識せず
にページ作成することができますが、現実はかなり異なっています。
実際には、閲覧者の環境は千差万別です。通信環境やプラットフォーム、利
用するユーザエージェントなどが違います。
当サイトにアクセスする閲覧者の環境をアクセスログで調べてみると、非常
に興味深い結果となっています。
2003年12月第4週のアクセスログから
OS： WindowsXP ---- 39.2％
Windows2000 --- 25.5％
Windows98 ---- 9.8％
WindowsMe ---- 4.7％
Mac OS 9.2 ---- 3.7％
Mac OS X ----- 3.6％
UNIX系OS ----- 1.2％
UA MSIE6.0 ----- 71.1％
MSIE5.5 ----- 6.2％
MSIE5.2（Mac） 2.8％
Mozilla7.0 -- 2.3％ （Netscape含む）
Opera7.0 ----- 0.9％
その他 ----- 2.6％
非視覚系 ---- 0.4％
こうした結果を見ると、圧倒的にマイクロソフトユーザが多いのが分かりま
すが、他のプラットフォームやソフトウェアも少なくありません。
現在の日本のインターネットユーザの具体的な数字は分かりませんが、例え
ば3000万人と推定した場合、１％は30万人で、0.5％は15万人となります。
当サイトのターゲットユーザは、ホームページ作成に興味のある方です。そ
うした閲覧者の利用する環境は、これといって特定するものではありません。
そうした場合、マイクロソフトユーザだけに偏ったページ作成というわけには
いかないのです。
あなたが作成するページは誰が見るのでしょう？
これがアクセシビリティの骨子です。マイクロソフトユーザは圧倒的ですが、
そうではない閲覧者も決して少なくないのです。
アクセシビリティは、閲覧者の環境に依存することなく Webページが提供す
る情報の同一性を、わけへだてなく提供するという試みです。
◆アクセシビリティを提供するフォーム
具体的な例示を見ながら、実際にどのようにすれば、アクセシブルなフォーム
を構築できるのか、その課題について探ってみます。
■入力情報の注意点
フォーム内の入力フィールドを作成する場合、その入力フィールドが何を求め
ているのかを明示することは当たり前です。
例えば、
お名前： （ ） メールアドレス： （ ）
このような表示では、名前やメールアドレスの入力が「任意」であると理解
されがちです。つまり、入力しなくてもよい、と判断されてしまいます。
名前やメールアドレスが必要ない場合にはかまいませんが、その場合にも、
何らかのメッセージが欲しいものです。
お名前（必須）：全角 （ ）
メールアドレス（任意）：半角 （ ）
入力項目が「必須」か「任意」なのかを判断する材料としての記載があれ
ば、閲覧者側で理解できるでしょう。無用な入力を避けたいのが閲覧者の心情
です。また、入力文字が半角なのか、全角漢字なのかも区別できるようになれ
ば、閲覧者が迷うことがなくなります。
■入力フィールドの構造化
前回のフォームのHTMLでは、以下のように記述しました。
<p>
お名前：<input type="text" name="名前">
メールアドレス：<input type="text" name="メール">
</p>
この入力フィールドでは、１つの段落の中で２つの入力欄があります。視覚
系ブラウザでは、「お名前」と書いてある右隣に入力フィールドが表示されま
す。つまり、「お名前」と書いてあるすぐそばに入力フィールドがあるため、
閲覧者はそこが「名前」の入力欄と判断するわけです。
しかし、この記述は入力フィールドが「構造化」されているわけではありま
せん。たまたまそばに入力欄があるに過ぎません。もし入力項目のラベルと入
力フィールドをテーブルなどのように異なるブロックで表現した場合、非視覚
系ブラウザのユーザはその関連付けができなくなる恐れがあります。
大変ありがたいことに、HTML4.01では、入力項目のラベルを構造化する機能
を持っています。
<p>
<label>お名前：<input type="text" name="名前"></label>
<label>メールアドレス：<input type="text" name="メール"></label>
</p>
label要素を異なるブロックで利用する場合には、for属性を利用します。
for属性の値は IDREFとなります。
<table summary="ご質問フォーム">
<tr>
<td><laber for="onamae">お名前：</label></td>
<td><label id="onamae"><input type="text" name="名前"></label></td>
このようにして、入力項目のラベルと実際の入力フィールドを関連付けるこ
とによって、入力フィールド全体を構造化します。
■入力フィールドの文字サイズ
通常 Webブラウザは、文字のサイズが指定されていなければ（あるいは文字サ
イズの指定を相対値で設定していた場合）、閲覧者側で自由に文字の大きさを
決めることができます。
ところが、一部の視覚系ブラウザでは、入力フィールドの文字サイズを変え
ることができません。高齢者にとっては非常に辛くなります。
そこで、form要素にスタイルシートで以下のように設定してください。
<form style="font-size:100%">
あるいは、
form { font-size: 1em }
こうすることで、閲覧者側で入力フィールドの文字サイズを自由に変更する
ことが可能になり、アクセシブルな環境を提供することができます。
■メニュー項目のグループ化
select要素で配置するプルダウンメニューでは、そのメニュー項目に応じたグ
ループ化を行うことで、数の多いメニューの「まとまり」を明示して、閲覧者
に優しく提供します。
HTML4.01では、メニュー項目をグループ化する optgroup要素が定義されてい
ます。せっかくの要素型なので、使わない手はありません。
<select name="職業">
<optgroup label="会社員">会社員
<option value="経営者">経営者/会社役員</option>
<option vlue="役職者">部長/課長/係長</option>
<option value="一般職">一般社員</option>
</optgroup>
〜 以下省略 〜
</select>
■入力フィールドのグループ化
各入力フィールドを、その性質に合わせてグループ化し、閲覧者に視覚的なフ
ォームの構造化を提供します。
HTML4.01では、いくつかの入力フィールドをまとめる要素と、そのグループ
化したラベルを表示する要素が用意されています。
fieldset 入力フィールドの各オブジェクトをグループ化する
legend グループ化した各オブジェクトのラベルを提供する
入力フィールドの集まりをグループ化し、その表題をつけることによって、閲
覧者は直感的に、その内容を把握することが出来ます。
■マウスが使えない環境のために
目が不自由な人や肢体不全の方は、マウスが操作できません。点字や音声、あ
るいは一部のテキストブラウザでは、基本的な操作をキーボードから行います。
そのとき、各入力フィールドにアクセスできないとしたら、作者も閲覧者に
とっても悲劇としか言いようがありません。
そうした閲覧者にも容易に入力フィールドを移動できるようにするのが、ア
クセスキーで、HTML4.01では、accesskey属性が定義されています。
また、アクセスキー以外にもタブキーのみの操作でも、入力フィールドを容
易に移動できる tabindex属性という機能もあります。
○accesskey="任意の１文字"
例えば、名前の入力欄では nキーを利用するとか、入力フィールドのラベルに
関連した文字を選びましょう。または、そばにアクセスキーをあらわす文字を
表示しておくといいかもしれません。
○tabindex="0〜32767の間のいずれかの数値"
タブキーを入力の順に数値を指定しておけば、閲覧者は単にタブキーを操作す
るだけで、入力フィールドを移動できます。
◆アクセシブルなフォームの作成
さて、それぞれの入力フィールドに関するアクセシビリティについて述べまし
た。そうした機能を利用しながら、誰でも、どんな環境でも正しくフォームの内
容が伝わるHTMLを作成します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>アクセシブルなフォーム/初心者のためのホームページ作り</title>
<style type="text/css">
<!--
form, input, textarea, select { font-size: 1em }
fieldset { padding: 1em }
div { margin: 1ex }
span { padding-right: 0.5em;
text-decoration: underline;
font-style: italic }
-->
</style>
</head>
<body>
<h1>アクセシブルなフォーム</h1>
<h2>ご質問はこちらから</h2>
<form action="#">
<fieldset>
<legend>個人情報</legend>
<div><label>お名前：<span>N</span>
<input type="text" name="名前" value="" tabindex="1" accesskey="n">
</label>
<label>メールアドレス：<span>A</span>
<input type="text" name="メール" value="" tabindex="0" accesskey="a">
</label>
</div>
<div>
性別：<label>男性 <span>M</span>
<input type="radio" name="sex" value="man" tabindex="2" accesskey="m">
</label>
<label>女性 <span>F</span>
<input type="radio" name="sex" value="woman" tabindex="3" accesskey="f">
</label>
</div>
<div><label>職業：
<select name="職業" tabindex="4">
<option selected>お選びください</option>
<optgroup label="会社員">
<option value="経営者">経営者/会社役員</option>
<option value="役職者">部長/課長/係長</option>
<option value="一般職">一般社員</option>
</optgroup>
<optgroup label="学生">
<option value="大学">大学生</option>
<option value="専門校">専門校生</option>
<option value="高校">高校生</option>
<option value="中学">中学生</option>
</optgroup>
<optgroup label="その他">
<option value="自営業">自営業</option>
<option value="フリーター">フリーター</option>
<option value="主婦">主婦</option>
<option value="無職">無職</option>
</optgroup>
</select>
</label></div>
</fieldset>
<p><label>ご質問内容 <span>T</span><br>
<textarea name="title" rows="5" cols="60" tabindex="5" accesskey="t">
ご質問はここにお書きください。
</textarea>
</label></p>
<p>
<span>S</span>
<input type="submit" value="送信" tabindex="6" accesskey="s">
<span>R</span>
<input type="reset" value="取消" tabindex="7" accesskey="r">
</p>
</form>
</body>
</html>
サンプルフォームの実行結果
http://www.scollabo.com/banban/magazine/mm/sample_82-1.html
◆解説
フォームに関連したスタイルシートと、HTML構文について解説します。
■form, input, textarea, select { font-size: 1em }
form、input、textarea、select の各要素で配置される入力フィールドの文字
サイズを指定しています。1em は具体的な大きさではなく、閲覧者が利用して
いる文字の標準の大きさの M の大きさで表現します。
そのため、実際の大きさは閲覧者のブラウザに依存します。これによって閲
覧者は、文字の大きさを自由に変更することが可能です。
■fieldset { padding: 1em }
入力フィールドをグループ化する要素の内側に、１文字分の余白を設定しまし
た。この要素で描かれる枠線が、入力フィールドとくっつきすぎないための視
覚的な効果を狙っています。
■div { margin: 1ex }
フォーム内で配置される汎用的なブロックレベル要素の余白を、x という文字
の大きさの幅で設定しています。
■span { padding-right: 0.5em; text-decoration: underline;
font-style: italic }
この要素に囲まれる文字を、下線表示と斜体で表現します。また、この要素の
右側には、１文字の半分の幅の余白を持たせています。
■<form action="#">
フォームを定義しています。 action属性の値を「#」としたのは、このフォー
ムの送信先を指定できないため、とりあえず擬似的な送信先としました。
このため、このフォームのデータはどこにも送信されません。実際には、デ
ータを処理するためのプログラムなどが送信先に当てられます。
action属性は、form要素内で必須の属性となります。
■<fieldset> 〜 </fieldset>
この範囲に囲まれた各入力フィールドを１つの括りとしてグループ化します。
一般的な視覚系ブラウザでは、枠線を表示してグループであることを明示しま
す。なお、この要素を利用する場合には、以下に示す legend要素を使ってラベ
ルを用意します。
■<legend>個人情報</legend>
fieldset要素でグループ化を定義したときに、そのグループのラベルを提供し
ます。一般的な視覚系ブラウザでは、枠線上にラベルを表示します。
■<div> 〜 </div>
form要素内で配置する各入力フィールドは、必ずブロックレベル要素内で配置
しなければなりません。そのため、ここでは汎用的に利用する div要素で入力
フィールドを囲みました。
なお div要素は、特に意味を持っていません。単純なブロックレベル要素と
して定義されているだけです。インラインレベル要素では、span要素が汎用的
に利用できるものとして定義されています。
■<label>男性 〜 </label>
入力フィールドにラベルを提供し、ラベルと入力フィールドの一体的な構造化
を明示しています。この要素の範囲に各種の入力フィールドを配置しますが、
この要素を入れ子に使うことは禁止されています。
■<span>N</span>
アクセスキーの文字を提示しています。span要素は意味を持たない汎用的に利
用できるインラインレベル要素です。
■<input type="text" name="名前" value="" tabindex="1" accesskey="n">
テキスト入力用のフィールドを提供しています。name属性で指定した名前は、
データが送信されるときに、データと対になって送られます。
なお value属性の値が空になっているのは、入力フィールド何に何も表示さ
せたくない場合に "" とします。何らかの文字列を記述すると、その値そのも
のが初期値として、入力フィールド内に表示されます。
ここでは、閲覧者に入力してもらうので、データの値を最初から空にしてお
くように設定しました。
この要素は、終了タグを持たない空（エンプティ）要素となっています。そ
のため XHTMLでは、行末に半角スペースを置いて /> と記述します。
タブキーは１番目にしていますので、最初にタブキーを押したときにこの入
力フィールドが選択されます。なお、一般的な視覚系ブラウザではサポート対
象外です。
アクセスキーは入力の内容から n としました。名前の n です。
■<input type="radio" name="sex" value="man" tabindex="2" accesskey="m">
ラジオボタン形式の入力フィールドです。ラジオボタンは、１つのフォーム内
では、１つしか選択することができない排他的入力フィールドです。複数の入
力を受け付けたい場合には、type属性で checkbox を指定します。
value属性に指定されている値 man は、データ送信の際、データと一緒に送
られます。
■<select name="職業" tabindex="4">
メニュー選択式の入力フィールドを定義します。name属性は必須ですので、忘
れずにメニュー内容が分かるテキストを記述します。アクセシキーが使えない
の少々残念なところです。
■<option selected>お選びください</option>
select要素内で配置されるメニューを設定しています。selected属性は値があ
りませんが、これはあらかじめ選択されていることを示します。どこに記述し
ていても、この属性がある場合、最初に表示されるメニューとなります。
この要素内に value属性が指定されていないのは、これが選択されるべき項
目ではないことを示しています。
option要素は、終了タグを省略することができますが、XHTMLでは省略不可
となっています。HTMLの場合でも、なるべく終了タグを記述する習慣をつけま
しょう。
また XHTMLの場合、selected属性を最小化できないため、
selected="selected" と、記述しなければなりません。注意してください。
■<optgroup label="会社員"> 〜 </opygroup>
この範囲にある option要素で定義された各メニュー項目をグループ化します。
label属性で指定されたテキストが、グループ化したときの表題になります。
一般的な視覚系ブラウザでは、その表題が斜体で表現されます。
■<input type="submit" value="送信" tabindex="6" accesskey="s">
type属性が submit とした場合、一般的な視覚系ブラウザではボタン形式で表
示され、データ送信の際に利用します。また value属性で指定されたテキスト
がボタンに表示されます。
■<input type="reset" value="取消" tabindex="7" accesskey="r">
type属性が reset の場合、入力したデータを初期化し元の状態にします。
一般的な視覚系ブラウザではボタン形式で表示され value属性で指定したテキ
ストがボタンに表示されます。
◆まとめ
今回は、アクセシビリティに重点を置いてフォームを作成しました。前回作成
したフォームと見比べてみるといいでしょう。
基本的には、見た目は大きく変ることはありません。特に視覚系ブラウザで
見たときには、その変化に気づかない場合があるでしょう。しかし、障害を持
つ人たちや、グラフィック・ユーザーインターフェイスが使えない環境の人た
ちが利用する非視覚系ブラウザでは、フォームそのものがまったく異なるレン
ダリングとなるでしょう。
ほんの少しの手間をかけることで、閲覧者の環境に依存しない「優しい」フ
ォームを提供することができます。HTMLを覚えるとき、こうしたアクセシビリ
ティにも関心を持ってください。
多くの作者が、ユニバーサル・デザインを心がけることで、インターネット
の有用性は、さらに飛躍することになることは間違いありません。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆Tips マウスが使えない環境のために
accesskey属性
マウスが使えない環境の閲覧者にとって、アクセスキーは非常にありがたいも
のです。この属性は、単にフォームで利用する以外に、各ナビゲーションを構
成するリンクにも利用できます。
アクセスキーの利用は、環境によって異なりますが、Windows では altキー
と同時に押して使います。また、Macintoshでは、controlキーを一緒押して使
います。ただし、利用するブラウザ銘柄によって微妙に異なります。
◆Tips RESET（取消）ボタンは必要か？
せっかく時間をかけて入力したフォームのデータを、誤って「取消」ボタンを
押してしまった経験はありませんか？
そんな時、もう一度同じことを入力しようという気がうせてしまいます。何
とも歯がゆい思いになり気が沈んでしまうものです。そう考えると、はたして
「取消」ボタンは必要なんだろうかという疑問が湧きます。
入力中に気が変わってデータ送信したくない場合には、ページを閉じるかあ
るいは他のページに移動する、修正する個所があった場合には、入力フィール
ドに戻ってもう一度書き直す、という操作をすればいいだけのことです。
その意味で深く考えた場合、「取消ボタンの必要性はない」という結論に至
ります。さて、皆さんはどのようにお考えになりますか？ ご意見をお聞かせ
ください。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆CSS講座（第３回） セレクタ
スタイルシートを適用する相手先が「セレクタ」です。前回説明したとおり、
スタイルシートはセレクタと、属性と値を含んだ「宣言部」から成り立っていま
す。今回の CSS講座は、その「セレクタ」に特化して詳しく解説します。
■基本的なセレクタ
一般的に最も多く利用されているのが、要素名をセレクタとしている場合です。
要素名をセレクタとするのが、最も基本的な形です。
p { color: #000000 }
これは、段落を定義する p要素に直接スタイルシートを指定するものです。
ただし、スタイルシートを適用できない要素型があります。特にヘッダ部で配
置する要素型の多くが、スタイルシートに適用できません。
適用できる要素は、body要素を含め、body要素内で配置される要素に限りま
すので注意してください。
リンキング方式（外部スタイルシート方式）や、エンベッド方式（ヘッダ部
で配置するスタイルシート）で、セレクタに特定の要素を指定した場合、その
ページすべてで、その特定された要素にスタイルシートが適用されます。
しかし、ある部分の段落では文字色を黒に、ある部分では白にしたいという
要求があった場合に、セレクタの内容を変えることで解決します。（後述）
■複数の要素に同じスタイルシートを適用させる
セレクタに要素をカンマで区切ることにより、複数の要素に同じスタイルシー
トを指定することが出来ます。
h1, p, div { color: #000000 }
■すべての要素に同じスタイルを適用させる
body要素内で配置されるすべての要素に一括して同じスタイルシートを指定す
る場合には、セレクタに「アスタリスク「＊」を記述します。
* { color: #000000 }
■要素の相関関係によるスタイルシート その１
ある要素が、単独では何もスタイルシートは適用されないけど、ある要素との
組み合わせで利用することによって、初めてスタイルシートが適用されるセレ
クタの利用法があります。
p em { color: #ff0000 }
このスタイルシートは、文字を強調する em要素が、p要素の中で配置された
ときにスタイルシートが適用されます。当然、他の要素内で配置されたときに
は、何も変化がありません。セレクタにセレクタを組み合わせた非常に便利な
セレクタです。２つの要素は半角スペースで区切ります。
■要素の相関関係によるスタイルシート その２
特手の要素に配置された直後の要素に適用するセレクタです。つまり、ある特
定の親要素内で配置される要素の前後関係で指定するものです。
body > h1 { color: #ff0000 }
これは、ある要素が、ある特定の要素内で配置されたとき、その場合の要素
のみにスタイルを適用する方法です。「その１」で定義されていすセレクタの
組み合わせによく似ています。
ここでは、body要素という親要素の中では位置された場合にのみ、h1という
見出し要素の文字色を変えるスタイルシートです。このセレクタを解釈する視
覚系ブラウザが限られているのは残念です。
■要素の相関関係によるスタイルシート その３
ある特定の要素に配置される子要素にのみ適用されるセレクタです。なお、こ
れは、「その１」で掲げたものと同じ意味を持ちますが、扱いが違います。
h1 + h2 { color: #ff0000 }
これは、親要素が body要素内に直接は位置されたとき、同じ body要素に配
置された h1要素の直後の h2要素のみに適用されるセレクタです。そのため、
２番目以降に配置された h2要素には適用されません。
このセレクタを実装している視覚系ブラウザが眼底されています。もっとも
利用頻度の高い MSIE では不可となっています。
■クラスセレクタ
セレクタにクラス名を設定するスタイルシートの手法は、「識別子セレクタ」
と並んで、非常にポピュラーなセレクタです。
セレクタ名は任意に指定することが出来ます。
○クラスセレクタ：その１
要素名＋ピリオド＋クラス名 p.black { color: #000000 }
この設定は p要素にクラス名を設けてスタイルシートを指定する方法です。
このスタイルシートを利用するために、HTMLでは以下のように記述します。
<p class="black">この部分のテキストは黒色になる</p>
適用する要素に、汎用属性の class属性を使って、その要素内容にスタイル
シートを適用させます。
○クラスセレクタ その２
ピリオド＋クラス名 .black { color: #000000 }
この場合には、要素名が指定されていません。単にセレクタにクラスを設
定しただけです。
このような場合、それを適用する要素は何でも可能です。その要素に、
class属性で指定するだけで、スタイルシートが適用されます。
<em class="black">この部分のテキストは黒色になる</em>
<div class="black">この部分のテキストも黒色になる</div>
クラスの設定で要素名を指定しなければ、ほとんどの要素に適用すること
ができる「汎用的なセレクタ」になります。
■識別子セレクタ
ここで言う識別子とは、「ID」を意味します。つまり、ID型のセレクトという
ことで理解してください。IDの識別子は、任意に設定することができます。
○IDセレクタ その１
要素名＋ハッシュマーク＋識別子 p#black { color: #000000 }
この設定方法は p要素にハッシュマーク「＃」をつけて識別子を blackとし
ています。このスタイルシートを利用するため、HTMLは以下のように記述し
ます。
<p id="black">この部分のテキストは黒色になる</p>
IDに伴う識別子は、自由に命名できますが、クラスセレクタと異なり、１つ
のページで、たった１回しか使用することができません。同じ識別子を持つ
要素に利用することができませんので注意してください。
なお、クラスセレクタはいくらでも利用することができます。
○IDセレクタ その２
ハッシュマーク＋識別子 #black { color: #000000 }
この設定は、特定の要素を指定しないで識別子セレクタを設定しています。
この場合、ほとんどの要素に適用できます。ただし、利用できる回数はそ
のページで、たったの１回だけとなります。２回以上を使用することができま
せん。識別子は、IDであるために１度しか利用できないのです。
◆まとめ
スタイルシートの適用先（対象となる要素）を決めるセレクタでも、ここで解
説したとおり、設定方法によって実に多様に変化します。
こうしたセレクタを自由に利用することで、同じ対象の要素でも、ずいぶん違
う表現が可能になり、ページを彩ることができます。
次回から、実際のスタイルシートを実現する属性と、その値について解説しま
す。属性には、テキスト、色、画像、枠線、サイズ、位置など非常に細かな設定
方法が定義されています。これから面白くなると思います。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆HTML、XHTML 属性の解説（第９回）--- summary属性
テーブルを定義する table要素の属性で、表組の内容を端的に表わします。
■summary属性 テーブルの内容を示す
DTD： すべての文書型定義で利用可能
属性値： テキスト
記述法： <table summary="HTMLの属性を示す表">
関連要素： table
XHTMLの制限：特にありません。
summary属性は、非視覚系ブラウザなどの閲覧者に、テーブルで表現されるコ
ンテンツの内容を、手短に説明したテキストで表わします。
視覚系ブラウザでは、テーブルに組み込まれたコンテンツの表現が苦手とさ
れています。テーブルをアクセイシブルにする手法は、他にもたくさんありま
すが、この属性では基本的なテーブルの「概要」を説明します。
なお、一般的な視覚系ブラウザでは、この属性はサポートされていません。
ですが、閲覧者の環境を考慮するならば、テーブルには必ず summary属性を利
用するように心がけましょう。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆更新情報
PHP (PHP-Hypertext Preprocessor) 関するページを追加しました。
比較的簡単に Webアプリケーションを開発できる PHPは最近人気が急上昇し、多
くの商用サイトでも使われています。また、プロバイダ側もサポートを開始して
いるとことがチラホラ見られ、ますます PHPの関心が高まっています。
なお、PHP関数リファレンスは未完となっています。関数は 1000あまりも定義
されていますので、全部を掲載するのは相当の時間を要します。できあがったも
のから順次掲載します。ご了承ください。
PHP入門 http://www.scollabo.com/banban/php/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
今回はここまで、ではでは・・
今週のおさらいは Webページにも掲載しましたので、是非見ておいてください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。
（今週のおさらい）
http://www.scollabo.com/banban/magazine/review_082.html
次回は久しぶりに、JavaScript講座を中心として、１月30日に配信を予定して
います。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、あなたがお使いのＯＳや Webブラウザ、テキストエデ
ィタなど、なるべく分かりやすく制作環境を明記していただけると回答しやすく
なると思います。
ただし、個人的な事由により返事が遅れることがあります。ご了承ください。
お急ぎの場合には、当サイト内の掲示板をご利用ください。きっと誰かが答えて
くれると思います。
発行者 ばんばん
協 力 スズキ・コラボレーション 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
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
＜えでぃた〜ず・る〜む＞
今日は「電子メールの日:123＝いいふみ」だそうで、1994年、当時の日本電子
メール協議会（JEMA・現Ｅジャパン協議会）が制定して、丁度今年で10年目に当
たります。そう考えると、以外に電子メールの歴史が浅いような気がします。
今では携帯電話を含めて電子メールの利用は、すっかり生活に定着した感があ
ります。このメールマガジンも、電子メールという仕組みで皆さんに送信されて
いるわけで、お互いにその享受に預かっているといえます。
最近はウィルスやスパムメールが断りもなく送りつけられて、その被害が深刻
になっています。電子メールという言葉と同時に「セキュリティ」という言葉も
すっかり定着してきた今日この頃です。
Ｅジャパン協議会の Webサイト ： http://www.ejf.gr.jp/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、HTML、スクリプトなどをご自分のページ作成
に自由に使っていただいても差し支えありません。
Copyright(C) 2002-2004 www.scollabo.com/banban/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
最新更新日 2004/1/28
Copyright(C) 2002-2004 banban@scollabo.com