Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1235"><a class="invite" href="#tb1235"><span class="date"><strong>18</strong><small>OCT<br>2026</small></span><span class="copy"><small>UPCOMING EVENT</small><b>Creative briefing</b><em>開場 13:30 / 入場無料</em></span><span class="fold" aria-hidden="true"></span><span class="venue">PLACE<br><b>Studio A · 2F</b></span></a></div>CSS
.tbx-1235{box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:212px;width:100%;max-width:100%;padding:19px;overflow:hidden;font-family:system-ui,-apple-system,sans-serif;color:#18314a;}
.tbx-1235 * ,.tbx-1235 *::before,.tbx-1235 *::after{box-sizing:border-box}
.tbx-1235{background:#efece4}.tbx-1235 .invite{position:relative;display:flex;align-items:center;gap:15px;text-decoration:none;color:#2c4050;width:min(100%,315px);height:132px;background:#fff8ed;padding:17px;overflow:hidden;box-shadow:0 10px 24px #523f2c20;border:1px solid #e1d2bc}.tbx-1235 .date{align-self:stretch;display:grid;align-content:center;justify-items:center;min-width:84px;border-right:1px solid #d1c0a7;padding-right:13px}.tbx-1235 .date strong{font:800 44px Georgia,serif;color:#c66a4b;line-height:.95}.tbx-1235 .date small{font-size:10px;line-height:1.3;letter-spacing:.13em;color:#836b54}.tbx-1235 .copy{display:grid;gap:8px}.tbx-1235 .copy small{font-size:9px;letter-spacing:.13em;font-weight:800;color:#ad734b}.tbx-1235 .copy b{font-size:15px}.tbx-1235 .copy em{font-style:normal;font-size:10px;color:#8d7765}.tbx-1235 .fold{position:absolute;right:0;top:0;width:70px;height:70px;background:linear-gradient(225deg,#e1bb81 50%,transparent 51%);clip-path:polygon(100% 0,100% 100%,0 0);transform:translate(50%,-50%);transition:transform .4s}.tbx-1235 .venue{position:absolute;right:10px;top:14px;font:800 9px system-ui;letter-spacing:.1em;line-height:1.8;color:#865031;opacity:0;transform:translateY(-10px);transition:all .4s;text-align:right}.tbx-1235 .venue b{font-size:11px}.tbx-1235 .invite:is(:hover,:focus-visible) .fold{transform:translate(0,0)}.tbx-1235 .invite:is(:hover,:focus-visible) .venue{opacity:1;transform:translateY(0)}.tbx-1235 .invite:focus-visible{outline:3px solid #9a572c;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.tbx-1235 *, .tbx-1235 *::before,.tbx-1235 *::after{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Event, Corporate
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーできないことがあります。必要な情報・操作はホバー以外でも利用できるようにしてください。
Browser：最新版Chrome・Safari・Firefox・Edgeをご使用ください。
Reduced Motion：prefers-reduced-motion: reduce対応。