フォントの指定【font-family】:CSS入門

ブログが作りたい!CSS入門 > フォントの指定【font-family】:CSS入門

フォントの指定【font-family】:CSS入門

フォントの指定【font-family】:CSS入門

CSS入門(13)

今回は、文字フォントの指定を行います。「font-family」を使って、読み手が読みやすいフォントを設定しましょう。

お話は、次の順番で進みます。

▲ページの先頭に戻る

フォントを指定する方法

1:前回までの状態

(01)

はじめに、前回までの状態を確認しておきましょう。箇条書きのリストマークに、画像を使ったところまで出来ました。

ブラウザで表示

CSSコードは、次のようになります。

▲ページの先頭に戻る

2:フォントとは?

(02)

そういえば、フォントと言われても、何のことやら分からない人もいらっしゃるのかしら?えーと・・・・・・文字の書体や形状のことを、フォントと言います。

例えば、有名なところで言うと、明朝体だとか、ゴシック体とかです。フォントによって、人に与える印象もずいぶん違います。

明朝体、ゴシック体

▲ページの先頭に戻る

3:継承って、実はすごいのです

(03)

それでは、ちょっと試しに、変化が分かりやすいフォントを指定してみたいと思います。

<body>タグに対して、「font-family」を使って、「cursive」というフォントを指定してみましょう。

body { font-family: cursive; }

実際に書く場合は、追加書きして次のようにします。

(04)

ブラウザで表示してみてください。あなたのパソコンに「cursive」というフォントが入っていれば、次のように表示されるはずです。

どうですか?分かるでしょうか?えぇ、そうなんです。変わったフォントですよね~・・・・・・って、そうじゃなくて。

ブラウザで表示

<body>タグに、フォントを指定することで、すべての文字が「cursive」というフォントになっているのが分かるでしょうか。これ、すごくないですか?

つまり、継承されるということは、フォントを一元管理できているということなんです!(ズギューン)

すごいよ、CSS!ビバ!CSS!

ただ、フォントは大丈夫みたいですが、指定する内容によっては、うまく継承されないことがあります。(ブラウザのバグです)

▲ページの先頭に戻る

4:「font-family」の特別な記述の方法

(05)

「font-family」には、特別な記述法があります。いわば、ルールみたいなことです。

次のような場合は、「""(ダブルクオーテーション)」で、フォント名を囲む必要があります。

  • 日本語が入ったフォント名を記述する場合
  • フォント名の中にスペースを含む場合

例えば、次のような形で書きます。覚えておきましょう。

body { font-family: "MS ゴシック"; }

一般的に、「""(ダブルクオーテーション)」を使いますが、「''(シングルクオーテーション)」で囲んでもOKです。

▲ページの先頭に戻る

5:複数のフォントが指定できます

(06)

ところで、私は、ポロリと大切なことを書いていたのですが、気付いたでしょうか?いやいや、おっぱいポロリじゃなくてさ、前述(04)で、次のように書きました。

あなたのパソコンに「cursive」というフォントが入っていれば~云々

それじゃあ、あなたのパソコンに「cursive」というフォントが入っていなかったら、どうなるのでしょうか?表示されない?

いえいえ、さすがにそこまで酷くはありません。

フォントが入っていない場合は、ユーザが、ブラウザで設定しているフォントで表示されます。(Firefoxなら、[ツール]-[オプション]-[コンテンツ]で確認できます)

(07)

さて、それでは、作り手の意図にそったデザインで表示してもらうには、どのようにしておくのが良いか?というと、複数のフォントを指定しておくことが出来るので、優先順で記述しておきます。

各フォントは、「,(カンマ)」で区切ります。例えば、次のように記述します。

つまり、この場合であれば、「MS ゴシック」を第一候補、そして「cursive」を第二候補として、表示してくださいとブラウザに指定しているわけです。

▲ページの先頭に戻る

6:評判の良いフォント

CSSの書き方にもだいぶ慣れてきたと思うので、フォントの指定方法自体は、特に難しいものではなかったと思います。

それより、何より、「どんなフォントを指定しておけば良いのか?」が問題です。どのようなフォントが評判が良いのか、愛されているのか、次回の記事を、続けてご覧ください。

▲ページの先頭に戻る

次回予告

次回は、「日本人が好きなフォントは?」について書いています。

▲ページの先頭に戻る

関連記事

CSSに関連する記事を、ご紹介します。

1:カスタマイズ前

2:CSSの基本的なこと

3:色の指定

4:罫線の指定

5:間隔(余白)の指定

6:継承と子孫セレクタ

7:箇条書き(リスト)

8:文字(フォント)の指定

9:idセレクタ、classセレクタ

10:文章を読みやすくする

11:文字の中央揃え(センタリング)

12:レイアウト

13:tableの中央揃え(センタリング)

14:CSSで飾る

15:まとめ

▲ページの先頭に戻る

作成日:2008/04/21 更新日:2008/04/21

« 「箇条書きに画像【list-style-image】」|「日本人が好きなフォントは?」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/277-32939c0c
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて