CSS Box Model Visualizer

CSS Box Model Visualizer

margin/padding/borderを色分けビジュアルで確認しながらCSSコードを生成する開発ツール

━━━━━━━━━━━━━━━━━━━━━━━━

■ 概要

margin・padding・borderの各辺を個別スライダーで調整し、同心四角形の色分けボックス図でリアルタイムに確認できます。一括編集モードで4辺を同時変更、box-sizingのcontent-box/border-box切り替えにも対応。設定はJSONファイルで保存・読み込みが可能です。

インターネット接続不要。入力データは外部に一切送信されません。

━━━━━━━━━━━━━━━━━━━━━━━━

■ 主な機能

✓ margin / padding / border の各辺を個別スライダーで調整

✓ 一括編集モードで4辺同時変更に切り替え可能

✓ content / padding / border / margin を4色で色分けしたリアルタイムビジュアル

✓ box-sizing: content-box / border-box の切り替え対応

✓ 生成CSS（margin/padding/border/box-sizing）をワンクリックコピー

✓ 設定をJSONファイルとして保存・読み込み

━━━━━━━━━━━━━━━━━━━━━━━━

■ 収録ファイル

・ CSS Box Model Visualizer_1.0.0_x64-setup.exe（インストーラー版）

・ README.txt

━━━━━━━━━━━━━━━━━━━━━━━━

■ 動作環境

・ Windows 10 / 11（64bit）

━━━━━━━━━━━━━━━━━━━━━━━━

■ 注意事項

・初回起動時に Windows スマートスクリーンの警告が出る場合があります。「詳細情報」→「実行」でご利用ください。

・本ツールの使用によって生じた損害について作者は責任を負いません。