忘備録~フォントサイズ可変「clamp」~
2022年12月23日
今日から1年の最後の月!
1ヶ月の半分が過ぎていきましたね!
でも、日本のCOVID-19の終息はなかなか見えてこないんですね…
マスク生活はいつまで続くねん?
そろそろマスク生活から脱却したいのに!
世界のみんなを見たらほとんどマスクしてない人多いわ!
日本だけマスク生活をつつけてたら余計にしんどくならへん?
そろそろ、政府の役員たち、そろそろマスクなしの生活しても大丈夫ですって発令してほしいものです!
さてと、本題に入ろう!
忘備録~フォントサイズ可変「clamp」~
たまたま、フォントサイズ可変はできないかとネットで調べました!
そこになんと、「clamp」というプロパティが存在していたそうです!
ネットにいろんな記事がいっぱい出てきてますが…
2021年からなんだそうだ!
ほとんどのブラウザでは使えるようになっていますが…
clamp関数の使い方
<h1>ラジオ体操</h1>
<p>新しい朝が来た 希望の朝だ<br />喜びに胸を開け 大空あおげ<br />ラジオの声に 健(すこ)やかな胸を<br />この香る風に 開けよ<br />それ 一 二 三<br /><br />新しい朝のもと 輝く緑<br />さわやかに手足伸ばせ 土踏みしめよ<br />ラジオとともに 健やかな手足<br />この広い土に伸ばせよ<br />それ 一 二 三</p>
h1{
font-size:clamp(20px, 1vw, 30px);
}
p{
font-size:16px;
}
上記の例だと、h1のフォントサイズが20pxから30pxの間で可変してくれます。
残念ながら、clamp関数はIEサポート対象外です。
でも、安心してください!
IEのブラウザはもう棺桶なので気にしなくても大丈夫かと(笑)
レスポンシブ対応の時には便利になってきますね!
では、また!