カラム幅・ギャップ計算ツール
この記事はアフィリエイト広告を利用しています。
親要素・コンテナ幅、カラム数、ギャップを指定して、1カラムあたりのpx幅と%を計算できるツールです。CSS GridやFlexboxのレイアウト設計に使えるCSS例も確認できます。
できること
- 親要素・コンテナ幅を指定して計算できます
- カラム数とギャップ幅を指定できます
- 1カラムあたりのpx幅と%を確認できます
- 使用可能幅、総ギャップ幅、ギャップ数を確認できます
- カラムとギャップのプレビューを表示できます
- Grid用CSSとFlexbox用CSSをコピーできます
使い方
- 親要素・コンテナ幅を入力します
- カラム数を入力するか、プリセットから選びます
- ギャップ幅を入力するか、プリセットから選びます
- 1カラムあたりの幅、使用可能幅、総ギャップを確認します
- 必要に応じてGrid用CSSまたはFlexbox用CSSをコピーします
よくある質問
-
カラム幅・ギャップ計算ツールとは何ですか？
-
親要素・コンテナ幅、カラム数、ギャップをもとに、1カラムあたりの幅を計算できるCSSレイアウト向けツールです。
-
ツールは無料で使えますか？データは送信されますか？
-
ツールは無料で利用できます。入力・選択したデータはお使いのブラウザ内で処理され、サーバーへ送信されることはありません。
-
どのような計算式でカラム幅を出していますか？
-
総ギャップは「ギャップ × カラム間の数」、使用可能幅は「コンテナ幅 − 総ギャップ」、1カラム幅は「使用可能幅 ÷ カラム数」で計算します。
-
12カラム以外にも使えますか？
-
はい。2 / 3 / 4 / 5 / 6 / 8 / 10 / 12 / 16 / 24 カラムのプリセットがあり、任意のカラム数も入力できます。
-
ギャップが大きすぎる場合はどうなりますか？
-
ギャップが大きすぎて使用可能幅が0以下になる場合は、計算できない状態として表示されます。
