BlogでHTML日進月歩

HTML及びCSSの理解を深め、Webサイト作成初級者からの脱却を目指します。

エントリー記事

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

このページの一番上へ

fontタグからの脱却

<font>タグで指定できるものには、テキストの大きさや色、字体等があります。しかしこれらの情報は、例えば音声ブラウザにとっては全く意味を為しません。

これらは、スタイルシートで指定することができます。

font color指定からの脱却

colorプロパティでフォントの色を指定します。

color:red;のように名前による指定は、環境によっては解釈されない恐れがあります。color:#ff0000;またはcolor:#f00;のように16進法による指定を推奨します。

テキストやリンクの文字色を変更する場合には、必ず背景色を指定しておきましょう。ユーザー側でデフォルトの文字色及び背景色を変更している場合、もし同時に背景色をしていなければ閲覧に大きな支障をきたす恐れがあります。

背景画像を指定している場合でも、背景色を指定しておきましょう。ナローバンド環境や携帯電話環境を中心に、画像を表示しない設定にしているユーザーが居ます。このような環境においては背景画像が表示されませんので、場合によっては閲覧に大きな支障をきたす恐れがあります。

font size指定からの脱却

font-sizeプロパティでフォントのサイズを指定します。

サイズを指定する単位には%(パーセント)等の相対指定を推奨します。%指定している場合、視力の弱い訪問者が任意にサイズを変更して見やすくすることができますが、px(ピクセル)で指定しているサイトでは、ブラウザによっては任意にサイズを変更できないものがあるからです(*1)

但し%で指定する場合、次の2点に注意する必要があります。

  1. 利用環境によってサイズが異なる

    OSやブラウザの違いによりテキストのサイズが異なります(*2)

  2. 親要素のサイズを継承する

    次のようにサイズを指定した場合、h1要素のテキストはbody要素のテキストと比較して何倍のサイズになるか考えてみましょう。

    body{ font-size:80%; }
    h1{ font-size:160%; }

    答えは2倍…ではありません。h1要素はbody要素内に含まれるので、body要素のサイズを基準に160%となります。よって、正解は1.6倍です。この場合、h1要素のテキストをbody要素のテキストの2倍にするには
    h1{ font-size:200%; }と指定する必要があります。

相対指定には、他にもem指定キーワード指定がありますが、キーワード指定の場合には環境により適用されるサイズが異なります。これは、HTML4.01以降において非推奨要素であるfont要素が7段階中3を標準サイズとしていたものを、そのままCSSのキーワードに置き換えたことによるものです。CSSの仕様においては、標準サイズは4番目のmediumと定義されていますが、古いブラウザやIE6の互換モードでは3番目のsmallが標準サイズと解釈されてしまいます。

特にXML宣言のあるXHTML文書は通常標準モードで表示されますが、IE6では互換モードで表示されてしまうので注意が必要です。

font family指定からの脱却

font-familyプロパティでフォントの種類を指定します。
フォント名に空白が含まれる場合、必ず「"」(二重引用符)で囲いましょう。

利用環境により、使用可能なフォントが異なります。「,」(コンマ)で区切って複数指定すると良いでしょう(*3)。先に指定したフォントの方が優先度が高くなります。

指定されたフォントが1つも使えない環境を考慮して、一番最後にキーワードを指定します。キーワードはフォントの系列を指定するものであり、利用環境下で使用可能なフォントが割り当てられています。

フォントの系列(*4)
系列 Windows用 Macintosh用 キーワード
ゴシック系
  • Arial
  • MS Pゴシック
  • Helvetica
  • Osaka
  • sans-serif
明朝系
  • Times New Roman
  • MS P明朝
  • Times
  • 平成明朝
  • serif
等幅系
  • Courier New
  • MS ゴシック
  • Courier
  • Osaka-等幅
  • monospace
筆記系
  • Comic Sans MS
  • Verdana
  • Geneva
  • Chicago
  • cursive
装飾系
  • Impact
  • Charcoal
  • fantasy

ディスプレイ上ではゴシック体が見やすいとされています。それ以外のフォントはタイトルや見出しに留めておくのが無難です。印刷用CSSを用いる場合には、明朝体が好ましいでしょう。

body{ font-family:Arial,Helvetica,"MS Pゴシック",Osaka,sans-serif; }
h1{ font-family:"Comic Sans MS",Geneva,Verdana,Chicago,cursive; }
@media print{ body{ font-family:"Times New Roman",Times,"MS P明朝",平成明朝,serif; } }

(*1)
Internet Explorerが代表的。
(*2)
たとえpxで指定しても利用環境によりサイズは異なるので、全ての環境下で同じレイアウトを保つことは不可能です。
(*3)
先に指定したフォントの方が優先度が高くなります。
(*4)
フォント名ごとに、その名前の通りにフォントを指定しています。フォントが変更されていないものは、あなたの利用環境では適用されないものです。
スポンサーサイト

このページの一番上へ

連絡先、広告

copyright © 2005-2006 セロリ
Powered by FC2ブログ.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。