CSS calc() プレイグラウンド

calc() 式をリアルタイムにプレビュー。コンテナ幅スライダーで単位混在の便利さを体感しよう。

calc()

プリセット

パディング考慮の全幅

親要素の全幅から左右10pxずつのパディングを引いた幅。ボックスモデルの基本パターン。

calc(100% - 20px)
calc(100% - 20px)=—

CSS 出力

.element {
  width: calc(100% - 20px);
}

使い方

  1. プリセットボタンを選ぶか、calc() の中に式を直接入力してください
  2. 「コンテナ幅」スライダーを動かすと、親要素の幅が変わり calc() の計算結果がリアルタイムで更新されます
  3. 計算後の実ピクセル値が「= ○○px」として表示されます
  4. CSS 出力エリアの「コピー」ボタンでコードをクリップボードに取得できます

calc() についてもっと学ぼう

📝 CSS calc() の使い方ガイド 📐 CSS 単位ビジュアライザー

関連ツール

🎬 CSS アニメーション プレイグラウンド 🟦 Box Shadow ジェネレーター 🎨 カラーパレット ジェネレーター ← ツール一覧に戻る

詰まったら、ここから質問してね ❓

僕が直接返事するので、数日以内に届きます。

質問フォームへ