HTML講座アクセシブルなテーブル/メールマガジン第85号今週のおさらい

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

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

＜第85号＞今週のおさらい 　　　　　　　　　　　　　　　毎週金曜日配信　What's New 2004/2/20 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 　　 ■ HTML講座第28回 --- アクセシブルなテーブル　その１　　　■ CSS講座　第６回 --- テキスト

◆ HTML講座 --- アクセシブルなテーブルの作成

何気なく使ってしまったテーブルのコンテンツ。その出来栄えに、自分なりに満足している人も少なくないと思います。かくいう私も、当サイト内で非常にたくさん使っています。

実は、テーブルは時には作者の意思とは裏腹な振る舞いをする場合が多いものなのです。今回は、テーブルの性質を見極め、その上で、誰にでもストレスなくテーブルをレンダリングさせるための手法について説明します。

■ テーブルの振る舞い

表を主体としたコンテンツを組み上げるテーブルは、一般的に以下のような性質を持っているといわれています。

データの読み込みが完了するまで何も表示されない。
セルの中に、他のブロックレベル要素を配置できる。
セルは左から右へと順次解釈される。つまり上から下方向には向かわない。

なお、一部の視覚系ブラウザでは、データ読み込み中であってもレンダリングを開始するものもあります。

テーブルという要素は、各セル内に他のブロックレベル要素を配置することが可能なため、レイアウトを構築する上で非常に多くの Webサイトで利用されています。

セルのデータは、基本的に左から右方向へ順次レンダリングを開始します。そのため、非視覚系ブラウザではレイアウトで利用したテーブル全体を把握するのが非常に困難になります。W3C が、「レイアウトを表現するためにテーブルを使うのは好ましくありません。やめましょう」と述べているのは、このための措置なのです。

■ アクセス性を高める機能

さて、テーブルという要素を使ってある表を作成した場合、視覚系ブラウザならば閲覧者は割りと楽にその内容を読み取ることができますが、非視覚系ブラウザ、それも音声ブラウザとなると、なかなか表全体を理解し掴み取ることが困難になります。

幸いなことに、HTML4.01ではそうした閲覧者にもテーブルを理解できるような機能が集約されています。そんな機能をフルに使うことで、一見何も変わり映えしないテーブルが、誰にでも理解可能な情報提供の要素に変化させることができます。

以下の表は、アクセシビリティを高めるための属性の一覧です。（これもテーブル）

属性	関連要素	説明
abbr	th	ヘッダセルの概要を示す
summary	table	テーブル全体の概略を示す
scope	td	そのセルがどの方向に関連するかを示す
headers	th	ターゲットとなるセルの IDREF を明記して関連付ける

なお、ここに掲げた属性は、視覚系ブラウザではサポートされていないのが実情です。そうしたブラウザを利用する閲覧者が、テーブルを直感的に判読できるために不要ということになっているようです。

そのため、以下のサンプルで表示する2つのテーブルは、まったく同じにレンダリングします。

普通のテーブルとアクセシブルなテーブルの比較

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

次回も引き続きアクセシブルなテーブルについて解説します。

PageTop

◆ CSS講座 --- テキスト　その１

Webページ上における情報伝達の手段として、テキストは最も原始的でありながら最も重要な要素であることは疑いもありません。

今回はテキストに関して、どのようなスタイルシートを適用することで、より読みやすい環境を提供できるのかなどについて解説します。

■ 文字間の余白

文字同士が近すぎると読みにくいものです。例えば、

ここではごく標準のテキスト設定になっています。文字間や行間には何も余白を設定していません。そのため、少し読みにくいかもしれません。長文に及ぶテキストでは、閲覧者が読もうという気がうせてしまう恐れが多分にあることでしょう。

せっかく一生懸命作成するコンテンツですから、多くの閲覧者に呼んでもらいたいところです。そのために、適度な余白を入れることによって、快適に読める環境を具現化します。以下はその設定方法です。

  letter-spacing    文字間の余白を設定する。
　line-height       行間の余白を設定する。

　書式：
　　p { letter-spacing: 1px;
        line-height:   130% }

この設定は、実際にこのページのテキスト全体に適用させています。

■ 英文字の単語間の余白

英語の文字コンテンツの場合、単語間の余白を設定することでかなり読みやすくなります。単語間の空白を設定は以下のとおりです。 (MSIE不可)

  word-spacing    文字間の余白を設定する。

　書式：
　　p { word-spacing: 1.5em }

このスタイルシートの結果は以下のとおりです。

The Semantic Web is the representation of data on the World Wide Web. It is a collaborative effort led by W3C with participation from a large number of researchers and industrial partners.

■ 文字の大きさ

文字の大きさはどのような要素にも設定可能です。大きさを指定する単位は、前回のメールマガジン「第84号」で解説したとおりです。具体的な設定方法は、

  font-size    文字の大きさを指定する。

　書式：
　　p { font-size: large }

この大きさのスタイルシートの結果は以下のとおりです。

ここでは文字の大きさが large になります。

■ フォント名を設定する

表現するテキストのフォント名を指定する属性は以下のとおりです。ただし、閲覧者の環境で同じフォント種が実装されていない場合には無効になります。カンマで区切ることにより複数指定することが可能です。

  font-family    テキストのフォント名を指定する。

　書式：
　　p { font-family: "ヒラノギ明朝 Pro W3", "MS 明朝", serif }

この大きさのスタイルシートの結果は以下のとおりです。

ここでは文字のフォント種が、明朝体になります。

■ 文字のスタイルを設定する

文字の書体を設定します。ここでは「斜体」か「普通」に分けられます。また、文字の強調を示すこともできます。設定する属性は以下のとおりです。

  font-style    文字のスタイルを指定する。
  font-weight   文字の強調を指定する。

　書式：
　　p { font-style: oblique }
　　p { font-weight: bold }

この大きさのスタイルシートの結果は以下のとおりです。

ここでは文字が斜体で表現されます。

ここでは、文字が強調されます。

テキストにスタイルシートを適用する場合、何よりも先に優先されるのは読みやすさです。へんに文字を強調したり、斜体にすると返って読みにくい場合がありますので注意してください。また、文字の大きさは極力「相対値」を使うように心がけましょう。次回も引き続きテキストに関連したスタイルシートについて解説します。

初版公開日 2004年2月20日

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

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