使い方を教えてください。

画面の入力欄に処理したい値を入れるだけで、CSS段組み生成が即座に結果を表示します。コピーボタンで結果をワンクリックでクリップボードに送れます。

料金はかかりますか？

CSS段組み生成は完全無料です。登録やログイン、課金、アプリのインストールは不要で、ブラウザがあればすぐに利用できます。

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

CSS段組み生成

CSSマルチカラムレイアウト(columns)をGUIで設定して生成。ブログや記事のレイアウトに便利な無料オンラインツール。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. テキストのサンプルです。複数カラムのレイアウトを確認できます。Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. 日本語のテキストも含めて、段組みの表示を確認しましょう。

カラム数3

間隔20

罫線幅1

罫線色

column-count: 3;
column-gap: 20px;
column-rule: 1px solid #e2e8f0;

FAQ

よくある質問

運営維持のため一部ページに広告を表示していますが、ツール本体の動作を妨げない範囲に留めています。ブロッカーを利用されても機能は動作します。

こちらもおすすめ

CSSアニメーション生成

CSSアニメーションのキーフレームを視覚的に作成・プレビュー。イージング関数の選択、コードのコピーまでワンストップ。Web開発に便利な無料ツール。

CSSボタン生成

色・サイズ・角丸・影などを調整してCSSボタンを作成。コピペで使えるCSSを出力する無料オンラインツール。

CSS clip-path生成

CSS clip-pathをプリセットやカスタムで生成。円・楕円・多角形に対応。CSSコードをコピペで使える無料オンラインツール。

CSSフィルター生成

blur・brightness・contrast・grayscaleなどCSSフィルターをスライダーで視覚調整。コードをリアルタイム生成。Web制作に便利な無料オンラインツール。

フォントペアリング

Google Fontsから見出し・本文のフォント組み合わせをプレビュー。デザインのフォント選びに便利な無料オンラインツール。

フォントサイズ変換

px・pt・em・rem・%のフォントサイズを相互変換。CSSのタイポグラフィ設定に便利な無料オンラインツール。

読み込み中...