scroll-behaviorとは？
scroll-behaviorは、ページ内や要素内のスクロール動作を滑らかに制御できるCSSプロパティです。特に、アンカーリンクをクリックした際、瞬時にスクロールする従来の動作を、スムーズに移動するようカスタマイズできます。このプロパティを利用することで、ユーザーエクスペリエンスの向上や、直感的なサイトナビゲーションが実現可能です。SEO効果を高めたい場合、scroll-behaviorを使用して、滑らかなページ移動を導入することでユーザーの滞在時間の増加が期待できます。
基本的な使い方
scroll-behaviorは、シンプルに使用できるCSSプロパティで、下記2つの値でスクロールの動作を制御できます。
auto（初期値）：従来の即時スクロール動作smooth：滑らかなスクロール動作を実現
実装例
以下の例では、ページ内で特定のセクションに滑らかにスクロールするよう設定しています。ナビゲーションメニューから各セクションへのリンク（例: href=”#section1″) をクリックすると、指定されたセクションへスムーズに移動します。このようにscroll-behaviorを活用することで、ユーザーに快適な操作性を提供し、サイトのユーザビリティを向上させることができます。これにより、ページ滞在時間の増加や直帰率の改善など、SEOの効果も期待できます。
※scroll-behaviorの使用例の紹介のため最低限のCSSで実装しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scroll-behavior</title>
<style>
html {
scroll-behavior: smooth;
}
section {
height: 1000px;
background-color: black;
color: white;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</nav>
<section id="section1">Section 1 content</section>
<section id="section2">Section 2 content</section>
<section id="section3">Section 3 content</section>
</body>
</html>メリットと注意点
メリット
ユーザー体験の向上
scroll-behaviorを使うことで、アンカーリンクや「TOPに戻る」ボタンなどでページ内のコンテンツを滑らかにスクロールでき、ユーザーに心地よい操作体験を提供します。このスムーズな動作により、サイトのユーザビリティが向上し、滞在時間の増加や直帰率の低下など、SEO効果あります。
実装が簡単
数行のCSSコードを記述するだけで、スムーズなスクロールが実現できるため、複雑なJavaScriptを使う必要がないので開発効率を高められる。
ブラウザサポート
scroll-behaviorは、Chrome、Firefox、Edge、Safariなど、主要な最新ブラウザでサポートされているため、安心して導入可能です。
注意点
scroll-behaviorは便利なプロパティですが、古いバージョンのブラウザ（特にInternet Explorerなど）ではサポートされていないため、互換性を考慮する必要があります。
まとめ
scroll-behaviorは、Webサイトに滑らかなスクロール機能を簡単に追加できる便利なCSSプロパティです。数行のコードで導入可能で、JavaScriptを使用する必要がありません。そのため、手軽にユーザビリティを向上させられ、SEO効果も期待できます。ただし、古いブラウザへの対応が必要な場合は、JavaScriptを使用する必要があります。
参考文献
scroll-behavior – CSS: カスケーディングスタイルシート | MDN
HTML5&CSS3デザイン 現場の新標準ガイド【第2版】
