Live Demo
日付へのホバーとクリック・キーボード選択を確認できます。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<fieldset class="tbx-1068"><legend>ご相談の日程を選ぶ</legend><div class="tbx-1068__week"><span>月</span><span>火</span><span>水</span><span>木</span><span>金</span></div>
<div class="tbx-1068__days"><label><input name="tbx-1068-day" type="radio" checked value="19"><span>19<small>空きあり</small></span></label><label><input name="tbx-1068-day" type="radio" value="20"><span>20<small>空きあり</small></span></label><span class="tbx-1068__unavailable" aria-label="21日満席">21<small>満席</small></span><label><input name="tbx-1068-day" type="radio" value="22"><span>22<small>空きあり</small></span></label><label><input name="tbx-1068-day" type="radio" value="23"><span>23<small>空きあり</small></span></label></div><p>日程選択UIのデモ</p></fieldset>
CSS
.tbx-1068{width:min(306px,100%);margin:0;min-width:0;padding:12px 13px 10px;border:1px solid #dce5e5;border-radius:10px;background:#fff;font:11px/1.35 system-ui,sans-serif;color:#344f60}.tbx-1068 legend{font-size:11px;font-weight:850;padding:0 5px}.tbx-1068__week,.tbx-1068__days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;text-align:center}.tbx-1068__week{color:#899ca7;font-size:10px;margin:3px 0 7px}
.tbx-1068__days label{position:relative;cursor:pointer}.tbx-1068__days input{position:absolute;opacity:0;width:1px;height:1px}.tbx-1068__days label>span,.tbx-1068__unavailable{min-width:0;min-height:65px;display:grid;align-content:center;gap:8px;border:1px solid #d9e4e6;border-radius:7px;background:#f9fbfc;font-size:13px;font-weight:850;transition:border-color .25s,transform .25s,background .25s}.tbx-1068__days small{font-size:8px;font-weight:500;white-space:nowrap}.tbx-1068__days label:hover>span{transform:translateY(-3px);background:#e5f3f1;border-color:#69aba2}.tbx-1068__days input:checked+span{background:#ddeeea;border-color:#327e79;box-shadow:inset 0 0 0 1px #327e79}.tbx-1068__days input:focus-visible+span{outline:3px solid #d4a26c;outline-offset:2px}.tbx-1068__unavailable{background:#f2f3f4;color:#a8b2b7;border-color:#ebeef0}.tbx-1068 p{font-size:9px;color:#8196a0;text-align:center;margin:11px 0 0}
@media(prefers-reduced-motion:reduce){.tbx-1068__days label>span{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Events / Booking
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末向けにフォーカス・選択・開閉の操作を用意。ホバー専用の追加説明は常時読めるよう配慮します。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。CSS :has()を使用する素材では対応ブラウザを確認してください。
Reduced Motion：prefers-reduced-motion: reduce に対応。