Noren Return — お店の入口へ

Source Code

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

<div class="n-noren-anchor"><button class="btt-control btt-noren" data-btt type="button" aria-label="ページの先頭・お店の入口へ戻る"><span class="n-fabric n-left">入<span>り</span>口</span><span class="n-fabric n-middle"><span class="n-mini-crest">◌</span><b>はじめに<br>戻る</b></span><span class="n-fabric n-right">PAGE<br>TOP</span><span class="n-noren-bottom">お店の入口へもどる <i>↗</i></span></button>
</div>

/* Isolated button CSS, extracted from approved original demo */
.btt-control,.btt-control *, .btt-control *::before,.btt-control *::after{box-sizing:border-box}.btt-control{font-family:Arial,"Noto Sans CJK JP","Yu Gothic",sans-serif}
.btt-control:focus-visible{outline:3px solid #f0ad4d;outline-offset:5px}
.n-footer-inner{max-width:1200px;margin:auto;min-height:500px;display:grid;grid-template-columns:1.1fr .6fr .8fr;gap:5%;align-items:center;padding:80px 36px}
.n-noren-anchor{width:100%;max-width:250px;margin:auto;display:flex;flex-direction:column;align-items:center}
.n-beam{width:100%;height:12px;border-radius:8px;background:linear-gradient(#bd9870,#6a503d);box-shadow:0 6px 16px #0d1d192b;position:relative}
.n-beam:before,.n-beam:after{content:"";position:absolute;width:19px;height:21px;background:#b5926b;top:-5px;border-radius:6px}
.n-beam:before{left:7px}
.n-beam:after{right:7px}
.btt-noren{position:relative;z-index:3;display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px;width:96%;min-height:218px;margin:0;cursor:pointer;border:0;padding:0 0 20px;background:none;color:#f6efe2;outline-offset:6px}
.n-fabric{min-height:187px;padding-top:27px;background:#36534e;box-shadow:inset 8px 0 12px #152d2530,inset -7px 0 8px #152d2530;border-bottom:8px solid #2a403b;display:flex;justify-content:center;align-items:center;flex-direction:column;writing-mode:vertical-rl;letter-spacing:.18em;font:600 19px/1.3 "Noto Serif CJK JP",serif;animation:n-flutter 4s ease-in-out infinite;transform-origin:top center}
.n-left{animation-delay:-.5s}
.n-middle{animation-delay:-1.5s;letter-spacing:.08em}
.n-right{animation-delay:-2.5s;font:700 11px/1.3 Georgia;letter-spacing:.12em}
.n-left span{font-size:15px}
.n-mini-crest{font-size:22px;line-height:1;margin-bottom:12px}
.n-middle b{font:600 18px/1.45 "Noto Serif CJK JP",serif}
.n-noren-bottom{position:absolute;bottom:-13px;width:100%;font:600 11px "Noto Serif CJK JP",serif;letter-spacing:.04em;color:#e0c9a6}
.n-noren-bottom i{font-style:normal;margin-left:5px;color:#f0d6a3}
.btt-noren:hover .n-fabric{background:#486962;transform:skewX(-4deg) translateY(-9px)}
.btt-noren.is-going .n-fabric{animation:n-open .6s ease-in-out both}
@keyframes n-flutter{0%,100%{transform:skewX(0)}50%{transform:skewX(2.1deg)}}
@keyframes n-open{to{transform:translateY(-30px) rotateY(35deg);opacity:.68}}
@media (max-width:950px){.n-footer-inner{grid-template-columns:1fr 1fr}
.n-noren-anchor{grid-column:1/-1;margin-top:15px}}
@media (max-width:560px){.n-footer-inner{display:grid;grid-template-columns:1fr;padding:65px 28px}
.n-noren-anchor{grid-column:1;margin-top:28px}}
.n-fabric{writing-mode:horizontal-tb;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:18px 3px;letter-spacing:.1em;text-align:center;gap:8px}
.n-left b{font:600 22px/1.65 "Noto Serif CJK JP",serif}
.n-right b{font:600 10px/1.5 Georgia,serif;letter-spacing:.1em}
.n-middle b{font-size:16px}
.n-mini-crest{margin-bottom:0}
.n-noren-anchor{box-sizing:border-box;max-width:270px;padding-bottom:4px}
.btt-noren{box-sizing:border-box;width:100%;grid-template-columns:repeat(3,minmax(0,1fr));min-height:236px;padding-bottom:36px;overflow:visible}
.n-fabric{box-sizing:border-box;min-width:0;min-height:190px;gap:7px;padding:17px 2px 12px}
.n-left b{font-size:22px;line-height:1.55}
.n-middle b{font-size:16px;line-height:1.55;white-space:nowrap}
.n-right b{font-size:11px;line-height:1.5;white-space:nowrap}
.n-noren-bottom{position:absolute;bottom:7px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:6px;width:auto;line-height:1.5;font-size:12px;white-space:normal}
.n-noren-bottom i{margin:0;flex:none}
@media (max-width:560px){.n-footer-inner{gap:25px}
.n-noren-anchor{width:min(100%,260px);margin-inline:auto}
.btt-noren{min-height:224px;padding-bottom:34px}
.n-fabric{min-height:181px}
.n-left b{font-size:21px}
.n-middle b{font-size:15px}
.n-right b{font-size:10px}
.n-noren-bottom{font-size:11px}}
.btt-noren{width:calc(100% - 12px);margin-inline:auto}
.n-fabric{transform-origin:top center}
@media (max-width:560px){.btt-noren{width:calc(100% - 12px)}}
.btt-noren{padding-left:8px;padding-right:8px}

(()=>{'use strict';const el=document.querySelector('[data-btt]');if(!el)return;const reduce=matchMedia('(prefers-reduced-motion: reduce)');el.addEventListener('click',()=>{el.classList.add('is-going');if(reduce.matches){scrollTo({top:0,behavior:'instant'});el.classList.remove('is-going');return}setTimeout(()=>window.scrollTo({top:0,behavior:'smooth'}),340);setTimeout(()=>el.classList.remove('is-going'),1100)});})();

How to Use

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

Use Case

のれんとフッター

Technical Notes

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

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

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

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