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

絶対指定ではない方法で 文字サイズを微調整したい!(2ページ目)

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

スタイルシートの font-size プロパティで利用できる値は、smallなどのキーワードや 12pt といった絶対指定だけではないのです。 次のような指定方法もあります。

●スタイルシート font-sizeプロパティで割合を指定した例:
60% 70% 80% 90% 100% 110% 120% 130%

上記のように「%」を使った割合の指定では、「元の文字サイズ」を「100%」とした相対サイズを指定できます。 上記では、10%間隔で表示してみましたが、もっと細かく指定することもできます。

●スタイルシート font-sizeプロパティで割合を指定した例:
87% 93% 100% 107% 113%

どこまで細かく表示できるかは、ブラウザなどの環境次第です。 しかし、前のページでご紹介した x-small や x-large などの指定方法よりも、遙かに細かなサイズ指定が可能なことがお分かり頂けるでしょう。

これなら、『 smallerほど小さくはしたくないけど、通常サイズよりは小さくしたい』といったことも実現可能です。

60% smaller 87% 指定なし
このようにスタイルシート(CSS)で文字サイズを変えると、HTMLではできなかった細かなサイズ変更が可能になります。 このようにスタイルシート(CSS)で文字サイズを変えると、HTMLではできなかった細かなサイズ変更が可能になります。 このようにスタイルシート(CSS)で文字サイズを変えると、HTMLではできなかった細かなサイズ変更が可能になります。 このようにスタイルシート(CSS)で文字サイズを変えると、HTMLではできなかった細かなサイズ変更が可能になります。

同様の方法として、単位 em を使った文字サイズの指定方法もあります。

●スタイルシート font-sizeプロパティで単位emを指定した例:
0.5em 0.7em 0.9em 1em 1.2em 1.5em

「1em」とは「1文字分」の意味です。ですから「1.2em」と指定すれば「1.2文字分の大きさ」で表示されます。これは、「120%」と指定した場合と同じです。

これらの指定方法は「相対指定」ですから、ブラウザの文字サイズ設定を変更すれば、それに合わせて表示サイズも拡大・縮小されます。 ユーザビリティ上も問題ありません。

終わりに

今回は、スタイルシートを使った文字サイズの微調整方法をご紹介致しました。
ぜひ活用して、望みのデザインを実現させてみて下さい。

【関連記事】

【編集部おすすめの購入サイト】
Amazonでホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 2
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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