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

Web作成支援

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

<第86号> 今週のおさらい
                毎週金曜日配信 What's New 2004/2/27
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
   ■ HTML講座  第29回 --- アクセシブルなテーブル その2
  ■ CSS講座 第7回 --- テキスト その2
HTML講座 --- アクセシブルなテーブルの作成 その2
今回は、多次元に渡るテーブルのアクセシビリティについて解説します。多次元テーブルとは、見出しとなるヘッダセルが複数設定されている表組を表わします。
例えば、以下の表組を見てみるとお分かりになると思います。
氏名 英語 国語
前年平均点 今年平均点 前年平均点 今年平均点
田中さん 65.8点 63.5点 54.1点 55.7点
鈴木さん 48.2点 51.1点 37.9点 43.3点
この表を、別の角度から分析してみると以下のように、3つの次元に分類されているのが理解できるでしょう。

多次元に分けた票を個別に表示している図

各見出しとデータセルを関連付ける
こうした多次元の表組における見出しとデータは、視覚系ブラウザでは直感的に関連付けて読み取ることができます。つまり、「田中さん」 の 「国語」 の 「今年平均点」 が 「55.7点」 であるということを、視覚的に理解できます。
しかし非視覚系ブラウザ、特に音声ブラウザでは、それぞれを関連付けて読み取ることができません。 これでは、 視覚障害を持った閲覧者が情報から疎外される結果となってしまいます。
幸いなことに HTMLでは、 そうした音声ブラウザでも多次元的な表組を理解できるような 「属性」 が用意されています。
axis属性の利用
テーブルのヘッダセル th要素 に、あらかじめ axis という属性で「分類名」を設定し、それに関連するデータセルに、headers属性や、scope属性を利用して関連付けることができます。
そうした属性を利用することで、 以下の図のように、 音声ブラウザでも直感的に見出しセルとデータセルを関連付け、 各データが何を示しているのかを読み取ることができます。

見出しセルとデータセルを関連付けている図

この図で示されるテーブルの HTMLコーディングは、以下のとおりになります。
<table cellpadding="3" cellspacing="0" border="1" summary="成績一覧">
<caption>期末試験成績一覧表</caption>
<tr>
<th abbr="受験者" rowspan="2">氏名</th>
<th colspan="2" id="english" axis="英語" abbr="科目">英語</th>
<th colspan="2" id="tongue" axis="英語" abbr="科目">国語</th>
</tr>

<tr>
<th id="before_1" axis="英語前期" abbr="英語2003年">前年平均点</th>
<th id="this_1" axis="英語今期" abbr="英語2004年">今年平均点</th>
<th id="before_2" axis="国語前期" abbr="国語2003年">前年平均点</th>
<th id="this_2" axis="国語今期" abbr="国語2004年">今年平均点</th>
</tr>

<tr>
<th abbr="名前" axis="受験者" id="tanaka" scope="row">田中さん</th>
<td headers="tanaka english before_1">65.8点</td>
<td headers="tanaka english this_1">63.5点</td>
<td headers="tanaka tongue before_2">54.1点</td>
<td headers="tanaka tongue this_2">55.7点</td>
</tr>

<tr>
<th abbr="名前" axis="受験者" id="suzuki" scope="row">鈴木さん</th>
<td headers="suzuki english before_1">48.2点</td>
<td headers="suzuki english this_1">51.1点</td>
<td headers="suzuki tongue before_2">37.9点</td>
<td headers="suzuki tongue this_2">43.3点</td>
</tr>
</table>
このHTMLコーディングの実行結果は以下のとおりです。
axis属性を利用したテーブルのサンプル
(詳しい HTML構文は、今週のメールマガジン 「第86号」 をお読みください。)
次回は、視覚系ブラウザで表現するテーブルの上手な利用法について解説します。
CSS講座 --- テキスト その2
今回も引き続き、情報提供の主たる手段であるテキスト(文字列)に関連するスタイルシートについて解説します。
文字の位置指定
文字情報を示すテキストの位置を指定するスタイルシートの属性は、text-align属性です。ただし、この設定は、ブロックレベル要素のみに適用され、インラインレベル要素では無視されますので、扱いに気をつけてください。
具体的な書式は、以下の構文のとおりです。
 p { text-align: left }    文字の左寄せ (デフォルト値)
 p { text-align: center }  文字の中央揃え
 p { text-align: right }   文字の右寄せ
このスタイルシートの使用例は以下のとおりです。

left --- ここでは左寄せになります。

center --- ここでは中央揃えになります。

