heightとline-heightの違いを徹底解説！デザイン初心者でも分かる基礎と活用法

---

heightとline-heightの基礎をおさえる

この二つの用語はデザインやウェブ制作でよく使われますが、意味と役割が異なるため混乱しやすいポイントです。height は要素の高さを決める値で、どれだけ縦にスペースを確保するかを指します。単位はpxやem, rem, % などが使われ、箱の縦幅を固定したいときに使います。対して line-height はテキストの行と行の間隔、つまり行間の距離を決める値です。テキストが複数行になるときの見やすさに直結します。

この説明だけを見ると似ているようですが、height は箱そのものの縦サイズを決定するのに対し、line-height はテキストの行間の余白を決める属性です。言い換えれば height は「箱の大きさを固定」する道具、line-height は「文字の読みやすさを整える道具」として使い分けます。HTMLにおけるテキストは段落や見出しなどの要素に配置され、height が大きすぎると中の内容がはみ出したり、line-height が小さすぎると行がつぶれて読みにくくなったりします。

注意点 は、height を設定しても中身があふれるときには overflow の挙動にも影響します。line-height は主にテキストの読みやすさを左右しますが、ボタンやカードのようなパーツを縦方向に整えたいときにも便利です。使い分けのコツは、まず何を固定したいのかを決め、それから他方を最適化することです。

able>項目heightline-height意味要素の縦の固定サイズテキスト行間の距離作用の対象ブロックレベルの箱テキストの行影響余白とはみ出しの扱い行間の視覚的間隔

この章のまとめとして、height は箱の縦幅を決め、line-height は読みやすさと行間を決めるものです。両者を正しく使い分けることで、デザインの安定感と可読性を同時に高めることができます。

実務での使い分けとよくある誤解

現場では height を固定してしまうと、画面サイズが変わると見栄えが崩れやすくなります。特にスマートフォンでは縦長の画面や横幅の差が大きく、min-height や max-height と組み合わせるのが安全です。実務での基本的な使い分けは次のとおりです。

• height は外枠の高さを決めるときに使う。静的なデザインや固定サイズのカード、アイコンの周りの余白など。
• line-height は読みやすさの工夫。長い段落を見やすくするためにも、適切な値を選ぶ。1.2や1.5、2.0 などの相対値がよく使われます。
• 高さを絶対に揃えたい場合は min-height や max-height を使い分けると、可変の中身にも対応できます。
• ボタンや入力欄などのUIパーツでは、line-height と padding を組み合わせて縦方向の組み方を決めると、見た目が安定します。

誤解の一つとして「line-height を大きくすればテキストが勝手に中央寄りになる」というものがありますが、これは要素の display や vertical-align の設定にも依存します。実際には height が小さいとき line-height を大きくしても、テキストは中央ではなく上下に揺れたり、オーバーフローが発生することがあります。したがって、整えたいのが「行間の見た目」なら line-height、ボックス全体の大きさなら height を使うのが正解です。

ここで大切なのは、レスポンシブデザインを意識すること。画面幅が変わると行数やカードの高さも変わる可能性があるため、height 固定だけに頼らず、必要に応じて min-height や padding を活用して柔軟に対応します。

実例で学ぶコツと注意点

具体的な手順として、まずデザイン案のボックスの高さの要件を決め、次に text の行数と行高を見積もって line-height を設定します。もしテキストが多くて;heightが足りなくなる場合は height の値を増やすのではなく min-height を使い、 overflow の挙動を確認します。視覚的な均整を保つには、実際のブラウザで複数のデバイスでチェックするのが一番確実です。サンプルの数値例として、カードの高さを 120px、line-height を 1.5、フォントサイズを 16px とすると、約 2 行半程度のテキストが読みやすく収まることが多いです。

このコツを実践するには、まず実際のテキスト量を測定します。短すぎると height が空白になる可能性があり、逆に長すぎるとスクロールが生じます。適切な line-height は単に数字を上げるだけでなく、フォントファミリや文字の幅、行間の読みやすさのバランスを考えながら決めましょう。中学生にも伝わる例えとして、行間を「段差のある階段」だとすると、低すぎると段差が小さくて踏み外しやすく、高すぎると次の段へ進む距離が長くて落ち着かない、そんなイメージです。

さらに、異なるフォントやウェイトで同じ line-height を使うと印象が変わることがあります。デザイン全体の統一感を持たせるには、プロジェクト内のすべてのテキストに対して同じ line-height ルールを適用するか、ケース別に微調整するのがよいでしょう。これらの観点を踏まえると、height と line-height は「箱の大きさ」と「文字の読みやすさ」を別々の目的で使うのが最適解だと理解できます。

ピックアップ解説

友達と学校帰りにちょっとしたデザイン談義をしました。僕が height と line-height の違いを詳しく説明すると、友達は最初『高さを固定するのと行間を整えるのって何が違うの？』と質問してきました。僕は平易な例えを使って説明します。まず height は箱の“縦の長さ”を決める要素。これを固定すると中身が多いとあふれることがある。逆に line-height は文字の行間の距離を決め、読みやすさに直結します。僕は、段落が崩れずに美しく見えるコツは line-height を適切に設定し、必要なときは height を調整する、という実践型の考えを伝えました。英語の長い単語が混ざるときの見栄えを崩さないためには、line-height を標準値に近づけ、デザイン全体のバランスを見ながら height は最小限にとどめるのがいいと整理しました。

---