Live Demo
各エリアにホバーし、クリック・Tabと矢印キーでエリアを選択できます。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<fieldset class="tbx-1065"><legend>訪問対応エリア</legend>
<div class="tbx-1065__grid"><label><input type="radio" name="tbx-1065-area" value="north" checked><span>北エリア<small>月・水</small></span></label><label><input type="radio" name="tbx-1065-area" value="east"><span>東エリア<small>火・木</small></span></label><label><input type="radio" name="tbx-1065-area" value="west"><span>西エリア<small>金</small></span></label><label><input type="radio" name="tbx-1065-area" value="south"><span>南エリア<small>土</small></span></label></div>
<p class="tbx-1065__message">選択した地域が強調されます。</p></fieldset>
CSS
.tbx-1065{width:min(292px,100%);min-width:0;margin:0;padding:14px;background:#fff;border:1px solid #d8e5e7;border-radius:10px;color:#2a5361;font:11px/1.3 system-ui,sans-serif}.tbx-1065 legend{float:none;padding:0 4px;font-size:12px;font-weight:800}.tbx-1065__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.tbx-1065 label{position:relative;cursor:pointer;min-width:0}.tbx-1065 input{position:absolute;width:1px;height:1px;opacity:0;left:50%;top:50%}.tbx-1065 label span{display:grid;text-align:center;gap:6px;padding:14px 5px;border:1px solid #d7e3e3;background:#f4f8f8;border-radius:7px;transition:transform .23s,border-color .23s,box-shadow .23s,background .23s;font-weight:750}.tbx-1065 label small{color:#7c919b;font-size:9px;font-weight:500}.tbx-1065 label:hover span{transform:translateY(-3px);border-color:#6baba5}.tbx-1065 input:checked+span{border-color:#327f79;background:#e3f1ed;box-shadow:inset 0 0 0 1px #327f79}.tbx-1065 input:focus-visible+span{outline:3px solid #d2a16e;outline-offset:2px}.tbx-1065__message{font-size:9px;color:#8197a0;text-align:center;margin:11px 0 0}
@media(prefers-reduced-motion:reduce){.tbx-1065 label span{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Local Business / Services
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末向けにフォーカス・選択・開閉の操作を用意。ホバー専用の追加説明は常時読めるよう配慮します。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。CSS :has()を使用する素材では対応ブラウザを確認してください。
Reduced Motion：prefers-reduced-motion: reduce に対応。