VIDEO LESSON

CSSのfont-sizeの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:29動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、フォントサイズです。
0:06これは、文字の大きさを決めるプロパティです。
0:09見出しを大きくして目立たせたり、本文を読みやすい大きさに整えたりと、文字のあるページでは毎回のように使う基本の指定です。
0:18今回は、一点五レムと一レムを比べながら、基本の書き方から、レムとイーエムの違い、
0:24効かないときの注意点まで、初心者向けに分かりやすく解説します。
0:29文字が大きくなると、行の折り返し位置や要素の高さまで変わる点にも注目してください。
0:35大きさは、情報の優先順位を伝える大切な手がかりです。
0:39小さすぎると読みにくく、大きすぎると行が窮屈になるので、バランスを考えることが大切です。
0:46まず基本の書き方です。
0:47フォントサイズの後ろにコロンを書き、値として一点五レムをひとつだけ書いて、
0:51最後にセミコロンを付けます。
0:55スライドの例では、デモというクラスを持つ要素に対して大きさを指定しています。
1:00クラス名の前のドットや波かっこを書き忘れると効かなくなるので、まずはこの三行をそのまま書いてみましょう。
1:08そしてブラウザーで、ハローシーエスエスという文章が大きく見えるかどうかを確かめてください。
1:14一行で文字の印象がぐっと変わるのが分かります。
1:17慣れてきたら、数字だけを少しずつ変えて、見え方の変化を比べてみてください。
1:23指定できる値を読み解きましょう。
1:25大きく分けて三種類あります。
1:28一つ目は長さで、ピクセルやレムのように、数値に単位を付けて書きます。
1:34二つ目は割合で、パーセントで書くと親の文字サイズを基準に計算されます。
1:39三つ目はキーワードで、スモールやラージといった言葉で段階的に選べます。
1:45ふだんの制作では、本文や見出しの大きさをレムでそろえて指定するのが扱いやすく、
1:49おすすめです。
1:53まずはレムを中心に覚え、必要な場面でほかの書き方を追加していきましょう。
1:59値を切り替えて、同じ文章がどう変わるか比べると理解が深まります。
2:04単位の違いをもう少し詳しく見ます。
2:07レムは、エイチティーエムエル要素、つまりルートの文字サイズを基準にします。
2:13ページ全体で基準がひとつなので、予想しやすいのが特長です。
2:18一方、イーエムとパーセントは、親要素の文字サイズを基準にします。
2:24親もイーエムで指定されていると、入れ子になるほど大きさが掛け算のように積み重なってしまうことがあります。
2:32初心者のうちは、全体の大きさはレムで管理し、親からの相対的な調整が本当に必要な場所だけでイーエムを使うと、
2:37混乱を避けられます。
2:43基準を意識して単位を選ぶことが大切です。
2:46初期値と継承を確認します。
2:48初期値はミディアムで、多くのブラウザーでは十六ピクセル前後が目安とされます。
2:54そして、このプロパティは親から子へ継承します。
2:58親の要素に大きさを書けば、その中にある見出しや文章にもその大きさが引き継がれます。
3:04便利な反面、広い範囲に指定すると、意図しない場所まで大きくなってしまうこともあります。
3:11一部分だけ変えたいときは、その要素に改めて値を書き直してください。
3:16また、インヘリットやイニシャルといった共通のキーワードも使えますが、まずはレムでの指定をしっかり押さえましょう。
3:25ここからは記事の実例です。
3:27エイチティーエムエルでは、ステージというクラスを付けた外側の箱の中に、デモというクラスの箱を入れます。
3:36デモの中身は、ハローシーエスエスという英語から始まり、日本語の文章が続く内容です。
3:42文章が長めなので、文字が大きくなると行の折り返しが変わり、箱の高さまで変わる様子を観察できます。
3:50頭の部分では、スタイルシートをリンクで読み込んでください。
3:55この土台は変えずに固定し、次で変える一行の効果だけを観察します。
4:00まずは土台をそのまま用意しましょう。
4:03親と子の入れ子の構造が、このあとの継承の理解にもつながります。
4:08土台のシーエスエスです。
4:10ステージは最大幅を三十レムにし、デモには濃い緑の枠線と薄い緑の背景を付けます。
4:16最後の行でフォントサイズに一点五レムを指定すると、文字が標準より大きく表示されます。
4:23まずは文章がはっきりと大きく見え、一行に入る文字数が減って折り返しが増えることに注目してください。
4:30ファイルを保存してブラウザーを再読み込みし、見え方をよく観察してください。
4:36色や余白は変えていないので、違いはこの一行だけが生んだものです。
4:41箱の高さが伸びる様子も合わせて確認しましょう。
4:45次に最後の行だけを、一レムへ置き換えます。
4:48すると、大きかった文字が標準の大きさに戻ります。
4:51一点五レムのときと比べると、文章がコンパクトに見え、一行に入る文字数が増えて、
4:54箱の高さも低くなります。
4:58ここで大切なのは、色や太さは同じでも、大きさひとつで読みやすさとページ全体のバランスが変わる、
5:02という実感です。
5:05見出しは大きめ、本文は一レム前後という組み合わせは、強弱を付ける基本パターンです。
5:11変更後は保存して再読み込みし、違いを自分の言葉で説明してみてください。
5:16スクリーンショットで並べて比べると、違いがさらに分かりやすくなります。
5:20間違えやすい点を確認します。
5:23代表的なのは、画面幅を基準にするブイダブリューだけで本文の大きさを決めてしまうことです。
5:30この書き方だと、利用者がブラウザーで文字を拡大しても、思ったように大きくならず、
5:34読みにくさにつながります。
5:38画面幅に応じて大きさを変えたいときは、クランプ関数を使い、その中にレムを含めておくのがポイントです。
5:47そうすれば、画面幅に合わせつつ、文字拡大にも対応しやすくなります。
5:52そのほか、セレクターの不一致や別の宣言による上書きもよくある原因です。
5:58開発者ツールで、スタイルズとコンピューテッドを順に確認しましょう。
6:03ブラウザー互換性を確認します。
6:05記事が参照するエムディーエヌの記録では、プロパティ本体はクロームが一以降、
6:10エッジが十二以降、ファイアフォックスが一以降、サファリが一以降で対応しています。
6:16アンドロイド版クロームは十八以降、アイオーエス版サファリは一以降です。
6:21とても歴史の長いプロパティなので、今回使ったレムでの基本の書き方は安心して使えるでしょう。
6:27ただし、プロパティが使えることと、すべての値や関数が同じように使えることは別です。
6:32クランプ関数のような比較的新しい書き方を使うときは、対象ブラウザーで個別に確認してください。
6:39スマートフォンでも同じ指定が使えるので、実機での確認も習慣にしましょう。
6:44最後に練習とまとめです。
6:46まとめます。
6:47フォントサイズは、文字の大きさを決めるプロパティで、初期値はミディアム、
6:51親から子へ継承しました。
6:55レムはルート基準で扱いやすく、イーエムとパーセントは親基準でした。
7:01練習として、まず一点五レムと一レムの違いを言葉で説明し、次に文章量や親の幅だけを変えて、
7:07結果がどう変わるかを比べてみてください。
7:12お疲れさまでした。
7:14関連するフォントファミリーやラインハイトも合わせて学ぶと、文字まわりの整え方がより確かなものになります。
7:23自分のページでも、見出しだけを大きく変えて効果を確かめてみましょう。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

font-sizeの役割と主な指定値を解説。文字と行の折り返しが変わり、要素の高さにも影響します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのfont-sizeの使い方：指定値・実例・効かない原因とブラウザー互換性 →