【CSSのみ】scroll-behaviorで手軽にスムーススクロール｜JS不要 2024 5/02 コーディング 2024年2月1日2024年5月2日 アニメーションがあるだけでWebサイトがだいぶ今風になりますが、中でも割と実装が簡単なのがアンカーリンクをスムーススクロールするアニメーションです。 筆者はいつもjQueryを使っておりましたが、CSSのみで簡単に実装できると言われているプロパティscroll-behavior: smooth;を試したところ、十分なくらいの完璧な動きでした！ 簡単にできるからこそのメリット・デメリットを含めて解説していきます。 さとみ JavaScriptやjQueryがわからない方は必見です！ サンプルコード▼ </noscript><iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" data-src="https://codepen.io/usanoko/embed/rNrBQGR?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true" class="lazyload" > See the Pen <a href="https://codepen.io/usanoko/pen/rNrBQGR"> Untitled</a> by うさのこ (<a href="https://codepen.io/usanoko">@usanoko</a>) on <a href="https://codepen.io">CodePen</a>. 目次＼Webデザイナーとコーダーには欠かせない／ ★Adobe CC コンプリートプランが46,900円もお得★ 「scroll-behavior: smooth;」で実装可能 CSSのみでスムーススクロールを動かすには、<html>にscroll-behaviorプロパティのsmoothを適用させます。 html { scroll-behavior: smooth; /* スムーススクロール */ } 対応ブラウザ IEには対応しておりませんが、サポート終了している今となってはIEを要件定義に含めるクライアントはいないでしょう。 scroll-behaviorのサポート状況 scroll-behaviorの注意点 実装して終わり！超簡単！…と、言いたいところですが、いくつか注意点があります。 移動速度は変更できない 速度・イージングの指定はできず、ブラウザ依存となります。凝った動きにしたいならJSを使うことをおすすめします。 （筆者的にはCSSで十分だと思います！） ページ内リンクはすべてスムーススクロールになる ページ全体にscroll-behavior: smooth;を適用するので、全てのアンカーリンクがスムーススクロールになります。 リンクごとに挙動を設定できないので注意が必要です。 URLにアンカーがつく JavaScriptではアンカーリンクをクリック時にURLにアンカーがつかないようにできますが、CSSではそれができません。 CSSでスムーススクロールを実装し、JavaScriptでURLのアンカーを消すという方法もありますが、だいぶ回りくどくなるので、アンカーを付与したくない方はJavaScriptでスムーススクロールを設定したほうがいいです。 固定ヘッダーだとコンテンツに重なる ヘッダーをposition: fixed;で追従する場合、アンカーリンクのスクロール位置がコンテンツに重なってしまいます。 スクロール位置をコンテンツに重ねない対処法 飛び先の要素（この記事では<section>）にscroll-margin-top: ここに数値;を適用すれば、スクロール位置が数値分上に移動します。 感覚はmargin-topと同じです。 section { scroll-margin-top: 50px; /* スクロール位置をsectionの上に数値分空ける */ } 上記の見本では<section>タグのみにアンカーを指定しているためCSSではid指定をしておりませんが、特定の要素を指定したい場合はidも指定しましょう。 scroll-margin-bottom scroll-margin-left scroll-margin-rightも存在しておりますが、あまり使用する機会はないかも？ scroll-margin-topとscroll-padding-topの違い この二つは似たような機能を持っていますが、意外と役割が違います。 前述のscroll-margin-topは「飛び先の要素」に設定するのに対し、scroll-padding-topは<html>に設定します。 こんな感じで使い分けると良いでしょう▼ scroll-margin-top 特定の要素にスクロールした時のみスクロール位置を移動 scroll-padding-top どの要素に飛んでもスクロール位置を移動 html { scroll-padding-top: 50px; /* どの要素にスクロールしても50px空ける */ } #section_02 { scroll-margin-top: 100px; /* この要素のみスクロールした時に100px空ける */ } 対応ブラウザ scroll-behaviorと同様、IEには対応しておりませんが、シェア率を考えると普通に使っても問題ないくらいに対応しております。 ちなみに、前述のscroll-padding-topもサポート状況の同様になります。 scroll-margin-topのサポート状況 【5年連続第1位】1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］Amazonで購入する楽天で購入する まとめ いかがでしたでしょうか？ CSSにたった一行追加するだけで、ページ全体のアンカーリンクをスムーススクロールしてくれるなんて、なんてコーダーに優しいプロパティなんでしょう(泣) その分、アニメーションの融通はきかないので、もし調整の必要がある場合は記述をJSに切り替えましょう。 ＼ ランサーズだと依頼がスムーズ ／ 「ブログ拝見しました」と一言添えていただくと初回10%OFF→20%OFFに！！ さとみに相談してみる？ コーディング URLをコピーしました！ 【デザイナー必見】コーダーに優しいWebデザインデータの作り方 【アクセシビリティ直結】そのalt属性、付け方あってる？正しい意味を解説 ＼WordPressに特化した充実機能が満載！詳細はこちら▼／ 関連記事 【これぞ今風】CSSで要素を上下左右中央寄せにする記述方法｜inset/Flexboxなど 2024年5月2日 【Web制作者なら超重要】ウェブアクセシビリティ義務化にともなうサイト改善 2024年4月22日 【SEO対策】imgタグのwidth/height属性は省略しないで！ 2024年2月16日 【アクセシビリティ直結】そのalt属性、付け方あってる？正しい意味を解説 2024年2月4日 【CSS関数】clamp()で値の最大/最小値を指定｜レスポンシブで超便利 2024年1月23日 【プロパティは2つだけ】画像の縦横比を維持したまま長辺に合わせてトリミングするCSS 2024年1月20日 コメント コメントする コメントをキャンセルコメント ※ 名前 メール サイト 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。 上に表示された文字を入力してください。
さとみ
コメント