可変サイズのclamp()計算
Fluid Size Calculator
2つのビューポート幅のあいだでサイズがなめらかに変わるclamp()の式を計算します。
2つのビューポート幅のあいだでサイズがなめらかに変わる`clamp()`を組み立てます。フルイドタイポグラフィの式で、計算は代わりにやります。両端を`rem`で置きますが、結果がアクセシビリティを守るかどうかはそこで決まります。
基準点
出来上がった式
傾き
0.833vw
切片
0.833rem
範囲
1.000–1.500rem
rem です。好みの問題ではありません。 px で書いた clamp は、読む人がブラウザで決めた文字サイズを完全に無視します。WCAG 1.4.4 違反ですが、既定値を 24px にしているのは書いた本人ではないので、書いた人が困ることは一生ありません。 vw の係数はビューポートに対する比のままなので、上でルートサイズを変えると両端だけが動き、傾きはそのままです。実際に出る値
| ビューポート | 大きさ | |
|---|---|---|
| 320px | 16px | |
| 375px | 16.46px | |
| 480px | 17.33px | |
| 640px | 18.67px | |
| 768px | 19.73px | |
| 1024px | 21.87px | |
| 1280px | 24px | |
| 1440px | 24px（固定） | |
| 1920px | 24px（固定） |
知っておくこと
- · 上の基準点を超えるとサイズは固定され、ウィンドウを広げても変わりません。基準点は両方とも rem なので、読む人が決めた文字サイズには付いていきます。同じ式を px で書くと、それにも付いていきません。
この手の値を一式そろえる途中なら、 タイプスケール生成が clamp の両端に入れる段階の大きさを作ります。
使い方
4つの基準点を決めます
いちばん狭いビューポートでのサイズ、いちばん広いビューポートでのサイズ、そしてその2つが適用されるビューポート幅です。あとはそこから導かれます。
計算結果の表を確認します
実際によくあるビューポート幅でこの式がいくつになるかを並べ、傾きではなくclampが押さえている区間に印を付けます。
宣言をコピーします
`font-size: clamp(...)`の1行です。貼り付けるだけでなく仕組みを理解したいときのために、傾きと切片も一緒に出しています。
よくある質問
単位が`px`ではなく`rem`なのはなぜですか。
`px`で作ったclampは、読む人がブラウザで決めた文字サイズを完全に無視するからです。必要があって既定値を24pxにしている人にも16pxがそのまま届きます。WCAG 1.4.4の違反であり、書いた本人は経験しない種類の失敗です。
ビューポートの両端はブレークポイントに合わせるべきですか。
必ずしもそうではありません。そのあいだはclampが引き受けるので、役に立つ両端は、対応するいちばん狭いスマートフォンと、それより広くなっても文字をこれ以上大きくしたくない幅です。いちばん大きいブレークポイントというより、多くの場合1200〜1400pxあたりになります。
拡大は効きますか。
ページ全体の拡大は効きます。ビューポート幅が変わり、clampが追従します。`rem`の基準点が守っているのは文字だけを拡大する場合です。`vw`の部分はそれに反応しないので、`rem`の成分がなければ文字は固定されてしまいます。式が両方を混ぜているのはそのためです。
パディングや余白にも使えますか。
使えます。この式は単位の計算にすぎず、どのプロパティに載るかは気にしません。出力が`font-size`になっているのはそれがよくある場合だからで、プロパティだけ変えて値はそのまま使えます。
ここから渡せます
角丸（border-radius）生成
Border Radius Generator
角ごとに値を変え、2値記法のスクワークル的な形まで作ってCSSを出力します。
CSSグリッド作成
CSS Grid Builder
名前を付けた領域でグリッドを目で見ながら組み、grid-templateのCSSを出力します。
Flexboxプレイグラウンド
Flexbox Playground
実例の上でflexの各プロパティを切り替え、出来上がるCSSと各プロパティが何を変えたのかを表示します。
アスペクト比計算機
Aspect Ratio Calculator
目標の比率に合うもう一辺を求め、その寸法に当てはまる標準規格を並べます。
次の一手
このツールが出したものをそのまま受け取れる道具です。
CSS整形・圧縮
CSS Beautifier & Minifier
並べ替えを一切せずにCSSを整形または圧縮し、トークンの並びをそのまま保ちます。
CSSグリッド作成
CSS Grid Builder
名前を付けた領域でグリッドを目で見ながら組み、grid-templateのCSSを出力します。
タイプスケール生成
Type Scale Generator
基準サイズと比率から文字と余白のモジュラースケールを作り、CSSかトークンとして書き出します。
カラーコード変換
Colour Format Converter
HEX・RGB・HSL・HWB・LAB・LCH・OKLCHのあいだで色を変換し、いちばん近い色名も示します。
カラーピッカー
Colour Picker
OKLCHの色域から、画面のスポイトで、またはアップロードした画像から色を選び、好きな表記でコピーします。
コントラスト比チェッカー
Contrast Checker
文字色と背景色の組み合わせをWCAG 2とAPCAで採点し、基準を満たす最も近い色を提案します。