ページ内リンクをゆっくり飛ばす方法。CSSを1行追加するだけ！
html{scroll-behavior: smooth;}
ページ内リンクとは？
ページ内リンクは、webサイトの利便性を考慮してページ内を移動させる手法の1つです
デモ←これクリックすると①まで飛ぶよ！
①ここまで移動します！！
設定方法は簡単！
HTML編集でそこまで移動したい要素に対してidを設定してあげて、それをまたaタグで指定してあげるだけ！
<a href="#test1">デモ</a> <p id="test1">①移動先</p>
これだけで、簡単にページ内をジャンプして移動できるようになります！！
ブログのフッターに｢トップへ戻るリンク｣を用意して、ブログタイトルのidを指定してあげればトップへ戻るボタンが楽々制作できます♪
ページ内リンクをゆっくり飛ばす
ページ内リンクを使う注意点として、サイトに来たユーザーが間違えてクリックした時に一瞬で画面が飛んでしまうことです
急に見ていた画面が変わってしまったらビックリしちゃいますからね
そこで、プロのwebデザイナーなどはJavaScriptを使って｢スムーススクロール｣と呼ばれる、ページ内をゆっくりスクロールして画面を飛ばす手法をよく用います
でも、｢JavaScriptなんて分かんない！｣というのが初心者の悩みどころ…
そこで、ページ内リンクをたったの一行でスムーススクロール化させる裏技的なCSSがあります！！それがこちら↓↓
html{scroll-behavior: smooth;}
この一文をCSSに追加するだけで、ゆっくりページが飛ばせるようになります！！
注意 iOS SafariやIEにEdgeが未対応
ChromeとFirefoxのブラウザでは問題なくスムーススクロール化できます
しかし、iOS端末 SafariやIEにEdgeブラウザだと機能しません（エラーとかは起こらない）
scroll-behaviorのCSSが非対応だからです
(まぁ、ブラウザ使用率はChromeが圧倒的なので、そこまで気にしなくてもいいかもしれません)
ページ内リンクのスムーススクロール【デモ】
※iPhone端末ほかIEとEdgeブラウザでは確認できません！！ごめんね！
下記②までゆっくりと移動します。画面をよく見ていてください
デモ←これクリックすると②まで飛ぶよ！
ウコン
ウコン
ウコン
ウコン
ウコン
②ここまで
もう一度確認する！←上に戻りたい人はこちら
はい！スムーススクロール化してましたか？
ちなみに「ウンコ」の数が何個あったか分かりましたか？
正解は、、、
0個です！！
不正解だった人は、もっとよく見てみましょう！
※iPhone端末ほかIEとEdgeブラウザでは確認できません！！大事な事なので2回略
JavaScriptを使わずCSSを使用するメリット
まず何と言っても設置が簡単なところです！たったの1行CSSに追加するだけですからね
あと、JavaScriptをあれこれ設置するとサイトが重くなります
さらに、間違ったところにJavaScriptを記述してしまうと、スムーススクロールが動かないどころか、他のプログラムにも影響してエラーを吐き出してしまうことがあります！！
プログラミングスキルが無いという人は、迷わずこの手法を選ぶべきです！
(唯一のデメリットとして、iPhone端末ほかIEとEdgeで使えないところですが、もしかしたら今度CSSが対象化されるかもしれません)
