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

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

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

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

CSS入門(15)

文字の大きさを調整したいときは、CSSの「font-size」を使います。

<h1>タグ(大見出し)なんて、もう無駄に大きくて、デザイン的にありえないですから!・・・むきーっ・・・お話は、次の順番で進みます。

▲ページの先頭に戻る

キーワード指定という方法

1:キーワード指定値

font-sizeの指定方法は、いろいろありますが、今回は、ブログのテンプレートでよく見かける「キーワード指定という方法」を、ご紹介したいと思います。

「キーワード指定法」などと言うと難しそうですが、次の一覧の中から、あなたが好きな文字の大きさを指定してあげれば良いだけです。

xx-large

極々大

サンプル

x-large

極大

サンプル

large

サンプル

medium

標準

サンプル

small

サンプル

x-small

極小

サンプル

xx-small

極々小

サンプル

洋服のサイズも、こんな感じの表記の仕方ですよね。S、M、L、XLとか。覚えやすい指定の方法と言えます。

また、似たようなものに、smaller、largerがありますが、おそらく使わないので覚えなくて良いと思います。

▲ページの先頭に戻る

2:おおよそピクセル単位で言うと?

ちなみに、どのくらいの大きさで増減するかと言うと、CSS1までしか対応していないブラウザは、倍率1.5で増減し、CSS2に対応しているブラウザでは、倍率1.2で増減します。

例えば、標準値が16px(ピクセル)と仮定して考えると、おおよそ次のようなサイズになるということかな。

css1
(倍率1.5)

css2
(倍率1.2)

xx-large

54.00px

27.65px

x-large

36.00px

23.04px

large

24.00px

19.20px

medium

16.00px

16.00px

small

10.67px

13.33px

x-small

7.11px

11.11px

xx-small

4.74px

9.26px

▲ページの先頭に戻る

文字の大きさを調整してみましょう

キーワードを指定する方法で、文字の大きさを調整してみましょう。

1:前回までのお話

(01)

前回は、どこまで行ったんだったかな・・・忘れちゃったのでブラウザで表示してみましょう。

あらまぁ、フォントを「cursive」のままにしていましたね。こりゃ失敬。

ブラウザで表示

「ヒラギノ角ゴ Pro W3」、「MS Pゴシック」、「Osaka」あたりを設定しておいてください。さらに、「メイリオ」などを入れてもいいですよ。

「ヒラギノ角ゴ Pro W3」、「MS Pゴシック」、「Osaka」に設定

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

▲ページの先頭に戻る

2:font-sizeで文字の大きさを変更する

(02)

それでは、さっそく、無駄に大きい<h1>タグを変更してみましょう。「font-size」に、「large」を指定して、CSSファイルを保存してください。

(03)

ブラウザで表示してみましょう。いかがでしょうか、<h1>タグの文字が、適当な大きさになったと思います。

しかし、今度は、<h2>タグの文字が、<h1>タグの文字より大きいので、ちょっと違和感を感じます。

ブラウザ表示

(04)

それでは、<h2>タグの文字も調整しましょう。ついでに、<p>タグ(段落)、<li>タグ(箇条書き)も変更します。

「font-size」は、次のようにしてみましょうか。

h1

large

h2

medium

p

small

li

small

(05)

変更して、ブラウザ表示してみてください。見出しは良いけれど、ちょっと、文章を読むには、文字が小さいかもしれませんね。

ブラウザ表示

できたかしら?ちなみに、CSSコードは、次のようになります。

▲ページの先頭に戻る

キーワードで指定するときのポイント

font-sizeを指定するときは、総じて「何を基準とする大きさなのか?」を、しっかり認識しておく必要があります。

1:何が基準となるのか?

(1)「midium」が基準(標準)

キーワードで指定する場合は、「midium」が基準(標準)になります。これは、よくCSSリファレンスなどでも書いてあるので、目にしたことがある人もいらっしゃるかもしれません。

さて、「それでは、midiumというのは、どのくらいの大きさでしょうか?何を基(もと)にして、midiumの大きさが決まっているのでしょうか?」

(2)ブラウザで設定される標準サイズ

どうやら、このmidiumというのは、ブラウザで設定されている「標準値」のことのようです。

Firefoxでは「標準サイズ」、IE6では「中」と表記されています。

それでは、そのブラウザの標準値は、どのくらいの大きさかと言えば、16pxと言われています。(Windowsの場合)

Firefoxは、標準値の変更が可能ですので、必ずしも16pxということではありません。([ツール]-[オプション]-[コンテンツ])

▲ページの先頭に戻る

2:継承は使えるのか?

継承は、されます。

ただ、試してみると分かりますが、「キーワードによる指定法」での継承は、混乱してしまうかもしれません。

例えば、<body>タグに、「font-size: small;」を指定すると、内包しているすべてのタグが、「small」サイズに指定されるのかと思いきや、そうではありません。

どうやら、継承されるのは、「1段階サイズダウンした」ことが継承されるようです。

 

変更前のサイズ

変更後のサイズ

body

midium

small

h1

xx-large

x-large

h2

x-large

large

p

midium

small

li

midium

small

しかし、結局それぞれのタグで、好きなサイズに変更するわけですから、やはり混乱するのではないでしょうか。

つまり、<body>タグに、「キーワードによる指定法」で「font-size」を付けることは、あまり意味がないような気がします。

IE6でも<body>タグに、「font-size: small;」を指定して試してみましたが、継承はされませんでした。

▲ページの先頭に戻る

キーワード指定の弱点

弱点1:細かに設定できない

font-sizeをキーワードで指定する場合、簡便である利点はあるのですが、文字の大きさを、きめ細かに設定することができません。

例えば、「mediumは、もう少し小さくても良い」だとか、「smallが、もう少し大きければ」とか、細かな要求があると思います。

しかし、その「もう少し」のさじ加減ができません。

▲ページの先頭に戻る

弱点2:IEのバグがある

IE(InternetExplorer)のバグの問題もあります。

例えば、次の画像を見ていただくと分かりますが、同じ「large」を指定しても、こんなに違います。CSSハックと言う特別な措置が必要になります。

FirefoxとIEでの表示の違い

▲ページの先頭に戻る

次回予告

「キーワードによる指定法」は、理解しやすい反面、弱点もあります。ブログのテンプレートで見かけるのでご紹介しましたが、他の方法を検討する方が良いかもしれません。

次回は、他のfont-sizeの指定方法について書きます。

▲ページの先頭に戻る

関連記事

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

1:カスタマイズ前

2:CSSの基本的なこと

3:色の指定

4:罫線の指定

5:間隔(余白)の指定

6:継承と子孫セレクタ

7:箇条書き(リスト)

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

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

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

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

12:レイアウト

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

14:CSSで飾る

15:まとめ

▲ページの先頭に戻る

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

« 「日本人が好きなフォントは?」|「文字サイズの変更【font-size】(2)」 »

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

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

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

コメントの投稿

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

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/279-231d9015
 | トップページ | 

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