フォントサイズ可変に「css関数clamp」を使ってみた
ホームページ制作メモ:フォントサイズ可変に「css関数clamp」という記述があることを知って試してみたときのメモ。
今までレスポンシブデザインでフォントサイズを変更したいとき、「@media・・・」とメディアクエリでスクリーンサイズをいくつか指定して、サイズを切り替わるようにし、さらに一部は「font-size: calc(18px + 1 * ((100vw - 320px) / 680)) !important;
」のような設定を行って対応してきた。
今回、今まで使っていたCSSをサイトに合わせ見直ししていて、もっとわかりやすくもっと便利に書ける記述がないだろうか?と久しぶりに確認してみると「css関数clamp」という記述方法があることを知った。
https://caniuse.com/?search=clamp
2020年春にはfirefoxが対応して、モダンブラウザではすべてのブラウザにサポートされたCSSの比較関数とのこと。
勉強不足で、今まで知らず試したことがなかった・・・、反省。
今回はこの記述でCSSがシンプルになったので、メモを兼ねて記録。
<p>タグや見出しに段階的に可変させたい文字サイズにclampが便利!
IEは対象外なので、IEブラウザで見たときは、フォントサイズにclampで指定した内容は無視される。
基本的な使い方は以下サイトに。
https://developer.mozilla.org/ja/docs/Web/CSS/clamp()
clamp()
によって、ビューポートの大きさに合わせ、また最小フォントサイズを下回ったり最大フォントサイズを上回ったりすることなく、フォントの大きさを設定することができるという便利なコード。1行でメディアクエリを使用することなくサイズを変更することができる。
IEなど非対応ブラウザ用には、今までのモダンブラウザのみ対応の記述と同じ方法で記述すればよい。
通常のフォント指定でclampを含まないフォントサイズを最初に記述し、その後にfont-size: clamp(・・・)
と書くと、非対応のブラウザはfont-size: clamp()
を無視し、最初に記述したフォント指定サイズが適用される。
今回設定したCSSのフォント内容
.f21 { font-size: clamp(18px, 1vw, 21px); }
基本のフォントサイズを18pxに設定した場合、ウィンドウ幅1vwの大きさを基本として、ウィンドウ幅を拡大した場合に21px以上になることはなく、また、ウィンドウ幅を縮小したときは、今度は18px以下にはならない。
つまり18~21pxの間で可変をしてくれる。
なんと便利!また、CSSもすっきりする。
ここでIEなど非対応ブラウザの対策についてだが、利用するサイトで「IEは無視する」という前提の場合でも、ベースCSSにてbodyやhtml、見出しなどにフォントサイズを指定していると、「clampを含まないフォントサイズを最初に記述」のコードを書かなくてもよいケースもある。
CSSを設定するとき多くの場合、<p>や<h3>など段落や見出しスタイルは、CSSで最初にリセットして初期化し、さらに基本的なサイズを設定する。どのサイトでも基本はほぼ変わらない。
その後、個別にスタイル設定したい場合の段落スタイルや見出しスタイルを追加して必要に応じてそれを使ってコーディングする。
実際に、今回は
html {
font-size: 62.5%;
font-weight: 500;}
body {
font-size: 1.6rem;
}
@media screen and (min-width: 1025px) {
main p{font-size: 1.7rem;}
}
という記述を書いているので今回設定したclassのCSSを<p>タグに設定した場合、IE11で検証するとp class="f21"
のclassで設定したフォントサイズは無視され、main pが有効となって1.7rem=17pxで表示された。
古いブラウザへの対応では、今回のようにフォントの大きさにclamp
を使う場合には、無理にIEを同じフォントサイズにしないプログレッシブ・エンハンスメントの考え方で対応ということでよしとすれば、コードも減り良いと思った・・・。