Recipe Step Clip — 最初の手順

Source Code

必要なコードをコピーして実装に利用できます。

<button aria-label="レシピの最初の手順、ページの先頭へ戻る" class="btt-control btt-2088 btt-hidden" data-btt="" type="button"><span aria-hidden="true" class="clip-metal"></span><span class="clip-tag">RECIPE INDEX</span><span class="clip-number">01</span><span class="clip-label">最初の手順へ</span><span class="clip-state" data-state="">いま STEP 02</span></button>

 .btt-control{box-sizing:border-box;appearance:none;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}.btt-control:focus-visible{outline:3px solid #e6a643;outline-offset:5px}.btt-hidden{opacity:0;visibility:hidden;pointer-events:none}.btt-visible{opacity:1;visibility:visible;pointer-events:auto} @media(prefers-reduced-motion:reduce){.btt-control,.btt-control *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
 .btt-2088{position:fixed;right:clamp(15px,3vw,44px);bottom:26px;z-index:40;width:149px;height:172px;padding:21px 14px 12px;border-radius:7px;border:1px solid #d3c5a9;background:#fff9e8;color:#4f4b36;box-shadow:0 15px 35px #42352e40;display:flex;flex-direction:column;align-items:center;gap:4px;opacity:0;transform:translateY(20px) rotate(2deg);transition:opacity .3s,transform .36s,box-shadow .3s,visibility .3s}.btt-2088.btt-visible{opacity:1;transform:rotate(2deg)}.clip-metal{position:absolute;top:-11px;left:50%;transform:translateX(-50%);height:30px;width:35px;border:5px solid #8d938b;border-bottom-width:4px;border-radius:15px 15px 6px 6px;box-shadow:0 3px 5px #0002}.clip-metal:after{content:'';position:absolute;left:10px;top:4px;width:5px;height:13px;background:#e0e6db;border-radius:5px;animation:clipGlimmer 4s ease-in-out infinite}.clip-tag{font:800 9px/1 Arial;letter-spacing:.13em;margin-top:8px;color:#7b8e71}.clip-number{font:400 50px/1 Georgia,serif;color:#4a654a}.clip-label{font:700 13px/1.35 'Noto Sans CJK JP',sans-serif;white-space:nowrap}.clip-state{font:600 9px/1.4 Arial;letter-spacing:.08em;margin-top:auto;color:#877f6d}.btt-2088:hover{transform:rotate(0) translateY(-8px);box-shadow:0 22px 45px #42352e48}.btt-2088.is-going .clip-number{color:#c68041}@keyframes clipGlimmer{0%,85%,100%{opacity:.4}91%{opacity:1}}@media(max-width:600px){.btt-2088{right:14px;bottom:19px;width:132px;height:152px;padding:18px 8px 9px}.clip-number{font-size:43px}.clip-label{font-size:12px}}
/* Field QA / positioning and responsive readability */
@media(max-width:600px){.btt-2088{width:119px;height:121px;padding:16px 7px 6px;gap:3px}.clip-tag{font-size:7.5px;margin-top:4px}.clip-number{font-size:35px}.clip-label{font-size:11px}.clip-state{font-size:8px}.clip-metal{height:25px;width:32px}}

(()=>{'use strict';const el=document.querySelector('[data-btt]');if(!el)return;const footerOnly=false;const reduce=window.matchMedia('(prefers-reduced-motion: reduce)');let raf=0;function update(){raf=0;const p=Math.max(0,Math.min(1,window.scrollY/Math.max(1,document.documentElement.scrollHeight-window.innerHeight)));if(!footerOnly){const shown=window.scrollY>170;el.classList.toggle('btt-visible',shown);el.classList.toggle('btt-hidden',!shown);el.tabIndex=shown?0:-1;el.setAttribute('aria-hidden',String(!shown));}el.style.setProperty('--progress',p.toFixed(3));const field=el.querySelector('[data-state]');if(field)field.textContent='いま STEP '+String(Math.max(2,Math.min(5,Math.floor(p*5)+1))).padStart(2,'0');}function onScroll(){if(!raf)raf=requestAnimationFrame(update)}window.addEventListener('scroll',onScroll,{passive:true});window.addEventListener('resize',onScroll,{passive:true});el.addEventListener('click',()=>{el.classList.add('is-going');window.scrollTo({top:0,behavior:reduce.matches?'auto':'smooth'});window.setTimeout(()=>el.classList.remove('is-going'),650)});update()})();

How to Use

HTMLのボタンをbody末尾付近へ設置し、CSSを読み込んでください。JavaScriptもdeferで読み込みます。実ページでスクロール後の表示・先頭復帰・スマートフォンでの位置を確認してください。

Use Case

料理・レシピ解説

Technical Notes

ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。

Mobile：タップ位置・余白・文字の収まりに注意。

Browser：Chrome/Edge/Firefox/Safariの現行バージョンを想定。

Reduced Motion：動きを抑制するOS設定にも配慮しています。