【CSSのみ】ページ内リンクでコンテンツを画面中央にする方法

今回は、ページ内リンクで遷移先のコンテンツを、画面中央に配置するテクニックを紹介します。

JavaScriptは不要で、CSSだけで実現できます。

やりたいこと

以下のデモページに実際の動きを確認できます。

通常、ページ内リンクで遷移先に移動すると、遷移先のコンテンツは上部に配置されます。

今回やりたいことは、以下の画像のように、遷移先のコンテンツを画面中央に配置させることです。

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不要でスムーススクロールにできます。最近の主要ブラウザは全て対応しています。

豊富なオリジナルブロックでLPをかんたんに作成できるLP Creator

デザイン・機能・SEO・収益化にこだわったメディア運営者向け「STREETIST」

仕組み

仕組みは至って単純です。

空のdiv要素をtopプロパティでコンテンツ中央に移動させます。

それをtransformプロパティで画面半分上に移動させれば完成です。

意外と簡単に実装できて、結構使えるテクニックなのでぜひ覚えてくださいね！

【HTML/CSS】横スクロールできる表（テーブル）の作り方

今回は、HTMLとCSSで横スクロールできる表の作り方を解説します。スマホ環境ですと表が入りきらない…

CSSだけでサイドバーを固定（スクロール追従）する方法

今回は、CSSだけでサイドバーを固定する方法を紹介します。コンテンツをスクロールすると、サイドバーの…