ウェブデザインをスタイルシートでおこなおう!

ホームページ作成スタイルシート編!スタイルシート倶楽部@ウェブマイスター
ホームページ作成総合支援ウェブマイスター
スタイルシート倶楽部トップ戻る
スタイルシートを使えばウェブデザインは思いのまま!
ページ管理も楽になり、大幅なデザイン変更も楽になっちゃうよ!
スタイルシートを使いこなして脱入門者になろう!

サイト作りの基礎を学びたい方は >> 本館 ウェブマイスター
さくらインターネット
たった125円という破格の値段で高機能なレンタルサーバー。業界最大手で安心して使えるよ。
3ヶ月無料キャンペーン実施中!! レンタルサーバーのSpeever
一番高いプランも今なら無料だよ

プロパティー名 font-family
目的 フォントを指定。

フォント名

例:フォント指定。
フォント名にスペースが含まれる場合、引用符「"」か「'」でかこまなくてはならない。
キーワードはかこってはならない。(IEではかこっても正常に動作するが)

body {
  font-family: Verdana, Arial, sans-serif; 
}

フォントファミリーの種類のキーワード。(ブラウザ等により使われるフォントは変わる)

  • serif
    • 明朝体
  • sans-serif
    • ゴシック体
  • cursive
    • 草書体
  • fantasy
    • 装飾体
  • monospace
    • 等間隔フォント

関連プロパティー

Tips

★複数を指定した場合、先頭から順に優先度が設定され、もってるフォントが表示される。
★IEの場合は、英数字と日本語は別々に適用できる。先頭に英数字フォントを指定し、日本語は最後に指定すれば良い。
★英数字フォントは、読みやすさを考慮し、次の物いずれかの指定が一般的である

  • Verdana
  • Arial

また、少しおしゃれに "Comic Sans MS" も人気である。
Windows以外の人のために、複数の候補を並べ、最後にフォントキーワードを書く。
日本語をシンプルに見やすくするため、 sans-serif を指定するのをすすめる。

現役のWindowsとMACで見やすく表示させたいならば、

font-family: Verdana, sans-serif;

これは最低限である。
Windows専用の"MS Pゴシック "とMAC専用の"Osaka"(ゴシック) や "Helvetica"(Arial) を書く場合が多い。
VerdanaやArialはMACにもあると言う人もいるが、OS標準では入っていないので注意しよう。
Office等のマイクロソフト製品をインストールしてあるMACだけである。

font-family: Verdana, Helvetica, "MS Pゴシック", Osaka, sans-serif;

上記指定がもっとも無難な指定である。
他のフォントで表示したいならば、先頭にそのフォントを書こう。

font-family: xxxx, Verdana, Helvetica, "MS Pゴシック", Osaka, sans-serif;

このように指定しておけば、そのフォントを持っていない人も快適に文章を読むことが可能だ。
(もっていない人のほうが快適とも言う)
通常、他のフォントは一部(タイトル等)にのみ使い、持っていない人でもそのフォントで表示するよう画像が使われる。

| ウェブマイスタートップ | ホームページの作り方 | スタイルシート入門 | PHP Tips | CGI/PHPソフト配布 | 掲示板 | ブログ | ショッピング | リンク集 |
(C) 2005 - 2007 ウェブマイスター