AboutデジタルIT・インターネットホームページ作成HTML・スタイルシート(CSS)の基礎スムーズスクロールでページ内リンクを分かりやすくホームページ作成/HTML・スタイルシート(CSS)の基礎スムーズスクロールでページ内リンクを分かりやすく「ページ内リンク」がクリックされた際の移動を、視覚的に分かりやすくしてみましょう。アニメーションするように滑らかにスクロールさせるスクリプト「smoothscroll.js」と、移動先要素を装飾する「:target疑似クラス」(CSS3)の使い方をご紹介。文宏ホームページ作成ガイドページ内リンクは一瞬で移動するため、気付きにくいこともページ内リンクをクリックすると、たいていのブラウザでは一瞬でリンク先の位置へ移動します。そのため、似たような構造が続くページの場合、移動したことに気づきにくいことがあります。細かな項目がたくさんあるページでは、一画面内に複数の項目が表示されてしまい、具体的にどこへ移動したのかが分かりにくいこともあります。今回は、それらの問題を解決する方法として、以下の2つの方法をご紹介致します。スムーズスクロールを実現するスクリプト「ページ内リンクのリンク先」になった場合のみ、装飾を変更するCSSこの2点を活用すると、分かりやすい「ページ内リンク」を作ることができます。両方を同時に使うこともできますし、どちらか片方だけを使うこともできます。移動が視覚的に分かりやすい「スムーズスクロール」スクリプトなめらかにスクロールすることで視覚的に分かりやすくなるページ内リンクの移動を、(一瞬で飛ぶのではなく)なめらかにアニメーションのような感じでスクロールさせるスクリプトがあります。このスクリプトを利用すると、ページ内リンクをクリックした際に、「移動した事実」が視覚的に分かりやすくなります。いうスクリプトを例としてご紹介致します。:target疑似クラスを使うと、「ページ内リンクのリンク先になった場合」のみに、装飾を変化させることができます。この装飾を使えば、リンク先がどこなのかをハッキリと明示できます。右図のように、「通常は黒色で表示」しつつ、「リンク先になった場合のみ赤色で表示」する、といったことも簡単に実現できます。スムーズスクロールと:target疑似クラスを使ったサンプルスムーズスクロールのサンプル表示例として右図のようなサンプルページを用意しました。ブラウザで閲覧して、効果を試してみて下さい。→スムーズスクロールと:target疑似クラスを使ったサンプルページサンプルページ内にある「ページ内リンク」をクリックすると、該当箇所までアニメーションのような効果を伴ってスムーズにスクロールします。リンク先の該当項目を強調表示(項目名を赤色に、文章の背景を淡い黄色に)することで、どこがリンク先なのかを分かりやすく表示します。それでは、まずは、スムーズスクロールを実現するJavaScriptから使ってみましょう。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。