モーダルサイズ

このツールでできること

• モーダルサイズでは、xs 320pxからxl 1024px、full全画面までのモーダル幅を固定表で確認できます。
• 関連する観点として モーダルサイズ、modal sizes、CSS を確認し、結果をコピーして別の作業に使えます。

使い方

1. 短い確認や警告なら、xs 320px幅を候補にします。
2. 入力項目を含む一般的なモーダルでは、sm 480px幅またはmd 640px幅を見比べます。
3. 表や長文を含む場合は、lg 800px幅からxl 1024px幅の行を確認します。
4. 画面全体を覆う設計にする場合だけ、full 全画面の行を使います。

入力例・出力例

よくある利用シーン

• 削除確認、招待フォーム、詳細プレビューでモーダル幅の段階を決めたいとき。
• Dialog コンポーネントの max-width トークンを xs から xl まで整理したいとき。
• コンテンツ量に対して640pxで足りるか、800px以上が必要かを設計レビューで話したいとき。
• モバイルの全画面モーダルとデスクトップの中央ダイアログを仕様上で分けたいとき。

結果確認のポイント

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

注意点

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

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

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

よくある質問

関連ツール