Ryo Blog
〜WEB制作をスキルに〜
こんなことを説明しています！
- 長いテキストを２行以内に収める方法
- 行数の違うテキストの高さを揃える方法
- 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限定のアプリになります。)
タイトルの高さを揃える方法
方法１：line-heightを２倍にする
1行のタイトルの部分の line-heightを ２倍にします！
手順
▶︎ html の 上の title クラスの部分のみ lh2 クラスを記述
▶︎ cssで.title の line-height : 1.5 なので、 2倍の .title.lh2 { line-height : 3 } を記述
▶︎ 高さが揃う
コード
.title {
line-height: 1.5;
}
.title.lh2 {
line-height: 3;
}
方法２：高さを指定し、align-items : center
手順
▶︎ ２行のタイトルの部分の高さを計算
今回は、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;
}
まとめ
ブログ記事の一覧などでよく使うものなので、頭に入れておくと良いかと思います！
Category
Tag
X
Youtube
私がWEB制作フリーランスとして独立するために学習したオンラインスクール「デイトラ」の詳細リンクはこちら↓↓
Products
Coming Soon
HP制作のご依頼
現在エンドクライアント様向けの事業サイトを作成中です。
WEB制作業務委託
のご依頼
LPコーディング、WordPress構築、Shopify構築、Liquid編集業務承ります！ 約1年間で80サイト以上作成をしてきました。LP制作 最短2日で納品！
詳しくは、ポートフォリオをご覧ください。
コンテンツ
Ryo'Portfolio裏側徹底解説、レスポンシブほぼ不要のコーディング方法、実務必須のやや難しい実装解説、見積もりからコーディング、納品までの最初から最後まで全部見せます解説動画、等々 「学習終わったけど実務が不安」という人に向けた「実務のお守り」のようなコンテンツを現在作成中です。
© Ryo Blog