全1433文字
Google Chrome、Microsoft Edge、Firefox、Safariといった今どきのWebブラウザーでは、ユーザーの使いやすさを向上するようなWebの表現を、ブラウザーの違いを気にすることなく実装できる。シンプルなコードでWebの表現力をアップさせる最新機能を紹介する。
Webページの「スムーススクロール」を簡単に実現するCSSを紹介します。スムーススクロールとは、Webページで目次などをクリックして同じページ内の別の位置に移動するときに、滑らかに動いてスクロールする表現のことです。HTMLでページ内リンクを作るだけでは、リンクをクリックしたときに瞬時にスクロールしてしまうので、滑らかに動いているようには見えません。
従来は、滑らかなスクロールの表現を作るには、複雑なJavaScriptのコードを書いたり、JavaScriptのライブラリーを使ったりする必要がありました。モダンブラウザーでは、CSSの「scroll-behavior: smooth」を使うだけで簡単にスムーススクロールを作れます（表2）。
表2 ●scroll-behaviorプロパティの「smooth」値
[画像のクリックで拡大表示]
図3のように、同じページ内に3つのリンク先が用意されているWebページでスムーススクロールを作ってみましょう＊2。図3の3つの写真の上に表示されている「千葉鋸山」「神奈川県鎌倉」「福岡県福岡市」という見出しの文字の位置が、リンク先です。図3の画面上部の「千葉鋸山」「神奈川県鎌倉」「福岡県福岡市」という文字が、それぞれページ内リンクになっています。各リンクをクリックすると、それぞれの見出しの位置まで滑らかに動いてスクロールします（図4）。
図3 ●同じページ内に3つのリンク先があり、画面上部のリンクからそれぞれに移動できる
[画像のクリックで拡大表示]
図4 ●「福岡県福岡市」のリンクをクリックすると、「福岡県福岡市」の見出し文字まで滑らかに動いてスクロールする
[画像のクリックで拡大表示]
＊2 サンプルのデモを、 https://tonkotsuboy.github.io/2207_web_nikkeibp/smooth-scroll/index.html で確認できます。