right --- ここでは右寄せになります。

インデントの指定
インデントとは、段落などで示される最初の文字を、通常の位置からの 「字下げ」 を設定するものです。特に必要というわけではありませんが、このようスタイルの文字情報はイギリスの新聞社から伝わった 「慣わし」 といわれています。スタイルシートでは、text-indent属性でインデントを設定します。
一般的にはインデントとは、その段落の始まりを意味するものです。
インデントソ設定する具体的な書式は以下のとおりです。
 p { text-indent: 1em }   1文字分のインデント
 p { text-indent: 30px }  30ピクセル分のインデント
このスタイルシートで表わすインデントの表現は以下のとおりです。

ここでは普通に表現されています。

ここでは、1文字分のインデントが設定されています。

ここでは、30ピクセル分のインデントが設定されています。

英文の大文字と小文字の設定
英文における文字を、大文字や小文字で区別して表現する方法が、text-transform属性です。この属性では、1文字目の英文を大文字にしたり、全部を大文字、あるいは小文字に変換するものです。この属性の値となるものは以下のとおりです。
具体的な書式は以下のとおりです。
 p { text-transform: captalize } 
 p { text-transform: lowercase } 
 p { text-transform: uppercase } 
実際の使用例は以下のとおりです。当然ながら日本語文字には適用されません。

W3C とは、world wide web wonsortium の略です。[none」

W3C とは、world wide web consortium の略です。[captalize]

W3C とは、world wide web wonsortium の略です。[lowercase]

W3C とは、world wide web wonsortium の略です。[uppercase]

文字に線をつける
文字に下線をつける場合、非推奨扱いとされる u要素がありますが、これは物理タグに分類されているのであまり使いたくないところです。
また、同じように下線を表示する ins要素の場合には、何らかの追加する部分があった場合に利用するフレーズ要素なので、この要素で下線を表示させるためだけに利用するのは好ましくありません。
スタイルシートでは、text-decoration属性によって多様な線を表示させることができます。その値は以下のとおりです。
具体的な書式は以下のとおりです。
 p { text-decoration: underline }
 p { text-decoration: overline }
 p { text-decoration: line-through }
 p { text-decoration: blink }
このスタイルシートの実際の使用例は以下のとおりです。ただし、 blink の値は、これを実装している Webブラウザが限られていますので、あなたの環境では表現しないかもしれません。

ここでは、文字に下線を付けて表現しています。

ここでは、文字に上線をつけて表現しています。

ここでは、文字に末梢線をつけて表現しています。

文字にスモールキャップを設定する
スモールキャップとは大文字でありながら小文字のように小さくしたような形状をしている種類の文字の表現を指します。
スタイルシートで文字にスモールキャップを設定するのは、font-variant属性です。以下はその値となります。
具体的な書式は以下のとおりです。
 p { font-variant: small-caps }
このスタイルシートの実際の使用例は以下のとおりです。

font-variant属性によって、small-caps は指定していません。

ここは font-variant属性によって、small-caps を指定しています。

フォントのスタイルシートの一括設定
前回 「第85号」 で解説したとおり、フォントの設定には文字の書体を指定する font-style属性、文字の強調の有無を指定する font-weight属性、フォントの大きさを指定する fon-size属性、文字の行間を指定する line-height属性、また、フォント名を指定する font-family属性や、今回説明した font-variant属性などを一括して設定することができます。
こうしたフォントの一括設定の書式は以下のとおりです。
p { font: font-style font-variant font-weight
    font-size/line-height font-family }
ここでは、それぞれの属性を示していますが、実際にはその属性の値を空白で区切って設定します。その場合、font-style、font-variant、font-weight の値の順番は自由に記述できますが、それ以降は決められた書式の順で設定しなければなりません。なお、フォント名やフォントの大きさ、行間設定などは省略することが可能です。
具体的なフォント一括のスタイルシートの記述例は以下のとおりです。
p { font: obelique normal bold 1.5em/130% sserif }
このスタイルシートの実際の使用例は以下のとおりです。

ここでは通常の5割ほど大きな明朝体を斜体で表現しています。

テキストに関わるスタイルシートを利用することで、その表現方法は無限です。自分なりの工夫で、フォントや文字の形態を考えるのも面白いのではないでしょうか。フォントというものは、簡単そうでなかなか悩み多いものです。
次回は、余白 (margin) について詳しく解説する予定です。


This page is Valid HTML 4.01! 初版公開日 2004年2月27日
Copyright(C) 2002-2004 banban@scollabo.com