オフラインでも使えますか？

ページを一度読み込んだあとは、多くの処理がブラウザ内で完結するためネットワーク接続が切れても動作します。ただし初回アクセス時はオンラインが必要です。

スマートフォンでも使えますか？

はい。CSS数学関数ガイドはレスポンシブ対応しており、iPhone・Android・タブレット・PCなど、モダンなブラウザを搭載した端末であればどこからでも利用できます。

デザイン・CSS無料登録不要

CSS数学関数ガイド

CSSの数学関数(calc/min/max/clamp等)の書き方と活用例を表示する無料オンラインツール。

Input

Result

--- calc() ---
width: calc(100% - 200px);
margin: calc(1rem + 5px);
font-size: calc(16px + 1vw);

--- min() ---
width: min(90vw, 1200px);    /* 小さい方 */

--- max() ---
width: max(300px, 50%);      /* 大きい方 */

--- clamp() ---
font-size: clamp(1rem, 2vw + 1rem, 2rem);
/*          最小値  推奨値        最大値  */

--- よくあるパターン ---
/* レスポンシブコンテナ */
.container {
  width: min(90vw, 1200px);
  margin-inline: auto;
}

/* レスポンシブフォント */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
p  { font-size: clamp(1rem, 1vw + 0.75rem, 1.25rem); }

/* レスポンシブ余白 */
section {
  padding: clamp(1rem, 5vw, 3rem);
}

/* グリッドのレスポンシブ列 */
grid-template-columns:
  repeat(auto-fit, minmax(min(250px, 100%), 1fr));

FAQ

よくある質問

はい。CSS数学関数ガイドが出力するCSSは標準仕様に準拠しており、CSSファイルやstyle属性にそのままコピー＆ペーストして使用できます。

こちらもおすすめ

CSSカラー関数

CSSカラー関数を表示する無料オンラインツール。CSSカラー関数をブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。

CSS filter関数

CSS filter関数を表示する無料オンラインツール。CSS filter関数をブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。

CSS transform関数

CSS transform関数を表示する無料オンラインツール。CSS transform関数をブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。

CSS角度単位

CSS角度単位を表示する無料オンラインツール。CSS角度単位をブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。

border-radiusジェネレーター

CSSのborder-radiusをGUIで視覚的に調整。4隅個別・楕円形の角丸にも対応。コードをコピーしてすぐ使える無料オンラインツール。

Box Shadow生成

CSS box-shadowをGUIで直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。コード即コピーの無料ツール。

読み込み中...