文字の大きさをスタイルシート(CSS)で変更する方法

 

PAK90_kurisumasukazari1321500

文字(フォント)のサイズひとつでサイトの見栄えは変わります。
大きくても小さくても見難いし、全部同じ大きさでも見難いです。
サイトタイトル、記事タイトル、見出し、本文、サイドバー。
それぞれ丁度良い文字の大きさにしましょう。
自分の好きな大きさにする事で、個性も出てきますよ。

文字の大きさを変えるタグ

文字の大きさを指定するタグは

font-size: **;

です。
**には、100%や16px、smallなど様々な数字と単位が入り大きさを決めます。
ここでは多く使われているであろう「px」で実際の大きさを表示しながらご紹介します。

ちなみに、文を書いている時に直接文字の大きさを指定したいときは

<p style=”font-size:**”>文字の大きさを変えたい文</p>

とします。

文字の大きさの変化

それでは、実際に変えて見ていきます。

大きすぎた96px

大きい72px

サイト名ならいける48px

サイト名くらい36px

記事タイトルくらい30px

大見出しくらい24px

小見出しくらい20px

本文くらい16px

小さい文字が主流だった昔の本文くらい12px

全部太字になるとひとまわり大きく見えます。

短いサイト名でインパクトを与えたいなら72pxでもいけるかも?
でも、タイトルの縦幅が長くなりすぎると本文まで見てもらえなくなる確率が上がるので注意です。

あ、スマートフォンで見ることもあると考えるとやっぱり大きいかも?PCとスマホと両方に対応しないといけないですね。それぞれ値を分けて設定するのが良いかな。

12pxは小さいですねー!!
昔は本当にこれだったけど、ここまで小さく見えなかったような?パソコンの解像度が今の方が上がっているからでしょうか?横幅の狭いサイトが多かったですしね。時代ですね(-ω-)

スタイルシートで目的の場所にあるfont-sizeの数字を変えて試してみてください。
何度もトライ&エラーでベストなフォントサイズを見つけてくださいね。
おつかれさまでした。

  • このエントリーをはてなブックマークに追加
  • Pocket

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。