CSSのscroll-behaviorプロパティとは？使い方とスムーススクロールの実装例
CSSのscroll-behaviorプロパティは、ページ内リンクやアンカー移動時などにおけるスクロールの挙動（動作）を制御するために使用します。このプロパティを活用することで、JavaScriptに頼ることなく、CSSだけで滑らかなスムーススクロールを実現できます。
scroll-behaviorプロパティに指定できる値
scroll-behavior: auto | smooth | initial | inherit;
- auto：ブラウザのデフォルト動作。リンク先へ即座にジャンプします。
- smooth：滑らかなアニメーション付きでスクロールして移動します。
- initial：プロパティを初期値（auto）に戻します。
- inherit：親要素の値を継承します。
実装例
以下は、scroll-behaviorプロパティを使ってスムーススクロールを実装する具体的なコード例です。
<!DOCTYPE html>
<html>
<head>
<style>
html {
scroll-behavior: smooth;
}
#area1 {
height: 400px;
background-color: red;
}
#area2 {
height: 600px;
background-color: orange;
}
#area3 {
height: 550px;
background-color: magenta;
}
</style>
</head>
<body>
<h1>デモ見出し</h1>
<div class="main" id="area1">
<h2>セクション 1</h2>
<a href="#area2">セクション 2 へ移動</a>
</div>
<div class="main" id="area2">
<h2>セクション 2</h2>
<a href="#area3">セクション 3 へ移動</a>
</div>
<div class="main" id="area3">
<h2>セクション 3</h2>
<a href="#area1">セクション 1 へ移動</a>
</div>
</body>
</html>ポイントは、htmlセレクターに対してscroll-behavior: smooth;を指定している点です。これにより、ページ全体のアンカーリンク移動がすべてスムーススクロールになります。
実行結果
まず「セクション 2 へ移動」をクリックしてみましょう。
画面が即座に切り替わるのではなく、滑らかにアニメーションしながらセクション 2 までスクロールします。続けて「セクション 3 へ移動」をクリックすると、同様にセクション 3 までスムーズに移動します。
対応ブラウザについて
scroll-behaviorプロパティは、Chrome、Firefox、Edge、Safariなどの主要ブラウザでサポートされています。未対応の古いブラウザでは単に無視され、従来どおりの瞬間ジャンプスクロールが行われるため、レイアウトが崩れる心配はありません。
-
CSSのwhite-spaceプロパティとは？要素内の空白・改行の扱い方を徹底解説
CSSのwhite-spaceプロパティを使うと、HTML要素内の半角スペース、タブ、改行などの空白文字をどのように表示するかを細かく制御できます。デフォルトでは連続する空白は1つにまとめられますが、このプロパティを指定することで、ソースコード上の空白や改行をそのまま反映させたり、逆に折り返しを禁止したりすることが可能です。 white-spaceプロパティの基本例 以下は、normalとpreという2つの値を使って、空白の扱いの違いを比較するサンプルコードです。 <!DOCTYPE html> <html> <head> <style>
-
CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法
writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し