タイトルやテキストの高さを揃えるためのCSS
Share
こんなことを説明しています!
- 長いテキストを2行以内に収める方法
- 行数の違うテキストの高さを揃える方法
- Ryoが使用しているスニペットアプリ「PASTE」の紹介
解説動画
長いテキストの表示する行数を指定するCSS
ブログ一覧ページなどで、記事の文章を抜粋して表示させることがあるかと思います。
javascriptやfunctions.php (wordpressのとき) などで文字数を指定することもできますが、レスポンシブのことなどを考えるとイマイチ使い勝手が悪いです。
そこでcssを使って整えます。その時に使うのが、こちらになります。
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //ここを変える
このコードは結構よく使いますので、すぐに引き出せるようにしておきたいですね!
私は、すぐに引き出したいものは PASTE というアプリを使っています。
( リンクはこちら )
ボタン1つですぐに引き出すことができ 、保存や削除も簡単なのでとても重宝してます!
こちらは有料にはなりますが、月200円、年間1680円 で使えるので課金する価値はあると思います!(Mac限定のアプリになります。)
タイトルの高さを揃える方法
方法1:line-heightを2倍にする
1行のタイトルの部分の line-heightを 2倍にします!
手順
▶︎ html の 上の title クラスの部分のみ lh2 クラスを記述
▶︎ cssで.title の line-height : 1.5 なので、 2倍の .title.lh2 { line-height : 3 } を記述
▶︎ 高さが揃う
コード
<p class="title lh2">1行のタイトル</p>
<p class="title">2行のタイトル<br>2行のタイトル</p>
.title {
line-height: 1.5;
}
.title.lh2 {
line-height: 3;
}
方法2:高さを指定し、align-items : center
手順
▶︎ 2行のタイトルの部分の高さを計算
今回は、font-size: 30px で line-height: 1.5 なので 30px × 2行 × 1.5 = 90pxになります。
そこで、height: 90px を指定
▶︎ display: flex と align-items: center を使って縦中央揃えにする
コード
.title {
height: 90px;
display: flex;
align-items: center;
}
まとめ
ブログ記事の一覧などでよく使うものなので、頭に入れておくと良いかと思います!