HPBUILD

Webページの文章が「小さくて読みづらい」「大きすぎてバランスが悪い」などと感じたことはありませんか？ そんなときに使えるのが、CSSによるフォントサイズ（font-size）の調整です。 この記事では、文字サイズの基本的な指定方法から、レスポンシブ対応やおすすめの単位まで、初心者にも分かりやすく解説していきます。 フォントサイズは「font-size」で設定する CSSで文字の大きさを指定するには、font-sizeプロパティを使用します。基本の書き方は次のとおりです： p { font-size: 16px; } このコードは、段落の文字サイズを16ピクセルに設定します。 代表的な単位と使い方 フォントサイズはさまざまな単位で指定できます。それぞれの特徴を理解して使い分けましょう。 px（ピクセル）：固定サイズ。見た目が安定するが、拡大縮小に弱い。 em：親要素のサイズを基準にする。柔軟だが扱いに慣れが必要。 rem：ルート要素（html）のサイズを基準にする。レスポンシブ対応におすすめ。 %：親要素に対する割合指定。emと似た使い方。 h1 { font-size: 2rem; } .small-text { font-size: 80%; } rem単位を使うと、全体のバランスが取りやすくなります。 見出しと本文のバランスを意識しよう 文字サイズは、階層構造に応じて調整することが大切です。 h1：2.0rem（タイトル） h2：1.6rem（セクション見出し） p：1.0rem（本文） .note：0.875rem（注釈など） サイズを揃えることで、読みやすく整ったページに仕上がります。 画面サイズに合わせてサイズを変える レスポンシブデザインを考えると、スマホとPCでフォントサイズを切り替えることも有効です。 body { font-size: 16px; } @media screen and (max-width: 768px) { body { font-size: 14px; } } こうすることで、スマートフォンでも見やすい文字サイズに調整できます。 初期設定（root）のサイズを意識する rem単位を使う場合、htmlタグでベースのサイズを定義しておくと便利です。 html { font-size: 16px; } これにより、1rem = 16pxとして、計算しやすくなります。 まとめ CSSのfont-sizeプロパティを使えば、文字の見やすさや読みやすさを自由に調整できます。 単位の特徴を理解して使い分けることで、見た目も美しく、レスポンシブ対応にも強いWebデザインが可能になります。 Webサイトの文字サイズを一度見直して、より快適な読みやすさを目指してみましょう！