CSS Academy · レッスン

scroll-behavior：smooth

Q: 「scroll-behavior：smooth」で何を学びますか？

scroll-behaviorを使い、アンカーリンクやプログラムによるスクロールを滑らかにします。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

scroll-behaviorを使い、アンカーリンクやプログラムによるスクロールを滑らかにします。

レッスン 2/413 ステップ

「scroll-behavior：smooth」はCoddyKit上の無料CSS Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

scroll-behaviorとは

scroll-behaviorは、ナビゲーション（アンカーリンクやJavaScriptのscrollTo()）によって発生するスクロールを、スムーズにアニメーションさせるか、瞬時に移動させるかを制御します。

scroll-behavior: smooth

html要素またはbody要素にscroll-behavior: smoothを設定すると、ページ内のすべてのアンカーリンクによるナビゲーションがスムーズにアニメーションします。

  <p>Scrolling on this page is smooth thanks to <code>html { scroll-behavior: smooth; }</code>.</p>

瞬時の移動とスムーズなスクロール

値は次のとおりです。

auto（デフォルト）：瞬時に移動します
smooth：ターゲットまでアニメーションしながらスクロールします

アンカーリンクによるナビゲーション

スムーズなスクロールを有効にすると、<a href="#contact">のようなリンクをクリックしたとき、瞬時に移動する代わりにid="contact"を持つ要素まで滑らかにスクロールします。

  <nav>
    <a href="#about">About</a>
    <a href="#work">Work</a>
    <a href="#contact">Contact</a>
  </nav>
  <section id="about"><h3>About</h3></section>
  <section id="work"><h3>Work</h3></section>
  <section id="contact"><h3>Contact</h3></section>

JavaScriptのscrollTo()でスムーズにスクロールする

JavaScriptのスクロールメソッドにbehavior: "smooth"を渡すと、アニメーションしながらスクロールできます。

  <pre class="snippet">window.scrollTo({ top: 0, behavior: 'smooth' });

document.querySelector('#section').scrollIntoView({
  behavior: 'smooth',
  block: 'start'
});</pre>

prefers-reduced-motionとの連携

スムーズなスクロールは乗り物酔いに似た症状を引き起こすことがあります。動きを減らす設定を好むユーザーに対しては、必ず無効にしてください。

  <p>Respects <code>prefers-reduced-motion</code>.</p>

コンテナのscroll-behavior

ページだけでなく、スクロール可能な任意のコンテナにも適用できます。

  <div class="tabs-panel">
    <div class="tab">Tab 1</div><div class="tab">Tab 2</div><div class="tab">Tab 3</div>
  </div>

制限事項

CSSのscroll-behaviorでは、スクロールの継続時間やイージングを制御できません。アニメーションを細かく制御するには、JavaScriptのWeb Animations APIや、スクロール用プラグインを備えたGSAPなどのライブラリを使用してください。

固定ヘッダーのためのscroll-padding-top

固定ヘッダーがアンカーのターゲットに重なる場合、scroll-padding-topでオフセットを追加すると、ターゲットがヘッダーの背後に隠れなくなります。

  <p>Anchor targets offset by fixed header height.</p>

scroll-marginとscroll-paddingの違い

scroll-marginはターゲット要素に直接オフセットを追加し、scroll-paddingはスクロールコンテナにオフセットを追加します。どちらも固定ヘッダーの問題を解決できます。

  <div class="section">Section content</div>

アクセシビリティに関する注意

スムーズなスクロールはUXを向上させる機能です。スムーズなスクロールなしでもアンカーによるナビゲーションが動作することを必ず確認してください。スムーズなスクロールは機能そのものではなく、視覚的な仕上げとしてのみ利用してください。

確認問題

前庭性の動きに敏感なユーザーに対して、スムーズなスクロールアニメーションを無効にするにはどうすればよいですか。

対話的なレッスンで答える

まとめ

htmlにscroll-behavior: smoothを設定すると、アンカーリンクやJavaScriptのスクロールメソッドがスムーズにアニメーションします。固定ヘッダーの背後にスクロールターゲットが隠れないようにするには、scroll-padding-topを使用します。アクセシビリティのため、必ずprefers-reduced-motion: reduceメディアクエリ内でスムーズなスクロールを無効にしてください。

無料で開始

AI チューターと学ぶ CSS — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 40
レッスン: 159

無料で学習を始めるコース全体を表示

よくある質問

「scroll-behavior：smooth」レッスンは無料ですか？

はい。「scroll-behavior：smooth」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「scroll-behavior：smooth」で何を学びますか？

scroll-behaviorを使い、アンカーリンクやプログラムによるスクロールを滑らかにします。ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「scroll-behavior：smooth」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← CSS Academyに戻る