スクロールで縮む拡張FAB
ラベル付きの「＋ 新規作成」ボタンが、一覧をスクロールしている間はアイコンだけに縮んで本文を隠さず、指が止まると再びラベル付きに戻る。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
デザインの要点
- 初見ではラベル付きで「何が作れるか」を示し、読んでいる最中はアイコンだけに退く。主役（本文）を隠さない
- 縮むのはスクロール中だけ。止まって 150ms ほどで戻すと、指を離した瞬間に押せる状態になる
- ラベルは width を 0 にせず grid-template-columns 0fr で畳む。文字が潰れずに滑らかに消える
- FAB は一覧の最下行と重なるので、リストの末尾に FAB の高さぶん余白を足す
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<div class="efs-phone">
<header class="efs-head">
<h2 class="efs-title">メモ</h2>
<span class="efs-meta">24 件</span>
</header>
<div class="efs-scroll" id="efs-scroll" tabindex="0" aria-label="メモ一覧（スクロール）">
<ul class="efs-list" id="efs-list"></ul>
</div>
<button class="efs-fab" id="efs-fab" type="button" aria-label="新規作成">
<span class="efs-fab-icon" aria-hidden="true"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span>
<span class="efs-fab-label"><span class="efs-fab-text">新規作成</span></span>
</button>
</div>