VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:01シーエスエス、リファレンス解説です。
0:04今回のテーマは、ラインハイトです。
0:06これは、文章の1行分の高さを決めるプロパティで、行と行の間隔、つまり行間を調整します。
0:14行間が詰まり過ぎていると文章は窮屈に感じ、逆に広げ過ぎると間延びして読みにくくなります。
0:21今回は、一・九という広めの値と、一・二という詰まった値を比べながら、基本の書き方から注意点まで、
0:27初心者向けに分かりやすく解説します。
0:32文字の大きさは変えなくても、行の高さひとつで読みやすさが大きく変わることを、
0:37実例で確かめていきましょう。
0:41本文の読みやすさを整える作業は、実際のサイト制作でも欠かせない、基本のテクニックです。
0:48まず基本の書き方です。
0:50書き方はとてもシンプルで、ラインハイトの後ろにコロンを書き、高さの値をひとつだけ書いて、
0:54最後にセミコロンを付けます。
0:59スライドの例では、デモというクラスに、一・九を指定しています。
1:04単位を付けないこの書き方では、文字サイズに一・九を掛けた高さが、1行分の高さになります。
1:10クラス名のドットや波かっこを書き忘れると効かないので、まずはこの三行をそのまま書き、
1:16ブラウザーで複数行の文章の間隔が広がる様子を確かめてみましょう。
1:22値の前後に半角スペースを入れておくと、後から読み返したときにも分かりやすくなります。
1:28指定できる値を読み解きましょう。
1:31大きく分けて、ノーマル、単位なしの数値、長さ、割合の四通りがあります。
1:36ノーマルは、ブラウザーやフォントが決める標準の高さで表示する指定です。
1:41単位なしの数値は、その要素の文字サイズに対する倍率です。
1:45長さはピクセルなどの単位付き、割合はパーセントで文字サイズに対する比率を示します。
1:52同じ一・九でも、書き方によって継承のされ方が変わる点が、このプロパティの大切なポイントです。
1:59迷ったときは、まず単位なしの数値から始め、ノーマルと見比べる手順が、初心者には一番分かりやすい方法です。
2:06単位なしの数値がおすすめな理由を補足します。
2:10単位なしで書くと、継承されるのは倍率そのものです。
2:13たとえば親に一・七と書けば、文字が大きな見出しの子要素でも、その文字サイズに一・七を掛けた高さが確保され、
2:18行が詰まりません。
2:22一方、ピクセルなどの固定値を親から継承すると、高さがそのまま引き継がれます。
2:28大きな文字の子要素では、文字に対して行の高さが足りず、上下が詰まって見えることがあります。
2:35本文全体に効かせたいときほど、単位なしの倍率で書く習慣を付けておくと、文字サイズが変わる場面でもバランスが崩れにくくなります。
2:44初期値と継承を確認します。
2:46初期値はノーマルで、指定しなければブラウザーが決める標準の高さで表示されます。
2:52そして、このプロパティは親から子へ継承します。
2:56親の要素に書けば、その中にある見出しや文章にも同じ考え方が引き継がれます。
3:01便利な反面、さきほど説明したように、固定値を広い範囲に書いてしまうと、大きな文字の場所で詰まることがあります。
3:10継承を取り消したい要素には、改めてノーマルや別の倍率を書き直してください。
3:16また、インヘリットやイニシャルといった共通のキーワードも使えますが、まずはノーマルと単位なし数値の違いをしっかり押さえましょう。
3:26ここからは記事の実例です。
3:28エイチティーエムエルでは、ステージというクラスを付けた外側の箱の中に、デモというクラスの箱を入れます。
3:36デモの中身は、ハローシーエスエスという英語から始まり、日本語の文章が続く内容で、
3:41折り返して複数行になる長さにしてあります。
3:46複数行あるからこそ、行の高さを変えたときに、行間と文章全体の高さがどう変わるかを観察できます。
3:54頭の部分では、スタイルシートをリンクで読み込んでください。
3:58この土台は変えずに固定し、次で変える一行の効果だけを観察します。
4:03行間は複数行で初めて見える効果なので、この準備が大切です。
4:08土台のシーエスエスです。
4:10ステージは最大幅を三十レムにし、デモには濃い緑の枠線と薄い緑の背景を付けます。
4:16最後の行でラインハイトに一・九を指定すると、1行ごとの高さが文字サイズの一・九倍になり、
4:21行と行の間がゆったりと広がります。
4:26色や余白は一切変えていないのに、文章全体の高さが伸びて、読みやすく感じられるはずです。
4:33ファイルを保存してブラウザーを再読み込みし、行間の広さと、箱全体の高さの二点が同時に変わる様子を、
4:38よく観察してください。
4:43行間が広がると視線の上下移動は増えるものの、行を読み違えるミスが減る効果も期待できます。
4:50次に最後の行だけを、一・二へ置き換えます。
4:54すると、広がっていた行間が詰まり、文章全体の高さも低くなります。
5:00行同士が近付くため、上の行と下の行を読み間違えやすくなるかもしれません。
5:07ここで大切なのは、文字の大きさや色は同じでも、行の高さだけで読みやすさが変わる、
5:12という実感です。
5:17広ければ良いわけではなく、文章の長さや文字の大きさに合った値が最適です。
5:24一般に日本語の本文では、一・六から一・九程度が読みやすい目安とされます。
5:31変更後は保存して再読み込みし、二つの見え方の違いを自分の言葉で説明してみてください。
5:39間違えやすい点を確認します。
5:41一番多い失敗は、ピクセルなどの固定値を親に書き、それを大きな文字の子要素が継承して、
5:46行が詰まってしまうことです。
5:50本文では単位なしの倍率に書き直すと解決しやすくなります。
5:55二つ目は、セレクターの不一致や、別の宣言に上書きされて効かないケースです。
6:01効かないと感じたら、開発者ツールで、ネットワーク、エレメンツ、スタイルズ、
6:08コンピューテッドの順に調べ、対象の宣言が残っているか、最終的な計算値がいくつかを確認しましょう。
6:15狭い画面幅や文字拡大でも行が重ならず読めるかの確認も大切です。
6:20特に単一行の見出しでは、行の高さが要素の高さに影響する点も合わせて見てください。
6:27ブラウザー互換性を確認します。
6:29記事が参照するエムディーエヌの記録では、プロパティ本体はクロームが一以降、
6:35エッジが十二以降、ファイアフォックスが一以降、サファリが一以降で対応しています。
6:41アンドロイド版クロームは十八以降、アイオーエス版サファリは一以降です。
6:46とても歴史の長いプロパティなので、今回使った基本の書き方は、安心して使えると考えてよいでしょう。
6:53ただし、プロパティが使えることと、すべての値や新しい書き方が使えることは別です。
6:59珍しい指定を追加する場合は、その部分の対応も別に確認してください。
7:04広く使えるため、行間の調整は表示確認の負担が少ない装飾のひとつです。
7:09最後に練習とまとめです。
7:11まとめます。
7:12ラインハイトは、行の高さを決めるプロパティで、初期値はノーマル、親から子へ継承しました。
7:20単位なしの数値は文字サイズの倍率として働き、継承しても詰まりにくいのが利点でした。
7:27練習として、まず一・九と一・二の違いを言葉で説明し、次に文章量や親の幅だけを変えて、
7:32結果がどう変わるかを比べてみてください。
7:37お疲れさまでした。
7:39関連するフォントやレタースペーシングも合わせて学ぶと、文字まわりの整え方がより確かなものになります。
7:47行間を自分で調整できるようになると、長い本文でも読みやすいページを作れるようになります。

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

この動画で学べること

line-heightの役割と主な指定値を解説。複数行の文章の行間と全体の高さが変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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