ホームページ作成/テキストの配置・装飾 (HTML,CSS)

絶対指定ではない方法で 文字サイズを微調整したい!

文字サイズの指定方法に満足していますか?「smallより大きくmediumより小さくしたい」と思った場合、どうしますか? スタイルシートには、文字サイズを細かく微調整する指定方法もあるのです。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

現行の文字サイズの指定に満足してますか?

ホームページ上で表示する文字サイズの指定方法にはいくつかありますね。 満足できる指定方法を使えていますか?
いろいろなサイズ指定方法がありますが、多くは、あまり「微調整」には向いていません。 試しにいくつか表示させてみましょう。

文字サイズ指定の例

●スタイルシート font-sizeプロパティでの指定例:
x-small small medium large x-large

●HTML font要素(<font size="?">~</font>タグ)での指定例:
-3 -2 -1 +0 +1 +2 +3

確かに様々なサイズで表示できますが、大ざっぱですね。 例えば、「medium」より大きくて「large」より小さい文字サイズが欲しい場合、これらでは指定できません。
※smallやlargeといったキーワードでの指定は、文字サイズの解釈がブラウザによって異なることがあり、必ずしも望み通りの大きさにできるとは限りません。 また、HTMLのfont要素は、非推奨要素です。(デザインはスタイルシートで行うことが望ましいため。)

他にも、「1段階大きく」「1段階小さく」という指定で、smaller・largerという指定があります。

●スタイルシート font-sizeプロパティでの指定例:
smaller 指定なし larger

これは、現在表示されているサイズを基準にして、「1段階大きく(larger)」したり、「1段階小さく(smaller)」したりできる指定方法です。
便利な指定方法ですが、やはり微調整はできません。例えば、「0.5段階分小さくしたい」と思ってもそれは無理です。

絶対サイズ指定は望ましくない

スタイルシートを使ってポイント値を指定することで、1ポイント単位での文字サイズ調整が可能です。 しかし、ポイント値で指定してしまうと、ユーザの意志での文字サイズ調節ができなくなってしまいますから、 ユーザビリティ・アクセシビリティ上、利用は望ましくありません。
※一部のブラウザでは、単位に pt や px を使っても、ユーザによる文字サイズの変更を可能にしているものもあります。

●スタイルシート font-sizeプロパティでポイント値を指定した例:
12pt 13pt 14pt 15pt 16pt 17pt 18pt

ですから、相対サイズ指定で、細かく文字サイズを調節する方法が欲しいわけです。

相対的に文字サイズを微調整できる指定方法

上記の問題を解決した文字サイズの指定方法があります。
スタイルシートの font-size プロパティで利用できる値は、smallなどのキーワードや 12pt といった絶対指定だけではないのです。

相対指定で微調整できる文字サイズ指定方法は、次のページで! →

  • 1
  • 2
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます