JavaScript

scrollTopやscrollLeftを活用！ボックス要素をページ中央に配置する簡単ガイド

  /

今回は、jQueryのscrollTopやscrollLeftを用いてウェブページ中央にボックス要素を表示する方法について、初心者でも理解しやすいように詳細に解説します。
この記事を通じて、基本的なCSSとJavaScriptの知識を深め、実際のプロジェクトに応用することを目指します。

Contents

ウェブページ中央にボックスを配置する

ウェブデザインでは、特定の要素を画面の中央に配置することがよくあります。このシンプルながら効果的なデザイン技法は、ユーザーの注意を引きつけ、ウェブページの見た目を改善します。jQueryを使用してこの目的を達成する方法を学びましょう。

必要な準備

このチュートリアルを始める前に、以下の点を確認してください。

  • 基本的なHTMLとCSS、JavaScriptに関する知識がある。
  • jQueryライブラリへのアクセスが可能である（CDN経由での読み込みを推奨）。

ステップ1:HTMLの構造を設定する

まず、中央に表示したいボックスのHTMLマークアップを作成します。この例では、iBoxというIDを持つdiv要素を使用します。

	<h1>150×150のボックスをページの上下左右中央に表示</h1>
	<div align="center">ブラウザサイズを変更した場合はページの更新（F5）を行って下さい。</div>
	<div id="iBox"></div>

ステップ2:CSSで基本的なスタイルを適用する

次に、ボックス（#iBox）とページ全体に基本的なスタイルを適用します。このステップでは、ボックスを視覚的に際立たせるために背景色を設定し、ページ全体に適用されるフォントスタイルを定義します。

<style type="text/css">
<!--
body {
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.2em;
	text-align:center;
	padding:15px 0 10px 0;
}
#iBox{
	width:150px;
	height:150px;
	background-color:#09F;
	position:absolute;
}
-->
</style>

ステップ3:jQueryを使用してボックスを中央に配置する

最後に、jQueryを使用して、ボックスが常にページの中央に位置するようにします。jquery.min.js（1.9.1）ファイルを読み込みます。
これを実現するために、scrollTopとscrollLeftメソッドを使用して、ボックスの位置を動的に調整します。

ブラウザ高さ（height）・幅（width）を計り、ボックス要素（#iBox）を.scrollTop()と.scrollLeft()を使ってブラウザの上下左右中央に表示します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	var strid="#iBox";	//ボックスのid名
	$(strid).css("top", ($(window).height()-$(strid).height()) / 2+$(window).scrollTop()+"px");
	$(strid).css("left", ($(window).width()-$(strid).width()) / 2+$(window).scrollLeft()+"px");
});
</script>

　
このスクリプトは、ページが読み込まれた後に実行され、ボックスを画面の中央に配置します。ブラウザのサイズが変更された場合、ページをリロードすることでボックスを再度中央に配置できます。
より高度な実装では、window.onresizeイベントを使用して、ブラウザのサイズ変更時に自動的にボックスを中央に再配置することができます。

scrollTopやscrollLeftを使ってボックス要素をページの上下左右中央に表示

実装したデモページは、以下のリンクから確認できます。

scrollTopやscrollLeftを使ってボックス要素をページの上下左右中央に表示デモ

CSSだけでも出来ますが今回はJavaScriptでやってみました。

まとめ

この記事では、jQueryを使用してウェブページの中央にボックス要素を配置する方法を学びました。CSSの基本的な知識と、JavaScriptを使った動的な要素の操作を組み合わせることで、効果的なウェブページデザインを作成することができます。この技術は、ポップアップウィンドウやモーダルダイアログなど、多くのウェブデザインパターンで応用可能です。

ウェブ開発のスキルを向上させるためには、このような基本的な技術を理解し、実際のプロジェクトに適用することが重要です。今後も技術的な挑戦を楽しみ、ウェブの可能性を広げていきましょう。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

scrollLeft scrollTop 左右中央 上下中央
関連記事