• 目　　次　　　　　　　　▼
  • サイトトップ
  • こんなときどうする？
  • サイト内検索
  • サイト内索引
  • サイトマップ
  •  
  • ホームページを作る
  • ＣＳＳの基本トップ
  • スタイルを設定する
  • ＣＳＳ設定方法
  • ＣＳＳ記述方法
  • タイプ、疑似セレクタ
  • 子孫、子、兄弟セレクタ
  • id、class セレクタ
  • スタイルの優先順位
  • スタイルの継承
  • 標準／互換モード
  • 長さと色の指定
  • ボックスモデル
  • インラインボックス高さ
  • フォントとテキスト
  • background プロパティ
  • position プロパティ
  • list-style プロパティ
  • font-size の理解
  • text-indent プロパティ
  •  
  • プロパティ一覧

CSSの基本　－　文字サイズ

---

font-size （文字サイズ）の理解

文字サイズの指定方法です

• 文字サイズ （font-size） は読みやすさを左右する重要な要素です
• ブラウザによる文字サイズ表示の違い
  • ブラウザ標準サイズと拡大表示
  • 文字サイズの % 指定
  • 絶対サイズ指定キーワードのフォントサイズ対照表
• 文字サイズの指定方法の工夫
  • 計算しやすいベース文字サイズを設定する
• 文字サイズがどんどん大きく、あるいは小さくなる

文字サイズ （font-size） は読みやすさを左右する重要な要素です

Web ページにおいて、文字サイズは読みやすさを左右する重要な要素です。

本来、文字サイズは利用者が自分の環境や視力などの条件に合わせて変更できるようにすべきであり、制作者側で文字サイズをコントロールするような指定は好ましくないでしょう。

Internet Explorer 以外の主要ブラウザでは、文字サイズなどに pt などの絶対値指定が行われていても、文字サイズの変更が可能となっております。

Internet Explorer で文字サイズ指定に px や pt などの絶対値指定があると、その指定部分の文字サイズは変更できません。更に、Internet Explorer 8 では、Web ページで指定されているの文字のサイズを使わないで、ブラウザの標準で表示する方法もあり、利用者が独自のスタイルで表示する方法もあります。

一方、制作者側では、ページのデザインを再現するために、意図したとおりの文字サイズで表示させたいというところもあります。

このような状況で考えられるひとつの解決策は、文字サイズを % や em など相対値で指定して任意の文字サイズを再現しつつ、利用者が必要に応じて Web ブラウザの設定メニューなどから文字サイズを変更できるようにすることでしょう。

ページトップへ

ブラウザによる文字サイズ (font-size) 表示の違い

同じ文字列に文字サイズの指定を６種類で行い、表示の違いを確認してみます。

• px （ピクセル）、 pt (ポイント)
• medium、%、em
• 無指定

次のようなソースを用意します。

• ブラウザでの見え方 ⇒ css17_sample01.html

ブラウザ標準サイズと拡大表示

文字サイズを Web ページの設定を使って表示する（参照：下記ヒント）ようにし、ブラウザの ［標準（”中”）］ で表示するようにして、上のソースを各ブラウザで表示して比較してみた。

Internet Explorer (IE)

FireFox

Google Chrome

Opera

IE と Chrome では６種類の指定が全て同じ標準サイズで表示されているのが分かる。何も指定しない時のデフォルト（標準）サイズが 16px ということだ。

FireFox ではポイント指定が大きく表示されているが、他の指定は同じサイズで表示されている。

Opera ではピクセルとポイント指定がほかの指定よりも小さく表示されていること、meduim 指定は標準よりも大きく表示されるのがわかります。このことから、Opera での標準サイズは 16px, 12pt では無いことが分かります。

次に、それぞれのブラウザで文字の拡大表示（参照：下記ヒント）をしてみます。拡大の方法はブラウザで違いがあるが、二段階上の拡大指定で表示しています。

Internet Explorer (IE)

FireFox

Google Chrome

Opera

IE 以外は標準表示のサイズがそのまま拡大されているように見えます。一方、IE ではピクセルとポイント指定のものは拡大されず標準サイズそのままで表示されています。

