テキスト記述に関する作法

テキストを表現するにも実に様々な手法があります。見出し、段落、本文、改行、フォントのスタイルなどテキストの表現には奥の深いものがあります。テキストとは、まさに文字列を表わし、多くの情報を見る側に伝える重要な手段です。そのテキストにもアクセシビリティがあり、作法があります。誤った文法で綴るテキストは、伝えたい情報が正しく伝わらない可能性もあり、お互いに不幸な結果を生じてしまいます。

ここでは、正しい作法を身に付け、正しい文法で大切な情報を伝える術(すべ)を解説します。特に、中級者が犯しやすいミスを指摘します。

テキストに関するアクセシビリティ

テキストの記述には、次の点に注意します。

たかがテキストでもこれらの点を考慮して記述するように心がけます。

改行

テキストを改行させる br という強制改行要素を使うことには何も問題ありません。問題となるのは、下記のように文脈の途中で改行させてしまうことです。
渓流での鱒釣りの餌は、主に「いくら」<br>
が使われるケースが多いようです。
句読点で改行させるようにしましょう。変な改行は、音声ブラウザを悩ますだけです。正しく発音できず、「視覚障害者」に情報が伝わりません。ブラウザの自動改行に任せるのが、1番安全でしょう。

また改行要素を連発して、あたかも段落に見せかけるように使われることがありますが、明らかな文法違反です。特に初心者が犯しやすい表現です。

見出し要素

見出し要素は、あくまでも「章」や「節」の見出しとして利用します。概して視覚系ブラウザでは見出し要素の第1〜第6まで、大きさを変えて表示させますが、決してフォントの大きさを利用するような本文を記述すべき要素ではありません。

第1見出し要素 h1

第2見出し要素 h2

第3見出し要素 h3

第4見出し要素 h4

第5見出し要素 h5
第6見出し要素 h6

本来、見出し要素の大きさは決められていません。ブラウザのメーカーが判断して表現しているに過ぎないのです。ブラウザの中には見出し要素をセンタリングして表示するものさえあります。

音声ブラウザでは、見出し要素を「女声」、本文を「男声」などに分けて発音し、「視覚障害者」に見出しと本文が理解できる工夫がなされています。見出し要素だけで本文を記述するのは、明らかな文法違反です。

また、第1見出し要素が出現した後の見出しは、第2であって、決して第3や第4が配置されてはいけません。最初に出現する見出しも、必ず第1でなければなりません。えてして初心者が間違えやすいものです。

フォントの大きさ

お年寄りには小さな文字では見えにくいものです。そこで視覚系ブラウザでは、設定を変えてフォントの大きさを自由に調整する機能があります。高齢化時代を迎えた今、ほとんどの視覚系ブラウザに備わっています。

ところが、制作者側でスタイルシートでフォントの大きさを、「絶対値」に設定してしまうと、ユーザのブラウザ側ではこれを変えることができなくなります。

下記のような「絶対値」で設定した小さな時は、お年寄りには歓迎されません。

4ポイントのテキスト   このテキストは、4ポイントで設定しています。

6ポイントのテキスト   このテキストは、6ポイントで設定しています。

2ミリのテキスト   このテキストは、2ミリで設定しています。

3ミリのテキスト   このテキストは、3ミリで設定しています。

フォントの大きさを設定する場合は「相対値」でしましょう。そうすれば、ブラウザ側の設定にも相対的に変化して見えやすくなり、どんな人にも大切な情報が伝わります。

具体的な相対値の単位 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によるテキストのスタイル

スタイルシートによってテキストのフォントの形や表現などを設定する方法です。物理要素の替わりに使うことを強くお奨めします。

CSS属性と値一覧
属性 CSS記述 サンプル
font-weightboldp { font-weight: bold }強調文字
text-decorationunderlinep { text-decoration: underline }下線付き文字
text-decorationline-throughp { text-decoration: line-through }抹消線付き文字
text-decorationoverlinep { text-decoration: overline }上線付き文字
font-styleitalicp { 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


This Page is HTML4.01 Valid! 初版公開日 2002年10月7日   最新更新日 2003年4月28日
Copyright(C) 2002〜2004 banban@scollabo.com