CSSボタンジェネレーター

生成コードに含まれるもの

HTMLは実際の<button type="button">要素を使い、表示ラベルをspan要素に入れます。CSSには次の6状態が含まれます。

• 通常: 操作していないときの表示
• ホバー: ポインティングデバイスでカーソルを重ねたとき
• キーボードフォーカス: :focus-visibleで表示
• 押下中: ボタンを押している間
• 無効: ネイティブのdisabled属性で表示
• 読み込み中: aria-busy="true"で表示

ボタンをいつ無効または処理中にするかは、利用するアプリ側で決めます。このジェネレーターが提供するのは表示ルールであり、アプリの状態やクリック処理は追加しません。

コントラスト表示は確認材料であり、適合証明ではありません

エディターは、基本色、グラデーション終点、ホバー色、押下中色のうち最も低い文字コントラストを計算します。通常サイズの文字の目安は4.5:1です。フォーカス枠と明るいプレビュー背景も比較し、文字以外の要素の目安として3:1を使います。

これらの数値はよくある問題の発見に役立ちますが、完成ページでは別の背景上にボタンを置く場合があります。実際のレイアウトでフォーカス枠と境界線のコントラストを再確認してください。無効な操作部品は透明度を下げて表示されるため、用途が明確でない場合は近くに理由を示す必要があります。

ターゲットサイズと動き

書き出すCSSは、インライン方向とブロック方向の最小サイズを44 pxにします。多くのタッチ操作で扱いやすい大きさであり、WCAG 2.2達成基準2.5.8の最小24 CSS pxより大きい値です。ただし、完成品ではレイアウト、周囲の間隔、例外条件、各プラットフォームの指針も考慮してください。

利用者が動きを減らす設定にしている場合、ホバーと押下時の移動は無効になります。処理中の表示は消さず、回転速度を落として状態が分かるようにします。

安全な出力範囲

表示ラベルは正規化され、最大120書記素クラスタに制限されます。不可視の方向制御文字を取り除き、スニペットとダウンロード内ではHTMLエスケープします。色は3桁、6桁、8桁の16進数を受け付け、# はあってもなくてもかまいません。それ以外の入力は拒否され、CSSに入ることはありません。数値は小数第1位まで保持し、各入力欄に示した範囲を外れた値は黙って変更せず、メッセージを表示して受け付けません。

ステップ間では、デザインを現在のタブのsessionStorageに保存します。ラベルやデザイン値をファネルURLや当社のサーバーへ送ることはありません。

読み込み中状態の使い方

アプリのコードから処理中属性を追加・削除します。

<button type="button" class="generated-button-1jpsu56" aria-busy="true" disabled>
  <span class="generated-button-1jpsu56__label">保存中</span>
</button>

aria-busyは更新処理中であることを伝えます。連続操作を防ぐ必要がある場合はdisabledも付けます。処理が終わったら両方の属性を外し、重要な成功・エラーメッセージは適切なステータス領域に表示してください。