tedateコンテンツへスキップ夜の帳がおりています。良い時間をすごせますように。スムーススクロール時の遷移先を、cssだけで意図した位置に設定する方法[scroll-margin]スムーススクロール時の遷移先を、cssだけで意図した位置に設定する方法[scroll-margin]ページ内で、スムーススクロールを実装した時。ページ上部にあるリンクを押すと、ページ内の特定のidを持つセクションに遷移する場合など。その際に、ページ上部におおいかぶさる(追従してくる)ヘッダなどがあった場合。そんな場合に何の対策もしていないと、遷移した時にその追従してくるヘッダ分、要素が隠れて、見切れてしまうことになります。この様な場合、レガシーな対応方法としては、アンカーの場所をあえて少し上に用意したりするケースが回避策としてとられていたかと思います。ついて書いていきます。昨年2022年の中頃まではご存知の通り、「とある青くて丸いアイコンのブラウザ」のために実務での投入は二の足を踏む存在だったのですが現在は、実務での使用が問題なくできるようになっています。使い方について、次のセクションより書いていきたいと思います。例としては、単純明快です。サンプルとして、ページの上の方に、テキストリンクが並んでいるとしましょう。それのいずれかをクリックあるいはタップすると、指定したページ内リンクに遷移すると。そんな至ってシンプルな構造があったとします。1〜12行目までがヘッダ。14行目〜末尾までが、ヘッダ内のメニューから移動する遷移先です。</div>上記の基本的なcssは次の様な感じです。サンプルなので、特段これといった装飾はしておらず、必要最低限のcssです。0;}そして、ページを少しスクロールすると、次のJavaScriptによってヘッダが追従してくるものとします。スクロール値が200pxを超えたらヘッダがスライドインします。使うともっとスマートに管理できるのですが、サンプルということで簡易的な仕組みで追従させています。このままだと追従ヘッダの高さの分だけ、要素が隠れてしまうさて、このときに、このままだと各セクションに移動した際、追従ヘッダに遷移先の要素が隠れてしまうわけですね。scroll-margin)というわけです。記述するかというと、先ほどのcssに、次の様に追記します。100px;とします。追従してくるヘッダの高さ(80px)よりも、すこし少し大きめに設定します。設定しておくことで、ページ内リンクの遷移先が隠れてしまう事象を、cssだけで簡単に解決することが可能というわけです!留意点など。使えるのはcssで定義されたページ内リンクの場合。使用することで、ページ内リンクの遷移先で、上にかぶさる何らかの要素があった時にも、遷移先の位置調整をcss1行だけで簡単に調整できることがわかったかと思います。つかってcss制御でのスムーススクロールを設定、スムーススクロール付きのページ内リンクを作っています。設定する方法でも実装が可能です。無効化されるということです。JavaScriptによるアプローチで、ページ内リンクを実装する方法についても、いずれまた記事を書きたいと思ってます。MDN内の解説などこの記事で登場した、用語などに関するMDN内の詳しい解説は次のとおりとなります。関するリンクは次のとおり。親要素に対して効かせる使い方が中心になるかと思います。要素の内側に余白を設けたい場合、という使い分けの観点から考えると、確かにそうなるよね、というところです。Webブラウザの挙動そのものの仕様を決めてる人達、が運営してるので当然と言えば当然ですが)。一読することをおすすめします。この記事のまとめ今回は、Webサイトでページ内リンクをつくった時にたとえば追従ヘッダがあるサイトなどで、追従ヘッダの高さによって遷移先の要素が隠れてしまう様な場合。ついて記事を書きました。よるアプローチ方法は、JavaScript制御でのページ内リンクをつくった際には無効化される方法ではありますが、そうではない場合には、本当にcssたった1行で調整が効くため結構使い所がある手法じゃないかなと感じています(実際に、私も実務でもよく使います)。この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。※この記事は内容の品質向上を目的に、随時更新を行う場合があります。]新しい画像形式を使ってWebサイトを高速化する方法。srcsetによる分岐方法も。様なレイアウトが作れるジェネレーターを制作しました!印象的な文字表現が簡単にできる。Observerでモーダルを表示する方法[JavaScript]私の修行時代のお話。