CommentOut

CSSで要素の高さ(height)を指定行数分に調整する方法 CSSで要素の高さ(height)を指定行数分に調整する方法

CSSで要素の高さ(height)を指定行数分に調整する方法

公開日:  最終更新日:

例えば、要素の高さを「n文字分」と指定したい時のheightの指定方法をご紹介します。

em、remはfont-size以外にも使える

ざっくり行きますが、heightを以下のように指定してみてください。

p {
    height: 3em;
}

多少ずれると思いますが、近い大きさにはなったんじゃないでしょうか?

なぜずれるか?
ぴったり3行ではなく、少しずれる原因はline-heightです。
line-heightは1emに含まれません。

そこで、以下のように変えてみましょう。

p {
    height: 3em;
    line-height: 100%;
}

これで3行の文字の高さにピッタリと高さが合うはずです。
しかし、今度は行間が狭すぎますね。

やりたいことは行間を維持したまま、高さを指定行数分に揃えたいはずです。

要素の高さを文字の行間を変えず、指定行数分の高さに調整するには?

line-heightは100%ではなく、180%くらいに指定してみましょう。
ここはデザインに合わせて変更してOKです。

そして、heightをcalcで計算して高さを調整します。
計算式は1em(1文字の高)× 1.8(line-heightの180%分)× 3(3行分)となります。
実際にCSSで表すと以下のようになります。

p {
    line-height: 180%;
    height: calc(1em * 1.8 * 3);
}

1em * 1.8の部分は単純に1文字に行間をかけているだけですから、以下のように1.8emとも表すことができます。

p {
    line-height: 180%;
    height: calc(1.8em * 3);
}

これで、要素サイズを行数にぴったり揃えることが出来ます。

あ!box-sizingを揃えておくことを忘れずに!

* { box-sizing: border-box; }
宣伝
WordPressサイトのテンプレート編集やトラブル対応、バグ修正、簡単なJavascriptの作成(カルーセルやバリデーション等)など、小規模なスポット対応を受け付けております。
もしお困りごとがありましたら、お問い合わせフォームよりご相談ください。

この記事を書いた人

uilou

uilou

プログラマー

基本的に、自分自身の備忘録のつもりでブログを書いています。 自分と同じ所で詰まった人の助けになれば良いかなと思います。 システムのリファクタリングを得意としており、バックエンド、フロントエンド、アプリケーション、SQLなど幅広い知識と経験があります。 広いだけでなく、知識をもっと深堀りしていきたいですね。