[CSS]divなど余計なものを使用しないで、レイアウトをセンターに配置するテクニック

サイト構築 -CSS

Post on:2011年6月15日

sponsorsr

「<div id="wrapper">」などのラッパーを使用しないで、レイアウトをセンターに配置するスタイルシートを紹介します。

How to Centre and Layout Pages Without a Wrapper

[ad#ad-2]

まずは、そのデモのフルスタイル版から、ご紹介。
フルスタイル版では、CSS3でボックスシャドウなどを適用しています。

デモページ

※スタイルにCSS3を使用しているため、この版はIE6には対応していません。後ほど紹介するシンプル版はIE6に対応しています。

「<div id="wrapper">」を使用しないでレイアウトをセンターに配置するスタイルシート

元記事ではスタディが段階ごとに紹介されていますが、ここではその最終段階を紹介します。

CSS：シンプル版

<!DOCTYPE html>
<style>
	html{overflow: hidden; height: 100%; background: #c72;}
	body{overflow: auto; height: 100%; width: 600px; margin: 0 auto; /* center */ padding: 0 20px;
		 border: 1px solid black; border-width: 0 1px;
		 background: #eee;}
</style>
<body>
	Lorem ipsum dolor sit amet, … anim id est laborum.
</body>

html要素に「height: 100%;」を指定し、エレメントを高さいっぱいにします。あわせて、「overflow: hidden;」を指定し、エレメントがブラウザの高さを超えた場合に背景が途切れないようにスクロール表示にします。

body要素はサイズがhtml要素に基づいて計算されるように「height: 100%;」を指定します。「width: 600px;」は任意のサイズに変更してください。

上記をブラウザで表示すると、下記のようになります。
IE6でも期待通りの表示をします。

IE6でのキャプチャ

[ad#ad-2]

さらに、フルスタイル版ではボックスのデザインや見出しの配置にCSS3を使用しており、長いコンテンツを「Show More」で分けて表示できるようにしています。

デモページ

フルスタイル版の対応ブラウザは、Firefox 3.5, Chrome 5, Opera 10.50, Safari 5です。

HTML

HTMLは、非常にシンプルなものになっています。

<body>
	<h1>31<sup>st</sup> March 2010</h1>
	<p>
		テキスト
	</p>
	<p><a href="#more">Show More</a></p>
	<div id="more"><p>
		テキスト
	</p></div>
</body>

CSS：フルスタイル版

センターに配置するスタイルシートの基本は同じで、ボックスシャドウや角丸などCSS3のスタイリングを行っています。

	html	{height: 100%; width: 680px; margin: 0 auto; padding: 40px 0 100px 0;
		 /* change the box model to exclude the padding from the calculation of 100% height (IE8+) */
		 -webkit-box-sizing: border-box;
		    -moz-box-sizing: border-box;
		         box-sizing: border-box;
		 background: #c72;}
	body	{position: relative; min-height: 100%;
		 margin: 0 0 40px; padding: 20px 20px 20px 100px;
		 border: 4px solid white;
		 -webkit-border-radius: 12px;
		    -moz-border-radius: 12px;
		         border-radius: 12px;
		 /* Safari 4 does not support an inset shadow */
		 -webkit-box-shadow:       5px 5px 25px rgba(0,0,0,.5);
		 /* Chrome 5 does, Safari 4 will ignore this declaration */
		 -webkit-box-shadow: inset 5px 5px 25px rgba(0,0,0,.5);
		    -moz-box-shadow: inset 5px 5px 25px rgba(0,0,0,.5);
		         box-shadow: inset 5px 5px 25px rgba(0,0,0,.5);
		 font: 13px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
		 color: #333;
		 background-color: #eee;}
	
	h1	{position: absolute; margin-left: -70px;  padding: 0; white-space: nowrap;
		 font: 36px "Helvetica Neue" , Arial, Helvetica, sans-serif; text-transform: uppercase;
		 color: #aaa; text-align: right;
		 /* CSS transforms, available in Safari/Chrome, Firefox 3.5+, Opera 10.5+ */
		 -webkit-transform-origin: left top; -webkit-transform: rotate(270deg) translateX(-100%);
		    -moz-transform-origin: left top;    -moz-transform: rotate(270deg) translateX(-100%);
		      -o-transform-origin: left top;      -o-transform: rotate(270deg) translateX(-100%);
		 /* Internet Explorer 8 rotate */
		 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
	h1 sup	{vertical-align: top; font-size: 22px;}
	
	p	{margin: 20px 0 0 0; padding: 0;}
	
	div		{display: none;}
	div:target	{display: block;}