初版公開日 2002年10月7日 最新更新日 2003年4月28日
Copyright(C) 2002〜2004 banban@scollabo.comテキストを表現するにも実に様々な手法があります。見出し、段落、本文、改行、フォントのスタイルなどテキストの表現には奥の深いものがあります。テキストとは、まさに文字列を表わし、多くの情報を見る側に伝える重要な手段です。そのテキストにもアクセシビリティがあり、作法があります。誤った文法で綴るテキストは、伝えたい情報が正しく伝わらない可能性もあり、お互いに不幸な結果を生じてしまいます。
ここでは、正しい作法を身に付け、正しい文法で大切な情報を伝える術（すべ）を解説します。特に、中級者が犯しやすいミスを指摘します。
たかがテキストでもこれらの点を考慮して記述するように心がけます。
渓流での鱒釣りの餌は、主に「いくら」<br> が使われるケースが多いようです。句読点で改行させるようにしましょう。変な改行は、音声ブラウザを悩ますだけです。正しく発音できず、「視覚障害者」に情報が伝わりません。ブラウザの自動改行に任せるのが、１番安全でしょう。
また改行要素を連発して、あたかも段落に見せかけるように使われることがありますが、明らかな文法違反です。特に初心者が犯しやすい表現です。
見出し要素は、あくまでも「章」や「節」の見出しとして利用します。概して視覚系ブラウザでは見出し要素の第１〜第６まで、大きさを変えて表示させますが、決してフォントの大きさを利用するような本文を記述すべき要素ではありません。
本来、見出し要素の大きさは決められていません。ブラウザのメーカーが判断して表現しているに過ぎないのです。ブラウザの中には見出し要素をセンタリングして表示するものさえあります。
音声ブラウザでは、見出し要素を「女声」、本文を「男声」などに分けて発音し、「視覚障害者」に見出しと本文が理解できる工夫がなされています。見出し要素だけで本文を記述するのは、明らかな文法違反です。
また、第１見出し要素が出現した後の見出しは、第２であって、決して第３や第４が配置されてはいけません。最初に出現する見出しも、必ず第１でなければなりません。えてして初心者が間違えやすいものです。
お年寄りには小さな文字では見えにくいものです。そこで視覚系ブラウザでは、設定を変えてフォントの大きさを自由に調整する機能があります。高齢化時代を迎えた今、ほとんどの視覚系ブラウザに備わっています。
ところが、制作者側でスタイルシートでフォントの大きさを、「絶対値」に設定してしまうと、ユーザのブラウザ側ではこれを変えることができなくなります。
下記のような「絶対値」で設定した小さな時は、お年寄りには歓迎されません。
４ポイントのテキスト このテキストは、４ポイントで設定しています。
６ポイントのテキスト このテキストは、６ポイントで設定しています。
２ミリのテキスト このテキストは、２ミリで設定しています。
３ミリのテキスト このテキストは、３ミリで設定しています。
フォントの大きさを設定する場合は「相対値」でしましょう。そうすれば、ブラウザ側の設定にも相対的に変化して見えやすくなり、どんな人にも大切な情報が伝わります。
具体的な相対値の単位 small、x-small、xx-small、medium、large、x-large、xx-large、%、em、ex、px など
HTML3.2まで使用されていたタグの種類に「物理タグ」なるものが存在しています。その代表的なものに、HTML4.0以降では非推奨となった font要素があります。
物理要素は、ユーザのハードやソフトに依存します。W3Cでも「論理的でない」要素を使用するのは控えるよう勧告しています。
| 物理要素 | 機能 | 備考 |
|---|---|---|
| b | 強調文字 | 一般的に太字で表示 |
| i | 斜体文字 | 一般的に斜体で表示 |
| u | 下線付き文字 | 一般的に文字に下線がついて表示（非推奨) |
| s | 抹消線付き文字 | 一般的に文字に抹消線がついて表示（非推奨) |
| tt | テレタイプ文字 | 一般的に固定ピッチフォントで表示 |
| strike | 抹消線付き文字 | 文字に抹消線がついて表示（非推奨) |
スタイルシートによってテキストのフォントの形や表現などを設定する方法です。物理要素の替わりに使うことを強くお奨めします。
| 属性 | 値 | CSS記述 | サンプル |
|---|---|---|---|
| font-weight | bold | p { font-weight: bold } | 強調文字 |
| text-decoration | underline | p { text-decoration: underline } | 下線付き文字 |
| text-decoration | line-through | p { text-decoration: line-through } | 抹消線付き文字 |
| text-decoration | overline | p { text-decoration: overline } | 上線付き文字 |
| font-style | italic | p { font-style: italic } | 斜体文字 |
| color | 色コード | p { color: #00f } | 色付き文字 |
| letter-spacing | 数値＋単位 | p { letter-spacing: 1em } | 文字間隔 |
| font-family | フォント名 | p { font-family: serif } | 明朝体 |
| font-family | フォント名 | p { font-family: sans-serif } | ゴシック体 |
テキストに論理的な意味を与えるものを、「フレーズ要素」と呼びます。これは、通常のテキストの中で使われるインラインレベル要素です。
フレーズ要素には下記の種類があります。すべて終了タグ必須です。
| 要素名 | 機能 | 備考 | サンプル |
|---|---|---|---|
| em | 強調 | 文字を強調させ、一般的には斜体で表示 | Emphasis |
| strong | 強い強調 | 文字を強調させ、一般的には太字で表示 | Strong |
| dfn | 定義用語 | 文書内での定義された用語を指し、一般的には斜体で表示 | 定義 |
| code | コード | プログラムなどの記述に使用、固定ピッチフォントで表示 | code |
| samp | サンプル | プログラムなどの記述に使用、固定ピッチフォントで表示 | Sample |
| kbd | キーボード | ユーザによって入力された文字、固定ピッチフォントで表示 | Keyboad |
| var | 変数 | プログラムの変数や引数の表現に使用、斜体で表示 | $banban |
| cite | 引用文献 | 文章を引用する際の引用先名を記述 | なし |
| abbr | 略語 | 発音できない略語などを表現する際に使用 | www |
| acronym | 頭字語 | 発音できる略語などの表現に使用 一般的に視覚系ブラウザではツールチップが表示される | LAN |
初版公開日 2002年10月7日 最新更新日 2003年4月28日
Copyright(C) 2002〜2004 banban@scollabo.com