この記事はCSSを学習し、更に学習を重ねたいWebデザイナーやコーダー、エンジニアに向けた記事になります。
今まではJavaScriptで頑張って表現していたようなUIなどがCSSだけで実装可能になってきました。
その中の一つとして「スムーススクロール（ページ内リンクまでスムーズにスクロールしていく表現）」があります。
以下、茶番も兼ねていますが御覧ください。
CSSを書けるようになりたて猫とCSS極めたい猫
ほて…、ほて……、ほてぇ……。よくわからないニャ～。
ほてちゃん、どうしたミャ？
ほて、JavaScript良く分からないニャ。スムーススクロールを実装してって言われたんだけど、JavaScriptだったりjQueryとか色々あって、なにをどうすればいいのか分からないニャ…。
なるほど、じゃあCSSだけで実装できるこれでいいんじゃないかミャ？
/** スムーススクロールをCSSだけで実装ミャ **/
html {
scroll-behavior: smooth;
}
/** スクロールしたあとに上部に余白を作ると追随してくる要素を被らないミャ **/
:target {
scroll-margin-top: 100px;
}ほてええぇぇぇええ？！これだけでいいのかニャ！！！
本当にこれだけミャ。「:target」の指定や解説はここでは詳しくしないけど、一緒に設定しておくと便利ミャ。
便利だニャ！！！
でも、ちょっと疑問ニャ。スクロールの速度とかはどうなるニャ？細かく指定とかできないのかニャ～？
そこに関しては残念ながら指定できないミャ。
各種ブラウザに依存する形になるから、早すぎるとか遅すぎる、という細かい要望までは答えられないのが弱点ではあるミャ。
それと、既にJavaScriptで実装していたりすると挙動の保証ができなかったり、CSSを読み込んでいる全体に影響を及ぼすから特定の箇所だけスムーススクロールにしたい、なんてことはできないミャ～。
なるほどニャ？ということは時間もかけたくないし、全体的にこれでいいじゃない、という場合だけで使うって理解でいいのかにゃ？
そうだミャ。細かい値まで設定できたほうがいいというのは製作者側、提供者側の都合だからブラウザ依存でも十分という理解を持ってもらうことができればこれで十分だミャ。
本来であれば利用者がブラウザのカスタマイズでできればいいと思うミャ～。
とはいえ、いまではほとんどのブラウザで実装されているミャ。
不安要素としてはiOSでは15.3までが非対応だミャ。アップグレードをしたくない、という方には申し訳ないけど諦めてもらうという話を通しておくのが無難ミャ。
まとめ：低コストでスムーススクロールを実装したい方
兼ねてよりスムーススクロールはブラウザ側で実装してくれよと思っていましたがCSSで設定できるようになっています。
個人的には必須の機能というわけでもないとも思っていますが、ページ内リンクの場合は分かりやすくなるインタラクションではあるので「あれば良い」程度なのかなと思っています。