IE でレイアウトを崩したくないときは、ピクセルやポイントの絶対値指定が有効と言うことでしょうが、閲覧者が文字サイズを変えて見やすくするのに応えるのであれば、文字サイズの指定は相対的指定で行うのが好ましいと言えるでしょう。

文字サイズの % 指定

文字サイズを 50%～200% の範囲でパーセントで指定してみました。ブラウザ表示は標準サイズ （文字サイズ［中］） を指定しました。

• ブラウザでの見え方 ⇒ css17_sample02.html

Internet Explorer (IE)

FireFox

Google Chrome

これを見てわかることは、文字サイズを変えてもある段階にならないと表示は変化していません。

例えば Internet Explorer 8 では、88%から93%、94%から99%、100%から106%などは同じサイズで表示されています。

同じ IE8 であっても、ブラウザでの ［表示サイズ ］を、［大］、［特大］などと変更すると、同じサイズで表示される段階が変わります。

内部的には文字のサイズは変わっているのですが、見た目では変わったようには見えません。

これは表示側の限界によるものなのかもしれません。

絶対サイズ指定キーワードのフォントサイズ対照表

絶対サイズ指定とは直接大きさを指定する方法です。

"medium" を標準サイズとして、最も小さいサイズである "xx-small" から最も大きいサイズの "xx-large" まで7つのキーワードが用意されています。

CSS2.1 での h1-h6 要素、および font 要素との対照表です。

h1-h6要素（heading）は見出しを指定します。見出しを見れば文書の内容すべてに目を通さずとも内容が一目でわかるように記述します。見出しを示す要素は全部で h1, h2, h3, h4, h5, h6 の6 段階あり、表示域の左右いっぱいまでの範囲を占め、前後に改行を置き、上下に1行分の余白をあけた表示となり、そして ｢h｣ に続く番号の数字が小さいほどフォントのサイズが大きくなり、太字で表示されます。

フォントの大きさは、font 要素の size 属性に置き換えると、h1 要素が "6", h2 要素が "5", h3 要素が "4", h4 要素が "3", h5 要素が "2", h6 要素が "1" に該当します。ただし ｢h｣ に続く番号は文字の大きさを調節するための用途ではありません。文字サイズやウエイト（太さ）などは CSS のフォント関連プロパティで調整することができます。

h1-h6要素はこれがこのページの「見出し」だという構造を定義づけすることに意味があります。ページ全体の内容を表すような部分は大見出しとなるように h1要素を使い、次に大きな項目となる部分を h2要素に割り当て、項目がさらに細かく分かれている場合は h3要素を使うというように、順に h1, h2, h3, h4, h5, h6 と適切なマーク付けを行います。実際に使用するのは大見出し・中見出し・小見出しを示す h1, h2, h3 ぐらいだと思います。h5, h6 まで使わなければらないような場合は、内容を細かく分けすぎていることも考えられるので、文書を複数に分けた方が適切なこともあるでしょう。

font要素（local font modifier）は color 属性, face 属性, size 属性と組み合わせてフォントの色・種類・サイズを指定します。ただし、font要素及びその全ての属性が非推奨で、見栄えに関する指定は CSS で代替することが推奨されています。

パーセンテージ値（割合）は、他の値との相対的な値を実数値の後にパーセンテージ （%） をつけて指定します。どの値を参照するか （基準値） は各プロパティによって異なります。たとえば、font-size プロパティの場合は、p 要素に "p { font-size : 20px ; }" とあって、p 要素内にある子要素の strong 要素に "p strong { font-size: 80% ; }" の指定がある場合、この p 要素内にある strong 要素内のフォントサイズは親要素である p 要素の "20px" を基準値として参照し、"16px" と換算されます。

絶対サイズ指定に対する相対サイズ指定があり、親要素のフォントサイズを基準に対する比率で指定する方法です。たとえば親要素のフォントサイズが "medium" の場合に、当該要素に "larger" を指定すると、そのフォントサイズは "large" が指定されているものとして解釈します。あるいは当該要素に "smaller" が指定すると、そのフォントサイズは "small" として解釈します。

ページトップへ

文字サイズの指定方法の工夫

計算しやすいベース文字サイズを設定する

