↔️ 1つのツールキットで
あらゆるデザイン作業を

Clamp計算機

CSS clamp()で流動的なタイポグラフィを生成。最小・推奨・最大サイズを設定し、完璧なclamp()式とビジュアルスケールプレビューを取得。

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

↔️ Clamp計算機

Clamp計算ガイド

clamp()は、値を最小値と最大値の間に設定するCSS数学関数です:clamp(MIN, VAL, MAX)。VALがMINとMAXの間にある限りVALを返し、VALがMINを下回ればMINを、MAXを上回ればMAXを返します。これによりメディアクエリなしで流動的なタイポグラフィが可能になります。

最小・最大フォントサイズと、スケーリングが発生するビューポート範囲を設定します。ツールが完璧なvwベースの式を計算し、6つのビューポート幅でのフォントサイズプレビューと、サイズが範囲全体でどう変化するかのカーブを表示します。

Pro Tips

Frequently Asked Questions

Q: CSSのclamp()は何をするのですか?
CSSのclamp()は何をするのですか?clamp(MIN, VAL, MAX)はMINとMAXの間の値を選びます。VALがMINより小さければMIN、MAXより大きければMAX、そうでなければVALを返します。小さすぎず大きすぎない流動サイズに最適です。
Q: clamp()はmin()やmax()とどう違いますか?
clamp()はmin()やmax()とどう違いますか?min()は最小値を選び、max()は最大値を選び、clamp()はその両方を組み合わせて中間値を下限と上限の間に収めます。clamp()は流動タイポグラフィの主力です。
Q: clamp()は全ブラウザでサポートされていますか?
clamp()は全ブラウザでサポートされていますか?はい。clamp()、min()、max()は2020年以降の全モダンブラウザでサポートされています(Chrome 79+、Firefox 75+、Safari 13.1+)。
Q: 流動タイポグラフィにはどのビューポートサイズを使うべき?
流動タイポグラフィにはどのビューポートサイズを使うべき?一般的なサイトは320px-1200px、モバイルファーストのプロジェクトは360px-768pxが一般的です。vmaxを超えるとサイズは最大値に固定されます——それは意図した動作です。
Q: clamp()をスペーシングにも使えますか?
clamp()をスペーシングにも使えますか?はい。流動パディングとギャップも同じ式です:clamp(16px, 4vw, 48px)。流動スペーシングは追加のメディアクエリなしでデバイス間のリズムを保ちます。

日本の伝統色・和色

和色は平安時代の襲(かさね)の色目に由来する日本の伝統色。桜や山吹、瑠璃など、植物や自然の名前を冠した優しい色合いが特徴で、JIS慣用色名としても制定されています。現代のUIデザインにも落ち着いた配色として人気です。

山吹色 #F8B500

山吹の花に由来する黄金色。JIS慣用色名

撫子色 #EEA9A9

ナデシコの花の淡いピンク。平安時代から愛される

浅葱色 #00A3AF

新選組の羽織で有名な青緑色

茜色 #B7282E

茜草の根から染めた深い赤。夕焼けの色

若草色 #C3D825

春の新芽を思わせる明るい黄緑

瑠璃色 #1E50A2

仏教の七宝「瑠璃」に由来する深い青

桜色 #FEF4F4

桜の花びらのようなごく淡いピンク

藤色 #BBBCDE

藤の花の淡い紫。春の代表色

常磐色 #007B43

常緑樹の深い緑。永遠を象徴する

小豆色 #96514D

小豆に由来する渋い赤褐色

Q: 和色とは何ですか?
和色とは何ですか?和色は平安時代の襲の色目に由来する日本の伝統色で、桜・山吹・瑠璃など自然の名を冠した色が多く、JIS慣用色名として269色が制定されています。
Q: 山吹色はどんな色ですか?
山吹色はどんな色ですか?山吹の花に由来する黄金色で、色値は #F8B500。JIS慣用色名の一つで、太田道灌の逸話でも知られる日本の代表色です。