ボタンサイズ

このツールでできること

• ボタンサイズでは、xsからxlまで、ボタンの高さ24〜56pxと左右padding 12〜24pxの組み合わせを固定表で確認できます。
• 関連する観点として ボタンサイズ、button sizes、CSS を確認し、結果をコピーして別の作業に使えます。

使い方

1. 密度の高いツールバーでは、xsまたはsmの高さとpaddingを確認します。
2. 通常のフォーム送信や主要操作には、md 40px高 / 16px padding の行を基準にします。
3. 目立たせたいCTAやモバイルの押しやすさを優先する場面では、lgまたはxlの行を見ます。
4. アイコンだけのボタンは、見た目の高さとは別にタッチターゲットサイズ表も確認します。

入力例・出力例

よくある利用シーン

• フォーム、ダイアログ、一覧行でボタン高さを入力欄と揃えたいとき。
• Button コンポーネントの size prop に対応するトークン値を決めたいとき。
• 密な管理画面と余白のあるモバイル画面で、同じラベルの押しやすさを比較したいとき。
• 左右paddingの段階を高さと一緒にドキュメント化したいとき。

結果確認のポイント

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

注意点

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

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

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

よくある質問

関連ツール