現在使用されている主要な Web ブラウザでは、多くの場合、デフォルトの文字サイズは 16px 相当となっています。このため、ある要素の文字サイズを制作者側で任意に指定したい場合は、16px を基準として比率を計算し、その値を font-size プロパティに指定することになります。例えばベースの文字サイズを 14px 相当にするために、html 要素にその値を指定すると、他の要素で意図したとおりの文字サイズを再現するには面倒な計算が必要となる例です。

• CSSソース：
  • html { font-size: 87.5%; }     ① ベースの文字サイズを 14px 相当に指定します。
  • h1 { font-size: 143%; }        ② 20px 相当の文字サイズを指定。
  • h2 { font-size: 121%; }        ③ 17px 相当の文字サイズを指定。
  • h3 { font-size: 107%; }        ④ 15px 相当の文字サイズを指定。

この手間を減らすために、いったんベース文字サイズを計算しやすい大きさに設定すると簡単にできます。いちばん楽なのは、ベース文字サイズを 10px 相当にすることでしょう。html または body 要素の font-size プロパティに 10px 相当となる値を指定し、そこから改めて各要素の文字サイズを相対値指定すれば、比較的簡単に意図したとおりの文字サイズを実現できます。20px にしたい場合は 2em、17px にしたい場合は 1.7em を指定すればいいので、計算が楽になります。

• CSSソース：
  • html { font-size: 62.5%; }     ① ベースの文字サイズを 10px 相当に指定（10px ÷ 16px = 62.5%）。
  • h1 { font-size: 2em; }         ② 20px 相当の文字サイズを指定。
  • h2 { font-size: 1.7em; }       ③ 17px 相当の文字サイズを指定。
  • h3 { font-size: 1.5em; }       ④ 15px 相当の文字サイズを指定。
  • p { font-size: 1.4em; }         ⑤ 14px 相当の文字サイズを指定。

• ブラウザでの見え方 ⇒ css17_sample03.html

このようにして指定した文字サイズを、Internet Explorer で見たのが下の図です。図左は文字サイズ ［中］、右は ［特大］ の場合です。

Internet Explorer 8 / 9 の場合、「ツール」 → 「インターネットオプション」 → 「全般」タブ → 「ユーザー補助」ボタン → ［書式設定］ で [Web ページで指定されたフォントサイズを使用しない] にチェックを入れる → ［OK］ → ［OK］ により、Web ページの設定を無視してブラウザの標準でのサイズ表示ができます。下図は、その設定で、上と同じページを、表示文字サイズを”中”で表示したものです。

いわゆる標準文字サイズは 16px で、それが p タグで表現されており、14px としたもの（上の左の図）よりも大きく表示されているのが分かります。

ページトップへ

ある要素の中に同じ要素が繰り返し登場する際の、文字サイズの指定

リストの文字サイズがだんだん小さく、あるいは大きくなる

リストの文字サイズをちょっと小さめにしたい」と思ったときを考えてみましょう。 ul 要素に対して 80% などの文字サイズを指定すると、リストの階層が深くなるにつれて、どんどん文字サイズが小さくなってしまいます。 基準文字サイズを 1.4em としている場合でも、少し小さめということで 1.2em を指定した場合などは、第一階層は小さくなりますが、その後逆にどんどん大きくなってしまいます。例えば、次のような感じです。

CSS 記述が以下のようになっていると、この現象が発生します。

第二階層の文字サイズを決めるときに、第一階層の文字サイズを基準にするので、左側の場合は 80% × 80% ＝ 64%、右側の場合で、1.2em × 1.2em ＝ 1.44em などとなってしまいます。

これを防ぐCSS記述の方法は次のようにします。

もっとスマートな記述をするとすれば、このようになります。

• CSSソース：
  • body > ul { font-size: 1.2em; } 　　　　あるいは　 body > ul { font-size: 1.2em; }

不等号マーク > （子セレクタ） を使うことで、この場合は body 直下の第一階層の ul 要素にだけスタイルを適用しています。次の階層には何もスタイルを指定しません。なお、第一階層の ul 要素が div 要素の直下にある場合は、div > ul などとします。

ページトップへ

---

| |