ソーシャル・コミュニケーション
ストーリーズ
Instagram風のストーリーのリング一覧。タップで全画面ビューが開き、上部の分割プログレスバーが自動で進む。画面の右をタップで次、左で前、×で閉じられる。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
プレビューは枠内に収めるため、全画面ビューを position:absolute（ステージ基準）で実装しています。実際のページで画面全体に重ねるときは position:fixed に変え、body 直下など高い階層へ置いてください。各セグメントは SEG_MS ごとに自動で進み、上部バーは width の transition で進捗を表現します（reduced-motion 時は即時に満ちます）。左右のタップ領域は透明ボタンで、右=次・左=前に対応します。
コード（コピーして使えます）
<div class="st-stage" id="stStage">
<div class="st-row" id="stRow"></div>
<div class="st-viewer" id="stViewer" role="dialog" aria-modal="true" aria-label="ストーリー" aria-hidden="true">
<div class="st-bars" id="stBars"></div>
<div class="st-top">
<span class="st-av sm" id="stTopAv"></span>
<span class="st-topnm" id="stTopNm"></span>
<button class="st-close" id="stClose" type="button" aria-label="閉じる">
<svg width="16" height="16" viewBox="0 0 16 16"><line x1="3" y1="3" x2="13" y2="13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="13" y1="3" x2="3" y2="13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
</button>
</div>
<div class="st-content" id="stContent"><span class="st-cap" id="stCap"></span></div>
<button class="st-nav st-prev" id="stPrev" type="button" aria-label="前へ"></button>
<button class="st-nav st-next" id="stNext" type="button" aria-label="次へ"></button>
</div>
</div>