こんにちは、みいです。プログラミングの言語はその用途によって数多く存在しています。
プログラミングを学び始めた人の中には、HTMLとCSSから勉強を始めた人が多いのではないでしょうか？今回はサイトのリンクをクリックすると、スルスルっと普段のマウスでのスクロールより滑らかに移動できるスムーズスクロールについてご紹介します。
実はそんな難しそうな動きもHTMLとCSSだけで実装することができるんです。その方法と注意点をまとめていきます。
スムーズスクロールって何？
まずは基本的なスムーズスクロールの知識を整理します。
スムーズスクロールとは
1ドットという細かい単位で画面をスクロールする動きの事を言います。一般的に用いられているのは1文字単位でスクロールするキャラクタスクロールです。
スムーズスクロールはキャラクタスクロールに比べて画面が滑らかに移動するので、ユーザーが視線でその動きを追いやすいという特徴があります。
どんな時に使われるの？
スムーズスクロールはページ内リンクの移動先、またはリンクへ移動するという行為そのものをユーザーにより視覚的に明示したい時に使われます。例えばよく見られるのがページのトップに移動するというリンクです。
上下に長さのあるページではスムーズスクロールを実装する事によって手でスクロールをする事無くページのトップに移動できるという便利さがあります。
また、入力項目の多いフォームなどに適用されることもあります。項目ごとに上手く分類してスムーズスクロールを採用すれば、ユーザーが修正したい部分をピンポイントで見つけたり、項目ごとに最終確認をしたりする時にも有効です。
スムーズスクロールの設定方法
スムーズスクロールをを設定する方法は大きく分けて２つの方法があります。
一般的によく利用されているのがこのJavaScriptを使ったスムーズスクロールで、アニメーションを追加したり、スクロールの速度を変更したりすることができます。この後紹介するHTMLとCSSを使ったスムーズスクロールよりも対応ブラウザが多いため重宝されています。
JavaScriptを用いたコードはいくつか紹介されており、中にはjQueryを併せて読み込む必要があるコードもあります。JavaScriptのみを使っての実装も可能ですが、コードが比較的長くなってしまうという理由でjQueryを利用することが多いようです。
2006年にリリースされたJavaScriptライブラリー。
簡単に説明するとJavaScriptで実装できる事をより簡単に記述することが出来るよう開発されました。jQueryのような使いやすいライブラリーが出てきたことは、Web開発の発展に貢献したとも言われています。
後程詳しく説明しますが、対応しているブラウザが少ないという問題点があるため、現段階ではJavaScriptやjQueryを使ったスムーズスクロールが欠かせないというのは事実です。しかし、いくつかの問題点はまだ残りますが、何よりもHTMLとCSSだけを使って簡単にスムーズスクロールを実現できるという強みがありますので、HTMLとCSSからプログラミングの勉強を始めた学習者の人達もぜひ試して欲しいと思います。
HTMLとCSSのみを使ったスムーズスクロール
では本題に入ってHTMLとCSSだけで書けるスムーズスクロールのコードを確認していきましょう。
HTMLとCSS使ったスムーズスクロール
今スムーズスクロールの一番簡単な方法として注目を集めているのがHTMLとCSSを使った方法で、なんとスタイルシートにたった1行追加するだけで出来てしまうんです。それがscroll-behaviorプロパティです。
早速コードを見てみましょう。
|
1 2 3 |
HTML{ scroll-behavior: smooth; } |
HTML要素にscroll-behavior: smooth;を適用するとページ全体のページ内リンクがスムーズスクロール化します。今までJavaScriptを利用しなくてはいけなかった事を考えると、CSSの記述のみですむので構造的にとても軽くすることができます。
scroll-behaviorプロパティ
scroll-behaviorプロパティに設定できる値はsmoothとautoがあります。scroll-behaviorプロパティでプロパティを指定したページ内リンクの移動に関しての挙動を設定します。
scroll-behavior: smooth;と scroll-behavior: auto;の違いは下の通りです。
「スムーズスクロールが必要ない時はautoに設定すればいいのかな？」と思われるかもしれませんが、初期設定はスムーズスクロールが適用されていないのでscroll-behavior:auto;
はあまり使い所がないかもしれませんね…
下記のサイトで実際に2つの動きの違いを試してみてください。
MDN Web Docs
https://developer.mozilla.org/ja/docs/Web/CSS/scroll-behavior
こんなことに注意！HTMLとCSSを使ったスムーズスクロール
実はHTMLとCSSを使ったスムーズスクロールにはいくつかの落とし穴があるんです…。
対応していないブラウザが多い
HTMLとCSSだけを使ったスムーズスクロールはとても便利なのですが、まだ対応しているブラウザが限定的なのが少し残念なポイントです。特にSafariはMacOSや iPhoneの標準ブラウザであるため、ユーザーが多い日本でも無視できない部分です。
その為、ブラウザの対応が整うまではJavaScriptやjQueryを使ってスムーズスクロールを実装する必要があるのです。最新の対応ブラウザは下記サイトから確認できます。
Can I use .com(Browser support tables for modern web technologies)
https://caniuse.com/?search=scroll-behavior
こんな時はjQueryがおすすめ
HTMLとCSSでのスムーズスクロールでは対応ブラウザの問題でJavaScriptやjQueryが必要だと分かった所で、jQueryが特に良く使われている理由を説明します。
先に少し触れましたが、jQueryはJavaScriptをより簡単に記述出来るように設計されたライブラリーであるため、同じスムーズスクロールを適用させようと思っても記述内容が大きく異なります。
JavaScriptではかなりの行数のコードを書く必要があるのに対し、jQueryであればそれをかなり簡素化できます。HTMLやCSSでのスムーズスクロールの様に1行とはいかないですが、メンテナンスやカスタマイズの面を考慮しても行数の少ないシンプルなコードの方が扱いやすくなります。
ただライブラリを利用すると、その元となっているJavaScriptをそのまま使うよりページ数の読み込みに時間が掛かるという事は知識として知っておきましょう。
Word Pressはプラグインを有効活用
またWord Pressを利用したページの場合は、直接コードを書かなくても簡単にページをカスタマイズできるプラグインを利用しない手はありません。実はスムーズスクロールに関してもプラグインが利用できるんです。
有名なのはEasy Smooth Scroll Linksです。もちろんjQueryライブラリなども必要なく、CSSとHTMLのスムーズスクロールでは出来なかった挙動に関する細かい設定も可能です。
Word PressのWeb制作案件も多いですので、便利に利用できる所はプラグインを使えば時間効率や完成度を上げることができます。
Easy Smooth Scroll Links
https://ja.wordpress.org/plugins/easy-smooth-scroll-links/
まとめ
スムーズスクロールについて、少し頭の中が整理できたでしょうか？普段は何となく見過ごしているサイト上のちょっとした動きですが、それが実装されていることによってユーザーの使いやすさが変わってきます。
Webサイト関連の仕事をしようと考えている人は、ユーザーの立場に立ってそんなちょっとした工夫を見つける努力をするといいかもしれません。
まだHTMLとCSSしか学んでいなくてもこんなことができるんだと、学習者の皆様の自信に繋がればうれしいです。
