CSSで天地センターに配置するテクニック第2回目です。今回は定番テクニックの問題点を解決する方法をご紹介します。

produced by Blades co.,ltd.



Entry Detail

Rating ---

  • 1
  • 2
  • 3
  • 4
  • 1

CSS

CSSで画面全体に対して天地中央に配置するテクニック(2)

前回のエントリーで、CSSで画面全体に対して天地中央に配置するテクニック(1)として定番のテクニックをご紹介しました。今回は前回の手法の問題点を解決する別のテクニックをご紹介したいと思います。

定番テクニックの問題点のおさらい

定番のテクニックである「絶対配置+ネガティブマージン」にはコンテンツ表示上の大きな問題があります。それは、ブラウザの表示スペース(つまりbodyの大きさ)がコンテンツ表示領域(divなど)よりも狭い場合、コンテンツの全体が表示されないと いうことです。
これをわかりやすく説明するために、ブラウザで表示した例を見てみましょう。ソースは前回のエントリーでサンプルとして挙げたものを少し改変します。
HTMLは以下のようになります。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

<link rel="stylesheet" href="base.css" type="text/css" media="all" />
<title>hoge</title>
</head>
 
<body>
    <div id="content">
 	<p><img src="http://www.blades.co.jp/new/images/slideshow_blades_js.jpg" width="667" height="269" alt="" /></p>
    </div>
</body>
</html>    

CSSは以下のようになります。

html,body{
    width: 100%; height: 100%;
    margin: 0; padding: 0;
    background-color: #ffffff;
}

div,p{
    margin: 0; padding: 0;
}
 
#content{
	position: absolute;
	top: 50%; left: 50%;
	width: 670px; height: 270px;
	margin-top: -135px; margin-left: -335px;
	border: 4px solid #000000;
}

これをFirefox3.6で見てみると以下のように表示されます。

ブラウザでの表示例

表示スペースがコンテンツ領域よりも狭い場合にはスクロールバーが出ますが、左と上に切れている部分は見ることができなくなってしまいます。

解決方法 ダミー要素+ネガティブマージン+float

この問題を解決するためにまず原因を探ってみましょう。一番の問題は、#contentというコンテンツ表示領域に対して絶対配置を指定していることです。この指定のためにブラウザの表示スペースからはみ出した部分が表示されなくなってしまっています。

そこで絶対配置を使わない方法を考えます。#contentのスタイル指定から、絶対配置とネガティブマージンの部分を削除します。
base.cssのソースは以下のようになります。

html,body{
    width: 100%; height: 100%;
    margin: 0; padding: 0;
    background-color: #ffffff;
}

div,p{
    margin: 0; padding: 0;
}
 
#content{
	width: 670px; height: 270px;
	border: 4px solid #000000;
}

この段階では以下のように表示されます。

ブラウザでの表示例

次に左右中央に表示されるようにbodyと#cotentにスタイル指定を追加します。
base.cssのソースは以下のようになります。

html,body{
	width: 100%; height: 100%;
	margin: 0; padding: 0;
	background-color: #ffffff;
	text-align: center;
}


div,p{
	margin: 0; padding: 0;
}

#content{
	width: 670px; height: 270px;
	margin: 0 auto;
	border: 4px solid #000000;
}

この段階では以下のように表示されます。

ブラウザでの表示例

さて、このままでは天地に対して中央に表示させる術がありません。
そこで#content単独で天地中央に表示させることはあきらめます。代わりに#contentを外側から引き寄せるようなイメージのダミー要素をHTML上に新たに追加します。index.htmlに追記して以下のようにします。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

<link rel="stylesheet" href="base.css" type="text/css" media="all" />
<title>hoge</title>
</head>
 
<body>
	<div id="dummy"></div>
	<div id="content">
		 <p><img src="http://www.blades.co.jp/new/images/slideshow_blades_js.jpg" width="667" height="269" alt="" /></p>
	</div>
</body>
</html>

続いて、新たに追加した#dummyというダミー要素に対してブラウザ表示スペースの50%の高さになるようにスタイル指定を追加します。また、ダミー要素がどのように表示されるのかを分かりやすくするために幅を5pxに、背景色を赤にします。
base.cssは以下のようになります。

html,body{
	width: 100%; height: 100%;
	margin: 0; padding: 0;
	background-color: #ffffff;
	text-align: center;
}


div,p{
	margin: 0; padding: 0;
}

 
#dummy{
	width: 5px; height: 50%;
	background-color: #ff0000;
}
 
