Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1096" aria-label="HTMLコード例"><div class="tbx-1096__bar"><span class="tbx-1096__dots" aria-hidden="true">● ● ●</span><strong>index.html</strong><small>HTML</small></div><div class="tbx-1096__source" role="group" aria-label="コードの各行"><div class="tbx-1096__line" tabindex="0"><span>01</span><code><main></code></div><div class="tbx-1096__line" tabindex="0"><span>02</span><code> <h1>Hello</h1></code></div><div class="tbx-1096__line" tabindex="0"><span>03</span><code> <p>Welcome</p></code></div><div class="tbx-1096__line" tabindex="0"><span>04</span><code></main></code></div></div></div>
CSS
.tbx-1096{width:min(285px,100%);overflow:hidden;border-radius:9px;background:#192a36;color:#d6e2e5;border:1px solid #486373;font-family:system-ui,sans-serif;box-shadow:0 6px 16px #142b3a1b}
.tbx-1096__bar{height:44px;padding:0 12px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #375060;background:#213a4a}.tbx-1096__dots{font-size:10px;letter-spacing:2px;color:#e1a58a}.tbx-1096__bar strong{font-size:11px;font-weight:700}.tbx-1096__bar small{margin-left:auto;font-size:9px;color:#91acb6}
.tbx-1096__source{padding:10px 0 13px}.tbx-1096__line{display:flex;gap:12px;align-items:center;white-space:pre;min-height:28px;padding:5px 12px;position:relative;transition:background .2s,box-shadow .2s}
.tbx-1096__line:before{content:"";position:absolute;top:0;bottom:0;left:0;width:3px;background:#70ceb6;transform:scaleY(0);transition:transform .25s}
.tbx-1096__line>span{flex:0 0 21px;color:#668698;font:11px/1.4 ui-monospace,monospace}.tbx-1096__line code{font:11px/1.4 ui-monospace,monospace;color:#c9e3d1}
.tbx-1096__line:is(:hover,:focus-visible){background:#2f5361;box-shadow:inset 0 0 0 1px #3a6871}.tbx-1096__line:is(:hover,:focus-visible):before{transform:scaleY(1)}.tbx-1096__line:is(:hover,:focus-visible) code{color:#fff}
.tbx-1096__line:focus-visible{outline:2px solid #e6ac72;outline-offset:-2px}@media(prefers-reduced-motion:reduce){.tbx-1096 *,.tbx-1096__line:before{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Documentation / Tutorial
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では本来のリンク・操作を優先し、必要な情報は通常状態でも理解できるようにしてください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。