JQuery(CSS)の覚え書き / ブロック要素をセンタリングしてみる

ブロック要素を画面の中央に配置する際、左右はCSSの「margin-left:auto;」と「margin-right:auto;」で容易に指定できるけれど、縦の場合「auto」では反映されないので他の方法を探して2つの方法を見つけることができた。

一つ目はCSSで行う方法。

二つ目は「jquery.center.js」というプラグインを使う方法。

ただ、どちらも状況によって一部のエリアが表示されなくなってしまう場合があるので、もう少し何とかできないかと別案を考えてみた。

 

■CSSで画面の中央に配置する場合。

ネットでよく見かけたのがこれ。

まず中央に配置したいブロック要素を「position:absolute;」で一度画面の右下50%の位置に移動させ、次に「margin」で左上にブロック要素の縦横半分のサイズをマイナス値として指定するというもの。

image_1.gif

動作サンプル1

ただ一つ問題となるのが画面のサイズをブロック要素より小さくしたとき。

ブロック要素の上と左を「margin」でマイナス値を設定していることから、のエリアサイズより大きくなってしまうと上と左が隠れてしまう。

この場合スクロールすることも出来ないため、完全に表示できないエリアが存在することになってしまう。

image_2.gif

 

■JQueryのプラグインを使ってセンタリングする。

JQueryのプラグインで「jquery.center.js」というのがあるので、これを使うと指定のブロック要素を簡単に中央配置することができる。

方法としては、まずJQuery本体とjquery.center.jsを読み込む。

次に天地左右の中央配置とするのか、左右のみまたは天地のみの中央揃えとするのかを指定。

「#container」のブロック要素を天地左右の中央に配置する場合。

左右のみ中央に揃える場合。ただし左右だけならCSSでもできるので、あえてJQueryを使う必要は無いと思う。

天地のみ中央に揃える場合。

動作サンプル2

注意点としては、対象となるブロック要素の縦横サイズを指定しているCSSファイルを先に読み込ませること。

それとCSSでとの両方に「height : 100%;」の指定を入れておく必要があるようです。

手間的にはCSSで設定するのとあまり変わらない。というか、個人的には若干JQueryのほうが面倒な気がする。

それと、この方法もCSSと同じで画面サイズがブロック要素より小さくなってしまうと上と左が表示できなくなってしまう。

 

■そこでJQuery使ってちょこっと考えてみた

まず、目標とする仕様。

一つはもちろんブロック要素の大きさが画面サイズより小さいときは常に中央配置。

そして、画面サイズのほうが小さくなってしまった場合は、左上を起点に固定して右と下をスクロール表示して全体を見ることが出来るようにする。

 

で考えたのがこれ。

動作サンプル3

内容としては、まず画面の縦横サイズとブロック要素の縦横サイズを取得。

次に画面の横幅がブロック要素の横幅より大きい場合は、その差分サイズの半分を「margin-left」に設定。そうで無い場合は「0」に指定する。

縦についても同様。

あとは実行タイミングとして、ページが読み込まれたときと画面がリサイズされたときの両方で実行されるように指定して完成。

ちなみにこれもCSSを先に読ませたほうが良いみたい。

というかブロック要素の縦横サイズをJQueryで取得しなければいけないので、先に読み込ませておかないと一番最初にページを表示するときにうまく中央に配置されない場合があります。

ただ、それでもだめならCSSのブロック要素縦横サイズの指定を、HTMLに直接書き込むのも一つの方法かと。

それかあまり使いたくは無いけど下記のように書き換えるのも一つの手段。

↓↓↓

これだとページの表示要素全てを読み込んでから実行されるので、重いページだとどのように表示されるかちょっと検討が付かない。

なので、個人的にはCSS情報を先に読ませることの方が一番良い気がする。

トラックバックURL

URL: http://blog.aru8tk.net/2011/07/centering.html/trackback

コメント(3)

  • なお より:

    はじめまして。‌
    うまくボックスを中央に配置できないので困っていたところ、こちらに辿り着いた者です。‌
    こちらのやり方を試してみたところ、うまく表示されるようになりました!‌
    ぜひ使わせていただきたいのですが、ライセンスなどの条件がありましたら教えていただけますでしょうか。‌
    よろしくおねがいいたします。

    • aru8tk より:

      ここで書いたソースは個人的な覚え書き程度で書いているだけですから、特にライセンスは気にせず使っていただいて構いません。‌
      ただし使用については自己責任ってことでおねがいします。

  • なお より:

    ありがとうございます。‌
    使用させていただきます。

コメントを残す

メールアドレスが公開されることはありません。

CALENDAR
2011年7月
« 6月   8月 »
 12
3456789
10111213141516
17181920212223
24252627282930
31  
ARCHIVE
サイト内検索

since july 24, 2010