Tailwind CSS 練習問題 54：スクロール挙動
Tailwind CSSにおいて、ページ内リンクをクリックした際、対象の要素まで一瞬でジャンプするのではなく、滑らかにスクロール移動させたい場合、HTMLタグに設定する正しいものはどれか。
- ページ内リンクへの移動を滑らかにするためのクラスは「scroll-smooth」である。
- ページ内リンクへの移動を滑らかにするためのクラスは「smooth-behavior」である。
- ページ内リンクへの移動を滑らかにするためのクラスは「scroll-animate」である。
- ページ内リンクへの移動を滑らかにするためのクラスは「smooth-scrolling」である。
- ページ内リンクへの移動を滑らかにするためのクラスは「animate-scroll」である。
正解と解説を見る
正解：ページ内リンクへの移動を滑らかにするためのクラスは「scroll-smooth」である。
ページ内リンクをクリックした際に滑らかに移動させるには「scroll-smooth」を使用するのが正解です。
【正解の理由】
「scroll-smooth」を指定すると、CSSの「scroll-behavior: smooth;」が適用され、リンク先へジャンプする際のアニメーションが滑らかになります。一般的には<html>要素に付与してページ全体に適用します。
【不正解の理由】
• 「smooth-behavior」はTailwind CSSに存在しないクラス名であるため誤り
• 「scroll-animate」はTailwind CSSに存在しないクラス名であるため誤り
• 「smooth-scrolling」はTailwind CSSに存在しないクラス名であるため誤り
• 「animate-scroll」はTailwind CSSに存在しないクラス名であるため誤り