| | | |
2004年 7月 31日 土曜日
CSSでテキストの指定を行います。
アクセシビリティなWebページには色の指定は重要です。富士通のColorSelectorを使用してカラーと背景色の組み合わせのチェックを必ず行います。これはWAIのガイドラインで優先度3の項目になります。
フォントプロパティの簡単な説明を行います。
先ほどのColorSelectorで組み合わせた色は、サイトウィンドウの「色」に登録しておくと楽です。登録の方法は「カラーパレット」で色を指定しておいて、サイトウィンドウでcontrolを押しながらマウスボタンをクリックし、「新規色」を選択します。
色の指定は16進数で指定します。"red"などのように指定するとIE 3など古いブラウザでは対応できないと言われています。
アクセシビリティなWebページの場合は、WAIによりredなどの色の名前ではなく、数値で指定することを推奨しています。
このサイトウィンドウの色は、フォントプロパティのカラーや背景色までドロップできます。
または、「スウォッチ」パレットから「サイトの色」を選択し、フォントプロパティのカラーや背景色までドロップできます。
背景色には透明があることが特長です。
アクセシビリティで大事なのは文字色として指定した場合は背景色も指定するということです。
これはCSSでは、ユーザ自身が作成したCSSをユーザが追加指定することがある場合(例えば、背景を黒、文字色を白といった組み合わせの方がディスプレイでは、より見やすい)は、タグセレクタだと問題はないのですが、IDセレクタやクラスセレクタで文字色を白に近い色にWebサイト作成者が指定していた場合に、文字色が白、背景色も白といった組み合わせになり、判読不可能になる「可能性」があります。
フォントサイズを指定するのですが、ここでは「愚痴」を書かずにおけません。(^^;)
フォントサイズをピクセル指定されたWebページを、Windows版 IEでフォントの拡大する手順がわかりずらいために、Webサイト作成者はフォントをピクセル指定しないこととなっています。その他、バグだらけですし、諸悪の根元のこのミジンコ以下のブラウザのために、世界中のWeb制作者はいらん手間がかかるのです。しかも、MicrosoftはW3Cに、バグを標準仕様にしろっと提案という名の圧力をかけているのです。最低最悪です。以上(^^;)。
ピクセル指定以外のフォントサイズの単位には、em、%、mediumなどのキーワードがあります。
まず、mediumなどのキーワードは、ブラウザの種類やバージョンによって表示される文字のサイズが異なります。テキストだけのWebページでは問題ないのですが、画像などの大きさの単位はピクセルですから、画像と文字の視覚要素を計算しずらくなります。
ブラウザの見え方が少ない相対的に指定する単位は経験的に%で指定することだと思います。
行間を150%のように指定します。Macのブラウザですと、既定値として行間がとられていて読みやすいのですが、Windowsだと行間が100%となっているために、読みづらいです。150%〜170%くらいと指定しておきます。
で、行間の問題点としては、Netscape Navigator 4.xなどでは画像がテキストに重なります。後で記しますが、Netscape Navigator 4.x用のCSSでは行間を指定しないようにします。
テキストをイタリック体、オブリック体にします。イタリック体はイタリック体専用のデザインされたフォントになり単純な斜体とは異なります。オブリック体はゴシック体を斜体にしたようなフォントになります。
太字にしたい場合に指定します。
フォントの文字幅を設定します。「condensed」は文字幅が狭く縦に長い、「expanded」は文字幅の広い書体になります。「ultra」の方が「extra」よりも、より強調された文字幅に設定されます。
text-decorationプロパティで指定できる要素を設定します。この要素のうちblink(文字を点滅させる)は、アクセシビリティなWebページでは指定しません。WAIのガイドラインでは優先度2の項目です。
一般的なフォント名を記しておきます。
| 種類 | フォント名 |
|---|---|
| 明朝体 | serif |
| ゴシック体 | sans-serif |
| 筆記体・草書体 | cursive |
行揃え(text-align)プロパティです。左揃え、右揃え、中央揃え、両端揃えを指定できます。ただし両端揃えは2バイト文字には適用されないブラウザが多いです。
スモールキャップ(font-variant)プロパティです。英字の小文字が大文字を小さくしたようなスモールキャップフォントで表示します。
text-transformプロパティです。頭文字を大文字(capitalize)は、単語(英字)の最初の文字を大文字に表示します。
大文字(lowercase)は、全ての英字を小文字で表示します。小文字(uppercase)は、全ての英字を大文字で表示します。
font-size-adjustプロパティです。異なる英字フォントにおいて、見た目の大きさを調整します。
1行目の最初の文字をインデントします。
word-spacingプロパティです。単語と単語の間隔を開けます。
letter-spacingプロパティです。文字と文字の間隔を開けます。
vertical-alignプロパティです。縦方向の位置揃えになります。
| 要素名 | 内容 |
|---|---|
| baseline | ベースラインの位置は・・・英小文字の下端になるのですが、例えばpとかgとかの文字の下端の位置が、他のabcなどの文字と異なりますよね。ベースラインは、pとかgの下端ではなく、abcなどの下端の位置を基準線(baseline)にするという意味です。vertical-alignの初期値がbaselineです。そのため、何も指定しない場合は、画像の下端と次行の画像に数ピクセルの隙間が開きます。 |
| middle | 英字小文字"x"の中心線を縦位置に指定します |
| bottom | 下に位置付けます。画像を上下に重ねる場合は、bottomを指定すれば隙間が空きません。 |
Copyright © 1998-2006 OUTDOORMAC All Rights Reserved.
