Live Demo
ホバーまたはTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1059" aria-label="所在地の説明用イラスト地図"><svg viewBox="0 0 300 170" aria-hidden="true"><rect width="300" height="170" rx="8" fill="#e7ece7"/><path d="M-10 47H310M-10 122H310M72 -10V180M188 -10V180" stroke="#fff" stroke-width="15"/><path d="M-10 47H310M-10 122H310M72 -10V180M188 -10V180" stroke="#c1d3d0" stroke-width="1.5"/><path d="M218 72h63v34h-63zM15 65h41v40H15zM99 12h63v38H99z" fill="#c7dbc8"/><rect x="99" y="131" width="66" height="29" rx="3" fill="#d2d8ba"/></svg><button type="button" class="tbx-1059__pin" aria-describedby="tbx-1059-info" aria-label="サンプルオフィス"><span aria-hidden="true">●</span></button><div id="tbx-1059-info" class="tbx-1059__bubble"><b>サンプルオフィス</b><small>平日 10:00–18:00</small></div></div>
CSS
.tbx-1059{position:relative;width:min(285px,100%);border:1px solid #d2dfdd;overflow:hidden;border-radius:9px;box-shadow:0 5px 16px #2c505819}.tbx-1059 svg{width:100%;height:auto;display:block}.tbx-1059__pin{position:absolute;left:53%;top:43%;border:4px solid white;width:27px;height:27px;padding:0;border-radius:50%;background:#bd694d;color:#fff;box-shadow:0 4px 11px #2746584f;display:grid;place-items:center;cursor:help;transition:transform .24s,box-shadow .24s}.tbx-1059__pin span{font-size:0}.tbx-1059__pin:after{content:"";position:absolute;width:10px;height:10px;inset:auto auto -8px 5px;background:#bd694d;transform:rotate(45deg);z-index:-1}
.tbx-1059__bubble{position:absolute;left:53%;top:38%;transform:translate(-50%,calc(-100% + 10px));min-width:151px;padding:10px 12px;border-radius:7px;background:#284d5f;color:#fff;font:11px/1.5 system-ui;box-shadow:0 7px 15px #15364a34;opacity:0;visibility:hidden;pointer-events:none;display:grid;gap:3px;transition:opacity .22s,transform .22s,visibility .22s}.tbx-1059__bubble small{color:#d6e9ef;font-size:9px}.tbx-1059:has(.tbx-1059__pin:is(:hover,:focus-visible)) .tbx-1059__bubble{opacity:1;visibility:visible;transform:translate(-50%,-100%)}.tbx-1059__pin:is(:hover,:focus-visible){transform:scale(1.19);box-shadow:0 0 0 8px #e0b2a655,0 4px 11px #2746584f}.tbx-1059__pin:focus-visible{outline:3px solid #f2c581;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.tbx-1059__pin,.tbx-1059__bubble{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Access / Location
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：ホバーのない端末ではタップ・選択による操作が可能な部分を設けています。
Browser：最新のChrome・Firefox・Safari・Edgeでの利用を想定。:has()を使う素材は対応ブラウザが必要です。
Reduced Motion：prefers-reduced-motion: reduce に対応。