論理プロパティ

このツールでできること

• 論理プロパティでは、margin、padding、inset、border の inline/block 系論理プロパティを固定表で確認できます。
• 関連する観点として 論理プロパティ、css logical properties、CSS を確認し、結果をコピーして別の作業に使えます。

使い方

1. 項目列で margin、padding、inset、border のどの系統かを確認します。
2. content 列の左右、上下、左右位置、上下位置を見て物理方向との関係を把握します。
3. 横書きの左右余白をまとめる場合は margin-inline や padding-inline を参照します。
4. 開始側と終了側だけを分けるボーダーには border-inline-start と border-inline-end を使う前提で読みます。

入力例・出力例

よくある利用シーン

• margin-left/right を margin-inline に置き換える判断をしたいとき。
• padding-top/bottom 相当を padding-block でまとめたいとき。
• RTL や writing-mode 対応を考えて、開始側・終了側のボーダー名を確認したいとき。

結果確認のポイント

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

注意点

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

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

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

よくある質問

関連ツール