文字サイズのレスポンシブ対応はCSSのclampが便利すぎる件

テキストで確認したい方はこちら↓
https://lorem-co-ltd.com/min-max-clamp

画像素材と完成版のコードはこちら↓
https://drive.google.com/drive/folder...

関連動画はこちら↓
place-itemsとは？：   • 速報！place-itemsで水平垂直に中央揃えが出来るようになりました！  
min,maxとは？：   • レスポンシブで崩れないCSSのサイズ指定！【min,max】  
CSSのvw,remの違い：   • CSSの単位は何種類もあるけど初学者はこれだけおさえておこう！【px,re...  

レスポンシブデザインでは、さまざまなデバイスや画面サイズに対応するために、文字サイズを適切に調整する必要があります。

そこで最近登場したのがCSSのclamp関数です。
clamp関数は、最小値、希望の値、最大値を指定することで、指定した範囲内での自動的なサイズ調整を可能にします。

文字が小さすぎず大きすぎず、常に適切なサイズで表示されるため、デザインの一貫性と可読性を向上させることができます。
この動画では、具体的なコード例を交えながら、clamp関数の使い方と効果的な活用方法を紹介します。

この動画はReact初心者のWebデザイナーが勉強したことや初めて知ったことを復習と共有を目的に投稿します。
学習教材のような動画ではありませんが、Reactでのコーディング、Reduxでの状態管理など、多くのことを学びますので一緒にハンズオンで作業して頂く形で視聴していただくことができると思います。

また僕自身がreactの予備知識は必要ありませんので、
同じような初心者の方はもちろん、
「Web制作でコーディングは出来るけどReactもやってみたい」という方に見て頂けると嬉しいです。


ブログ：https://lorem-co-ltd.com/
引用元：   • min(), max(), and clamp() are CSS magic!  
Twitter：  / rubyprogram  

#css　#clamp #font-size #レスポンシブ
#web制作 #webデザイン #webデザイナー #javascript #コーディング