今回は、ページ内リンクで遷移先のコンテンツを、画面中央に配置するテクニックを紹介します。
JavaScriptは不要で、CSSだけで実現できます。
やりたいこと
以下のデモページに実際の動きを確認できます。
通常、ページ内リンクで遷移先に移動すると、遷移先のコンテンツは上部に配置されます。
![](https://retval.jp/site/wp-content/uploads/2022/08/page-link-2-1024x580.png)
今回やりたいことは、以下の画像のように、遷移先のコンテンツを画面中央に配置させることです。
![](https://retval.jp/site/wp-content/uploads/2022/08/page-link-1024x580.png)
HTML/CSSのコード
<p class="link"><a href="#target">リンク</a></p>
<!-- 省略 -->
<section class="section">
<div class="target" id="target"></div>
<div class="content">
<h1>コンテンツ</h1>
<p>ここにコンテンツが入ります。</p>
</div>
</section>
html {
scroll-behavior: smooth;
}
.section {
position: relative;
}
.target {
position: absolute;
top: 50%;
transform: translateY(-50vh);
}
これだけで、遷移先のコンテンツを画面中央に配置できます。
scroll-behavior: smooth;
を使えばJavaScript不要でスムーススクロールにできます。最近の主要ブラウザは全て対応しています。
仕組み
仕組みは至って単純です。
空のdiv要素をtopプロパティでコンテンツ中央に移動させます。
それをtransformプロパティで画面半分上に移動させれば完成です。
![](https://retval.jp/site/wp-content/uploads/2022/08/page-link-4-1024x580.png)
意外と簡単に実装できて、結構使えるテクニックなのでぜひ覚えてくださいね!
![【HTML/CSS】横スクロールできる表(テーブル)の作り方](https://retval.jp/site/wp-content/uploads/2020/07/scrollable-table-150x150.png)
【HTML/CSS】横スクロールできる表(テーブル)の作り方
今回は、HTMLとCSSで横スクロールできる表の作り方を解説します。スマホ環境ですと表が入りきらない…
![CSSだけでサイドバーを固定(スクロール追従)する方法](https://retval.jp/site/wp-content/uploads/2020/06/sticky-sidebar-150x150.png)
CSSだけでサイドバーを固定(スクロール追従)する方法
今回は、CSSだけでサイドバーを固定する方法を紹介します。コンテンツをスクロールすると、サイドバーの…