画面の幅に応じたフォントサイズを設定する - CSS

CSSで画面の幅に応じたフォントサイズを設定するコードを紹介します。

概要

CSSで画面の幅に応じたフォントサイズを指定するには vw の単位を利用します。

書式

font-size: (数値)vw;

1vw は1文字がウィンドウ幅の1%の幅となるフォントサイズになります。

実装例

コード

下記のコードを記述します。

CssFontSizeVw.css

.TextStyle2vw {
    font-size: 2vw;
}

.TextStyle5vw {
    font-size: 5vw;
}

.TextStyle10vw {
    font-size: 10vw;
}

CssFontSizeVw.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <link href="CssFontSizeVw.css" rel="Stylesheet" type="text/css" />
</head>
<body>
  <span class="TextStyle2vw">ペンギンは南極以外にも生息している。</span>
  <br />
  <span class="TextStyle5vw">ペンギンは南極以外にも生息している。</span>
  <br />
  <span class="TextStyle10vw">ペンギンは南極以外にも生息している。</span>
</body>
</html>

解説

「ペンギンは南極以外にも生息している。」の文字列を3つページに記述しています。最初の文字列は　2vwで描画されます。1文字がウィンドウ全体幅の2%で描画されます。2番目の文字列は、5vwで表示されます。1文字がウィンドウ幅の5%で表示されます。「ペンギンは南極以外にも生息している。」18文字あるため、文字列は改行されずにウィンドウ幅に1,2文字足りない程度で収まる程度の長さになります。同様に3番目の文字列は1文字が10%の幅で表示されます。ページのマージン等があるため、1行あたり9文字表示される動作になります。