margin ショートハンド

このツールでできること

• margin ショートハンドでは、margin の 1〜4 値が外側余白の上下左右へどう展開されるかを固定表で確認できます。
• 関連する観点として margin、shorthand、margin ショートハンド を確認し、結果をコピーして別の作業に使えます。

使い方

1. 1値から4値までの行を上から読み、値の個数ごとの展開先を確認します。
2. 2値行では、先頭が上下、2番目が左右に適用される点を見ます。
3. 4値行の上・右・下・左は時計回りとして読みます。
4. 外側余白を左右だけ変える場合は、例の margin: 10px 20px; を上下左右へ展開して考えます。

入力例・出力例

よくある利用シーン

• カード間やセクション間の外側余白を、上下左右へ正しく展開したいとき。
• margin: 0 auto のような左右方向の指定を、2値ルールとして説明したいとき。
• レビュー中の 3 値 margin が下側だけ別値になることを確認したいとき。

結果確認のポイント

• 生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。
• margin、shorthand、margin ショートハンドの観点で、入力内容と出力内容がずれていないか見直してください。
• コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。

注意点

• ブラウザ差や既存CSSとの競合があるため、公開前に対象環境で確認してください。
• 結果を公開・送信する前に、用途に合う形式かを必ず確認してください。

データの扱い / プライバシー

• margin ショートハンドの主要な処理はブラウザ内で実行されます。
• 入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
• 本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

よくある質問

関連ツール