ボタンのCSS下ごしらえ
配色・余白・角丸を調整し、ボタン用のHTMLとCSSを出力します。
使い方
- ラベルと色を選び、余白・角丸を調整します。配色の読みやすさは別途確認します。
- 出力のbuttonタグだけをHTMLの表示位置へ貼ります。後半の.rk-buttonから始まるCSSはスタイルシートへ貼ります。
- クリック時の処理を実装し、キーボードのTabキーでフォーカス枠が見えることを確認します。
このツールが向いている作業
ラベル・配色・角丸・左右余白を変えて、Webページ用のボタンの土台を作ります。結果にはHTML要素とCSSルールが含まれ、見た目を決めたあとでクリック時の処理を追加できます。
入力と設定
結果
入力例と実際の出力
- ボタンの文字: Continue
- 背景色: #236b65
- 文字色: #ffffff
- 角丸（px）: 8
- 左右の余白（px）: 24
出力例:
<button type="button" class="rk-button">Continue</button>
.rk-button {
background: #236b65;
color: #ffffff;
border: 1px solid currentColor;
border-radius: 8px;
padding: 12px 24px;
min-height: 44px;
max-width: 100%;
overflow-wrap: anywhere;
font: inherit;
cursor: pointer;
}
.rk-button:focus-visible { outline: 3px solid #236b65; outline-offset: 3px; }出力の空行より前がHTML、後がCSSです。全体をそのままHTML本文へ貼ると、CSSが文字として表示されます。type="button"なのでフォームを自動送信せず、生成した見本には送信や画面遷移の機能はありません。
仕様と注意点
ネイティブのbutton要素とフォーカス枠を含みます。クリック時の処理は実装先で追加してください。
次の作業・使い分け
影のCSS組み立て — ボタンや周囲のカードに付ける影を別に調整できます。
よくある質問
文字を入力したらHTMLが壊れますか？
ラベルに含まれるHTML記号はエスケープします。タグとして実行せず、文字として出力します。
ボタンの配色は自動で合格判定されますか？
判定しません。文字と背景のコントラスト、および表示先の背景とフォーカス枠の区別を確認してください。
出力したボタンは送信や画面移動も行いますか？
出力はHTMLとCSSの見本です。type=buttonのため自動送信は行わず、送信・画面移動などの処理は使用先で実装します。
関連ツール
ツールを紹介
ツール名と公開URLだけを共有します。入力した内容や処理結果は含まれません。