jQueryのscrollTopやscrollLeftを使ってボックス要素をページの上下左右中央に表示する方法をご紹介します。
Contents
ディスプレイ広告
ボックス要素をページの上下左右中央に表示するCSSの記述
※ボックス要素(#iBox)のCSS記述です。必要に応じて変更して下さい。
<style type="text/css"> <!-- body { font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",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>
jQueryのscrollTopやscrollLeftを使ってボックス要素をページの上下左右中央に表示するJavaScriptの記述
※jquery.min.js(1.9.1)ファイルを読み込みます。ブラウザ高さ(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>
ボックス要素をページの上下左右中央に表示するHTMLの記述
※上下左右中央に表示するボックス要素(id=”iBox”)を用意しました。必要に応じて変更して下さい。
<h1>150×150のボックスをページの上下左右中央に表示</h1> <div align="center">ブラウザサイズを変更した場合はページの更新(F5)を行って下さい。</div> <div id="iBox"></div>
scrollTopやscrollLeftを使ってボックス要素をページの上下左右中央に表示
scrollTopやscrollLeftを使ってボックス要素をページの上下左右中央に表示デモ
CSSだけでも出来ますがJavaScriptでやってみました。
ブラウザサイズを変更すると上下左右中央では無くなりますが、ページ更新(F5)を行うかwindow.onresize的な処理を入れれば解消できます。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。