中の人「ma-san」

東京・千葉でホームページを作るお仕事をしています。

お仕事の詳細はこちら

CSS極めたい猫「CSSだけでスムーススクロールを実装」ってどういうこと?

CSS極めたい猫「CSSだけでスムーススクロールを実装」ってどういうこと? CSS

この記事はCSSを学習し、更に学習を重ねたいWebデザイナーやコーダー、エンジニアに向けた記事になります。

今まではJavaScriptで頑張って表現していたようなUIなどがCSSだけで実装可能になってきました。
その中の一つとして「スムーススクロール(ページ内リンクまでスムーズにスクロールしていく表現)」があります。
以下、茶番も兼ねていますが御覧ください。

CSSを書けるようになりたて猫とCSS極めたい猫

ほてまる
ほてまる

ほて…、ほて……、ほてぇ……。よくわからないニャ~。

るり
るり

ほてちゃん、どうしたミャ?

ほてまる
ほてまる

ほて、JavaScript良く分からないニャ。スムーススクロールを実装してって言われたんだけど、JavaScriptだったりjQueryとか色々あって、なにをどうすればいいのか分からないニャ…。

るり
るり

なるほど、じゃあCSSだけで実装できるこれでいいんじゃないかミャ?

/** スムーススクロールをCSSだけで実装ミャ **/
html {
  scroll-behavior: smooth;
}
/** スクロールしたあとに上部に余白を作ると追随してくる要素を被らないミャ **/
:target {  
  scroll-margin-top: 100px;  
}
ほてまる
ほてまる

ほてええぇぇぇええ?!これだけでいいのかニャ!!!

るり
るり

本当にこれだけミャ。「:target」の指定や解説はここでは詳しくしないけど、一緒に設定しておくと便利ミャ。

scroll-behavior - CSS: カスケーディングスタイルシート | MDN
scroll-behavior は CSS のプロパティで、ナビゲーションや CSSOM のスクローリング API によってスクロールするボックスにスクロールが発生した際の、そのスクロールの振る舞いを設定します。
ほてまる
ほてまる

便利だニャ!!!

でも、ちょっと疑問ニャ。スクロールの速度とかはどうなるニャ?細かく指定とかできないのかニャ~?

るり
るり

そこに関しては残念ながら指定できないミャ。

各種ブラウザに依存する形になるから、早すぎるとか遅すぎる、という細かい要望までは答えられないのが弱点ではあるミャ。
それと、既にJavaScriptで実装していたりすると挙動の保証ができなかったり、CSSを読み込んでいる全体に影響を及ぼすから特定の箇所だけスムーススクロールにしたい、なんてことはできないミャ~。

ほてまる
ほてまる

なるほどニャ?ということは時間もかけたくないし、全体的にこれでいいじゃない、という場合だけで使うって理解でいいのかにゃ?

るり
るり

そうだミャ。細かい値まで設定できたほうがいいというのは製作者側、提供者側の都合だからブラウザ依存でも十分という理解を持ってもらうことができればこれで十分だミャ。

本来であれば利用者がブラウザのカスタマイズでできればいいと思うミャ~。

とはいえ、いまではほとんどのブラウザで実装されているミャ。

"scroll-behavior" | Can I use... Support tables for HTML5, CSS3, etc
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
るり
るり

不安要素としてはiOSでは15.3までが非対応だミャ。アップグレードをしたくない、という方には申し訳ないけど諦めてもらうという話を通しておくのが無難ミャ。

まとめ:低コストでスムーススクロールを実装したい方

兼ねてよりスムーススクロールはブラウザ側で実装してくれよと思っていましたがCSSで設定できるようになっています。
個人的には必須の機能というわけでもないとも思っていますが、ページ内リンクの場合は分かりやすくなるインタラクションではあるので「あれば良い」程度なのかなと思っています。

           

お仕事・当サイトへ興味を持っていただいた方
お問い合わせはこちらから

ma-san(鈴木正行)
テクニカルディレクター / Webデザイナー

「ma-san」の中の人。東京都・千葉県・宮城県仙台市を中心に企業のWebデザイン/マーケティング/IT戦略のプランニングからWebサイト構築・運用をしています。
「Webサステナビリティ・Webアクセシビリティ」を中心に、「変わりゆくWebと共にサービス・サイトを改善していくこと」を重視します。
当サイトではお仕事のご相談からナレッジシェアを中心に活動していきます。

CSS
スポンサーリンク
シェアする
ma-sanをフォローする
ma-san blog
タイトルとURLをコピーしました