文字サイズの変更【font-size】(2):CSS入門

ブログが作りたい!CSS入門 > 文字サイズの変更【font-size】(2):CSS入門

文字サイズの変更【font-size】(2):CSS入門

文字の大きさを変更する【font-size】:CSS入門

CSS入門(16)

前回の記事「文字サイズの変更【font-size】(1):CSS入門」の続きです。

今回は、文字サイズを細かに設定する方法をご紹介します。お話は、次の順番で進みます。

▲ページの先頭に戻る

文字サイズを細かに設定する方法

1:文字サイズを細かに設定するときの単位

font-sizeで文字サイズを細かに設定するときは、次のような単位で指定できます。この中で、より利用されているのは、「%」、「px」、「em」の3つです。

おそらく、「%」、「px」、「em」の3つ以外は、まずお目にかかることもないでしょうから、覚える必要はありません。

%

割合(%)で指定する。

px

1ピクセルを1として指定する。

em

フォントの高さを1として指定する。

ex

小文字の「x」の高さを1として指定する。

pt

ポイント単位で指定する。

pc

パイカ単位で指定する。

cm

センチメートル単位で指定する。

mm

ミリメートル単位で指定する。

in

インチ単位で指定する。

▲ページの先頭に戻る

2:おすすめなのは?

(1)おすすめなのは「%」です

おすすめなのは、消去法になりますけれど、「%」です。

(2)「px」はどうして駄目なの?

「px(ピクセル)」は、Windows IEにて、文字サイズが固定表示されてしまうので、好ましくありません。

よく「デザイン的に、文字サイズを固定表示したい」という人がいらっしゃいますが、これは一般的に好まれない行為と言われています。

なぜなら、作り手の丁度良いと思う文字サイズが、すべての人にとっても丁度良いとは限らないためです。

特に、小さい文字で固定してしまうと、年配の人や視力の弱い人の閲覧に支障をきたす場合があります。

(3)「em」はどうして駄目なの?

「em」は、Windows IEでのバグが多いようです。

▲ページの先頭に戻る

割合で設定する方法(%)

1:前回までのお話

(01)

前回は、largeなどのキーワードによる指定で、フォントの大きさ(font-size)を変更しました。

今回は、キーワードによる指定を廃し、%を使って、決め細やかにフォントの大きさを調整する方法を用います。

ブラウザ表示

以下、前回までのCSSコードです。

▲ページの先頭に戻る

2:<body>タグに、「font-size(%)」を指定する

(02)

前回は、継承がややこしくなりそうだったので、bodyには、font-sizeを指定しませんでしたが、今回は指定しておくことにします。

とりあえず、標準値に対して、100%を指定してみましょう。書き方は、数値に「%」をつけて書くだけです。

body { font-size: 100%; }

ただ、bodyへfont-size 100%を指定すると、古いOperaでバグが発生する(文字が極端に小さくなる)らしいので、100.01%を指定します。

(03)

ブラウザで表示してみましょう。おそらく見た感じ、何も変わらないはずです。

ブラウザ表示

▲ページの先頭に戻る

3:各タグに、「%」を指定する

(04)

前回同様、h1、h2、p、liにも、「%」で指定しようと思います。次のような数値にしてみます。

好きな大きさを入力し、試してみてください。

body

100.01%

h1

120%

h2

100%

p

90%

li

90%

(05)

ブラウザで表示してみましょう。

私は、前回のキーワード指定のlargeやmidiumに近い数値にしたので、あまり違いが分からないかもしれません。

前回、smallにして小さい感じがした<p>タグ、<li>タグは、少し大きめにしてみました。%を使うと、このような微妙な調整が出来るようになります。

ブラウザ表示

▲ページの先頭に戻る

4:継承

(06)

今回、bodyに指定したfont-sizeの数値(%)を変更すれば、全体的に文字サイズの増減をコントロールできます。

キーワード指定の場合は、1段階違うと大きく変動してしまいますが、「%」であれば、きめ細かに変更できます。一元管理もしやすくなります。

例えば、bodyを110%にすると、継承がうまいことはたらいて、すべてのfont-size値へ波及します。よかったら、試してみてください。

ブラウザ表示

▲ページの先頭に戻る

5:他のブラウザで表示する

(07)

