CSSでフォントサイズをページや要素の幅に合わせる方法を現役デザイナーが解説【初心者向け】

初心者向けにCSSでフォントサイズをページや要素の幅に合わせる方法について解説しています。最初にfont-sizeプロパティで使用できるサイズの単位の種類を説明します。その中からvw、vhを使ってレスポンシブへの対応を行う場合の書き方を見ていきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

CSSでフォントサイズをページや要素の幅に合わせる方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

フォントサイズをページや要素の幅に合わせる方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

単位の違いと注意点

CSSのfont-sizeプロパティで使用する単位には以下のような種類があります。

  • px:ピクセル(画素数)
  • em:親要素に対する割合。1em=親要素と等しい。入れ子にすると直近でfont-sizeを指定している親要素を基準とする
  • rem:ルート親要素(HTML)に対する割合
  • vw:画面の表示幅に対する割合。100vw=表示幅と等しい
  • vh:画面の表示高さに対する割合。100vh=表示高さと等しい

font-sizeプロパティについて、詳しくは以下の記事も参考にしてください。

MDN – font-size

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

PCとスマホの違い(レスポンシブへの対応)

vwやvhを単位とすると画面サイズに合わせて表示を変える、レスポンシブ対応を行うことができます。

 

PCとスマホで見比べてみよう

今回のサンプルプログラムではfont-sizeの単位による違いを確認します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    html, body {
      font-size: 12px;
    }
    /* em */
    .parent1 {
      font-size: 2em;
    }
    .child1 {
      font-size: 0.6em;
    }
    /* rem */
    .parent2 {
      font-size: 2rem;
    }
    .child2 {
      font-size: 0.6rem;
    }
    /* vw */
    .vw1 {
      font-size: 18vw;
    }
    /* vw */
    .vh1 {
      font-size: 5vh;
    }
  </style>
</head>
<body>
  <div class="parent1">親要素em
   <div class="child1">子要素em</div>
  </div>
  <div class="parent2">親要素rem
    <div class="child2">子要素rem</div>
  </div>
  <div class="vw1">幅基準指定</div>
  <div class="vh1">高さ基準指定</div>
</body>
</html>

実行結果は以下のとおりです。

 

まとめ

今回の記事ではCSSでフォントサイズをページや要素の幅に合わせる方法について学習しました。

 

監修してくれたメンター

太田和樹(おおたかずき)

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績:画像認識技術を活用した駐車場混雑状況把握、音声認識を活用したヘルプデスク支援システム、ロボットアプリの開発、大規模基幹系システムの開発・導入マネジメント。著書「知識ゼロからの機械学習入門(技術評論社)」。

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。