#content{
	width: 670px; height: 270px;
	margin: 0 auto;
	border: 4px solid #000000;
}

この段階では以下のように表示されます。

ブラウザでの表示例

この時、#contentの上辺はブラウザ表示領域の高さに対して50%の位置にあります。つまり上方向に#contentの高さの半分だけ移動すれば天地中央に表示されることになります。
#contentにスタイル指定してもいいのですが、ここでは#dummyに指定をまとめることにしましょう。
base.cssに追記して以下のようにします。

html,body{
	width: 100%; height: 100%;
	margin: 0; padding: 0;
	background-color: #ffffff;
	text-align: center;
}


div,p{
	margin: 0; padding: 0;
}

 
#dummy{
	width: 5px; height: 50%;
	margin-bottom: -135px;
	background-color: #ff0000;
}
 
#content{
	width: 670px; height: 270px;
	margin: 0 auto;
	border: 4px solid #000000;
}

この段階では以下のように表示されます。

ブラウザでの表示例

これで完成!?と思ってしまいそうですが、念のためブラウザ表示スペースを小さくしてみます。

ブラウザでの表示例

#contentの左側が切れる現象は解消されていますが、上にはみ出た部分が以前と同じように表示されていません。
ブラウザの表示スペースに余裕がない場合には、ネガティブマージンが効かないようにできないでしょうか?
#dummyに対してfloat:leftを指定してみます。

html,body{
	width: 100%; height: 100%;
	margin: 0; padding: 0;
	background-color: #ffffff;
	text-align: center;
}


div,p{
	margin: 0; padding: 0;
}

 
#dummy{
	float: left;
	width: 5px; height: 50%;
	margin-bottom: -135px;
	background-color: #ff0000;
}
 
#content{
	width: 670px; height: 270px;
	margin: 0 auto;
	border: 4px solid #000000;
}

この段階では以下のように表示されます。

ブラウザでの表示例

うまくいきました!上にはみ出ずにきちんと表示されています。
しかし実はこのままではIEで常に廻り込みがされた状態になってしまい、天地中央に表示されません。そこで#contentに対してclear:leftを指定し、廻り込みを解除するようにします。
base.cssは以下のようになります。

html,body{
	width: 100%; height: 100%;
	margin: 0; padding: 0;
	background-color: #ffffff;
	text-align: center;
}


div,p{
	margin: 0; padding: 0;
}

 
#dummy{
	float: left;
	width: 5px; height: 50%;
	margin-bottom: -135px;
	background-color: #ff0000;
}
 
#content{
	clear: left;
	width: 670px; height: 270px;
	margin: 0 auto;
	border: 4px solid #000000;
}

これでbase.cssは完成です。

今回のCSSソースを実際に使用する場合には、#dummyの幅を1pxに、背景色をtransparentにするなどして見えないようにするといいと思います。

天地中央に関するトピックは随分前から語りつくされているので今さらな感じも否めませんが、今回ご紹介したテクニックは意外と知られていないのではないでしょうか?
定番テクニックの問題点を解決する方法としてなかなか使えると思いますので、機会があればぜひ使用してみたいですね。

追記@2010/09/15
今回ご紹介したテクニックの応用編を以下のアプリケーションで使用しています。
GeoLocator(ジオロケーター)製品紹介ページ
あわせてご覧ください。


Comments(0)

お気軽にコメントまたは評価を投稿してください。

お名前とE-mailアドレスをご入力の上、コメント本文または評価を入力してください。※E-mailアドレスは掲載されません。

Trackbacks(0)

お気軽にトラックバックしてください。

Monthly Archives


Category Archives



About Blades LAB

知的好奇心探究サイト 先端研究ブレイドLAB

先端研究ブレイドLABは、株式会社ブレイドが自社で開発したサービス・製品について紹介するサイトです。社員が興味を持った技術を駆使してサービス・製品へと昇華し、広く世間に対して公表することで、技術ノウハウを共有することを目指します。

また、2009年度まで運営していたMT/CMSブログを統合し、WEBに関する最先端の技術トピックスも紹介しております。


Project Blog!

本記事の連載は終了いたしました。

プロジェクトブログ

Blades.co.,ltd. WEB CM

ムービーを再生する

株式会社ブレイド設立2周年を記念して制作したWEB限定CMです。Adobe After Effects CS3で制作しました。
※CM中の企業ロゴは旧ロゴです。

ムービーを再生する