他のブラウザで表示しても、キーワード指定のときと違って、文字サイズの差が大きくは出ないはずです。

ブラウザ表示

▲ページの先頭に戻る

参考

割合(%)で言われても、どのくらいの大きさなのかよく分からないので、16pxを基準として、おおよその値を書いてみました。

h要素

css2.1

おおよそ

xx-large

h1

200%

32.00px

x-large

h2

150%

24.00px

large

h3

120%

19.20px

medium

h4

100%

16.00px

small

h5

88.8%

14.21px

x-small

 

75%

12.00px

xx-small

h6

60%

9.60px

割合(%)の数値や対応状況などは、w3gさんの「font-size」を参考にさせていただきました。ありがとうございました。

▲ページの先頭に戻る

次回予告

次回は、idセレクタ、classセレクタについて書きます。

その間に、ブラウザの文字サイズを変更する方法と、ブラウザでHTMLソースを表示する方法を書いています。

▲ページの先頭に戻る

関連記事

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

1:カスタマイズ前

2:CSSの基本的なこと

3:色の指定

4:罫線の指定

5:間隔(余白)の指定

6:継承と子孫セレクタ

7:箇条書き(リスト)

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

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

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

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

12:レイアウト

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

14:CSSで飾る

15:まとめ

▲ページの先頭に戻る

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

« 「文字サイズの変更【font-size】(1)」|「idセレクタ、classセレクタとは?」 »

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

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

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

No title

はじめまして。yukiskiyukiと申します。
KumaCrowさんのブログはすごく見やすくて、初心者の私にも分かりやすくて、おかげで、自分のブログもちょっとブログらしくなってきました(^_^)/
ほんっと、いつもありがとうございますm(__)m
毎日少しずつKumaCrowさんのブログを読みながらカスタマイズしていってるのですが、
「文字サイズの設定」で、使わせていただいているテンプレートが「px」で設定してあり、Windows IEで、文字サイズが固定表示されてしまっていました。
KumaCrowさんの言われるとおり、私にとっては丁度良いと思う文字サイズでも、年配の人や視力の弱い人には見づらいですもんね。
で、「%」で設定してみたんですが、私のやり方が間違っているらしく、
Windows IEの「表示」-「文字のサイズ」で「最大」にすると、文字が枠からはみ出してしまいます(T_T)
仕方なくまた元の「px」に戻しました(>_<)
当然、KumaCrowさんのブログでは、同じように「最大」~「最小」にしても全く問題ありません。
どうしたらよいのでしょうか?お忙しいところすみませんが、お手すきの時にでも、教えていただけないでしょうか。

フォントはとても難しい

yukiskiyukiさん、こんばんは!(・∀・)/
コメントありがとうございます。


う~ん、それは申し訳ないんですけれども、

テンプレートを作った人に伺った方が、
早いのではないかしら。(´Д`;)


・・・とだけお返事するのも何なので、
いちおう拝見させていただきました。(`・ω・´)

ちょっと思ったのは、style.cssではpx指定していますが、

記事内ではおそらく大中小ボタンを使っていらっしゃるので、
x-large、large、smallなどが、style=""で入っているようです。


絶対的に %が良いということもないので、
largeなどのキーワード指定法でそろえる方が、
スマートな感じがします。

違う指定法が混在しているのは、
あまり良くないのではないかと思います。

どの辺の文字がはみ出したのか分らないと、
何ともいえませんが、

こういったことも関係しているかもしれません。

No title

早速のご返事ありがとうございます!
なるほど・・・難しいですねぇ。
ご丁寧に教えていただきありがとうございました(^^♪

プライオリティ

yukiskiyukiさん、こんばんは!(・∀・)/
コメントありがとうございます。


そうですねー、ちょっと慣れないと難しいかもしれません。

ですから、おそらく自分の得意なことから、
やっていく方がよろしいかと思います。

フォントはいまの状態で十分読めるわけですし、
後回しにしても、まったく問題ないのではないかしら。

僭越ではありますが、そんな気がいたします。


おせっかいついでにお話すると、
記事ごとに何かしら写真があるといいですよね。

記事の内容が専門的で難しいだけに。
そんな感じがしました。

コメントの投稿

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

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/280-b8dc196a
 | トップページ | 

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
ありのごとくあつまりて