CSSデザインノートでタグ「template」が付けられているもの

テーブルを使用すれば簡単にテンプレートを上下中央寄せできるのですが、ここでは、テーブルタグを使わずにテキストを上下中央揃えする方法を紹介します。

実はテンプレートを上下中央寄せする方法は2種類あります。

1.絶対配置でテンプレートを上下中央寄せ

テンプレート(サイトの大枠)をdivで囲んで、縦と横のサイズを決めます。絶対配置で基点をページの真ん中に配置、テンプレートの半分の大きさだけ、上と左にmarginで移動させれば、テンプレートをページの中央に配置することができます。overflowをhiddenに指定しておかないと、縦方向のコンテンツ領域がheightで指定したサイズより大きい場合は、スクロールバーが出てしまいます。

最小限CSSソースは以下のようになります。

CSSコード

div#wrapper {
   position:absolute;
   top:50%;
   left:50%;
   width:700px;
   height:410px;
   overflow:hidden;
   margin:-205px 0 0 -350px;
}

(X)HTMLコード

<div id="wrapper">
   <div id="header"> </div>
   <div id="contents"> </div>
   <div id="footer"> </div>
</div>

2.inline-block要素でテンプレートを上下中央寄せ

この方法は、本来ブロック要素であるdivをインライン要素にしてしまうというちょっとトリッキーな技です。

例えば、2つのコンテンツ(記事領域とメニュー領域)を横並びにして、左右中央寄せにする場合、displayにinline-block(Firefox用には-moz-inline-box;)を指定します。 そうすると「vertical-align:middle;」によって、縦方向のセンタリングが有効になるという仕組みです。

inline-blockはインライン要素なので、勝手にコンテンツが横並び状態になります。

CSSコード

#main {
   display: inline-block;/* Opera Safari用 */
   display:-moz-inline-box;/* Firefox Netscape用 */
   vertical-align:middle;
   width: 100px;
}

#sub {
   display: inline-block;/* Opera Safari用 */
   display:-moz-inline-box;/* Firefox Netscape用 */
   vertical-align: middle;
   width: 100px;
}

/* IE 6 */
* html #main,
* html #sub{
   display:inline;
   zoom:1;
}

/* IE 7 */
*:first-child+html #main,
*:first-child+html #sub{
   display:inline;
   zoom:1;
}

p {
   width: 100px;
}

(X)HTMLコード

<div id="main">
<p>中身</p>
</div><!--
--><div id="sub">
<p>中身</p>
</div>

この方法は、当サイトのコラムで詳しく解説しているので、そちらも参考にしてください。

テーブルタグを使わずにテキストを上下中央揃えする方法 [Cool Web Window]

テーブルを使わずに、div構造でテンプレートを画面の真ん中に寄せる方法です。わかりやすいように最小限のソースしか書いていません。

(X)HTMLコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
</head>
<body>
<div id="temp">
   <div id="header"></div>
   <div id="content"></div>
   <div id="footer"></div>
</div>
</body>
</html>

CSSコード

div#temp {
margin:0 auto;
width:800px;
}

ポイントは、テンプレートを囲むdivのスタイルシートのmarginを「margin:0 auto」にすることと、テンプレートの横幅を指定すること、そしてhtmlのバージョンを指定する(ドキュメントタイプを宣言する)ことです。

例えば、注釈を※をつけて記述するような場合、※マークだけあたかもリストマークのように文章のまとまりからひとつ出ていたほうが、可読性が向上します。text-indentとmargin-leftを組み合わせることにより実現できます。text-indentで※マーク分字上げをし、そうすると全体的に左に1文字分ずれてしまうので、その分margin-leftで位置を右に戻します。

CSSコード

p {
     text-indent: -1em;
     margin-left: 1em;
}

(X)HTMLコード

<p>
※ここは注釈です。ここは注釈です。
</p>

最近のブログ記事