CSSを使ったコンテンツ行数の高さの揃え方【line-clamp】

画像素材と完成版のコードはこちら↓
drive.google.com/drive/folder...
関連動画はこちら↓
flex-directionついて: • justify-contentとflex-d...
gridについて: • CSSのgridを使った多段レイアウトは慣れ...
今日はCSSの強力なプロパティの一つ、line-clampについて解説します。
このプロパティを使えば、テキストコンテンツを指定した行数で切り取ることができてデザインの統一感を簡単に保つことができます。
ブログのカードや製品リストなど、限られたスペースに情報を表示したいときに非常に便利です。
この動画ではline-clampを使ってコンテンツの高さを揃える具体的な方法を、実際のコード例を交えながら詳しく解説します。
この動画はReact初心者のWebデザイナーが勉強したことや初めて知ったことを復習と共有を目的に投稿します。
学習教材のような動画ではありませんが、Reactでのコーディング、Reduxでの状態管理など、多くのことを学びますので一緒にハンズオンで作業して頂く形で視聴していただくことができると思います。
また僕自身がreactの予備知識は必要ありませんので、
同じような初心者の方はもちろん、
「Web制作でコーディングは出来るけどReactもやってみたい」という方に見て頂けると嬉しいです。
ブログ:lorem-co-ltd.com/
引用元: • How to set a maximum n...
Twitter: / rubyprogram
#line-clamp, #css
#web制作 #webデザイン #webデザイナー #javascript #コーディング

Пікірлер: 2

  • @goto3633
    @goto36339 күн бұрын

    いつも勉強させて頂いています。 flex-growを使った方法も解説して頂きたいです。

Келесі