7.1 基本原則
レスポンシブフォントはレスポンシブウェブデザインを作る上で重要な役割を果たしているよ。vw、vh、vmin、vmaxみたいな相対単位を使うことで、フォントはビューポートのサイズに応じて動的に変化できるんだ。これにより、さまざまなデバイスでテキストを最適に表示できるね。これらの単位がどう機能するか、そしてレスポンシブフォントを作るためにどう使うかを詳しく見てみよう。
基本概念
vw と vh:
vw(viewport width): 1 単位のvwはビューポートの幅の 1%に相当するよvh(viewport height): 1 単位のvhはビューポートの高さの 1%に相当するよ
vmin と vmax:
vmin(viewport minimum): 1 単位のvminはビューポートの小さい方の寸法（幅または高さ）の 1%に相当するよvmax(viewport maximum): 1 単位のvmaxはビューポートの大きい方の寸法（幅または高さ）の 1%に相当するよ
レスポンシブフォントの利点:
- 読みやすさの向上: フォントサイズが画面のサイズに自動で調整され、どんなデバイスでも快適に読めるよ
- デザインの柔軟性: レスポンシブフォントはビューポートサイズの変更に伴い、調和のとれたデザインを維持できるよ
- 統一アプローチ: フォントに相対単位を使うことで、レスポンシブデザインを作る際の統一したアプローチをサポートできるよ
7.2 vw と vh を使った利用例
例 1: vwを使った基本フォントサイズ
ビューポートの幅に応じてフォントサイズが変わる例を作ってみよう:
CSS
body {
font-size: 2vw; /* フォントサイズはビューポートの幅の2% */
}
h1 {
font-size: 4vw; /* 見出しのフォントサイズはビューポートの幅の4% */
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vwを使ったレスポンシブフォント</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>レスポンシブ見出し</h1>
<p>このテキストはビューポートの幅に応じてサイズが変わるよ。</p>
</body>
</html>
コードの説明:
body { font-size: 2vw; }:body内のテキストのフォントサイズをビューポートの幅の2%に設定するよh1 { font-size: 4vw; }:h1見出しのフォントサイズをビューポートの幅の4%に設定するよ
例 2: vhを使った基本フォントサイズ
今度はビューポートの高さに応じてフォントサイズが変わる例を作ってみよう:
CSS
body {
font-size: 2vh; /* フォントサイズはビューポートの高さの2% */
}
h1 {
font-size: 4vh; /* 見出しのフォントサイズはビューポートの高さの4% */
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vhを使ったレスポンシブフォント</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>レスポンシブ見出し</h1>
<p>このテキストはビューポートの高さに応じてサイズが変わるよ。</p>
</body>
</html>
コードの説明:
body { font-size: 2vh; }:body内のテキストのフォントサイズをビューポートの高さの2%に設定するよh1 { font-size: 4vh; }:h1見出しのフォントサイズをビューポートの高さの4%に設定するよ
7.3 vmin と vmax を使った利用例
例 1: vminを使った基本フォントサイズ
ビューポートの小さい方の寸法に応じてフォントサイズが変わる例を作ってみよう:
CSS
body {
font-size: 2vmin; /* フォントサイズはビューポートの小さい方の寸法の2% */
}
h1 {
font-size: 4vmin; /* 見出しのフォントサイズはビューポートの小さい方の寸法の4% */
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vminを使ったレスポンシブフォント</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>レスポンシブ見出し</h1>
<p>このテキストはビューポートの小さい方の寸法に応じてサイズが変わるよ。</p>
</body>
</html>
コードの説明:
body { font-size: 2vmin; }:body内のテキストのフォントサイズをビューポートの小さい方の寸法の2%に設定するよh1 { font-size: 4vmin; }:h1見出しのフォントサイズをビューポートの小さい方の寸法の4%に設定するよ
例 2: vmaxを使った基本フォントサイズ
ビューポートの大きい方の寸法に応じてフォントサイズが変わる例を作ってみよう:
CSS
body {
font-size: 2vmax; /* フォントサイズはビューポートの大きい方の寸法の2% */
}
h1 {
font-size: 4vmax; /* 見出しのフォントサイズはビューポートの大きい方の寸法の4% */
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vmaxを使ったレスポンシブフォント</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>レスポンシブ見出し</h1>
<p>このテキストはビューポートの大きい方の寸法に応じてサイズが変わるよ。</p>
</body>
</html>
コードの説明:
body { font-size: 2vmax; }:body内のテキストのフォントサイズをビューポートの大きい方の寸法の2%に設定するよh1 { font-size: 4vmax; }:h1見出しのフォントサイズをビューポートの大きい方の寸法の4%に設定するよ
GO TO FULL VERSION