テーブルでコーディングはしたくない。
floatだとclearとかめんどくさい。
そんな時に使うのが、
display:table
display:table-cell
CSSでテーブルレイアウトがすごく簡単にできるのを試してみたのでサクっとメモ。
手順はコチラ。
HTML5で作成していますので、IE9以下に対応させるためのコードも入っています。
※このtable-cellはIE6，IE7には未対応なので、floatでIE6，7用のスタイルをあらかじめ作成しておくか
uuAltCSS.jsを利用して対応させることが必要になります。
[html]<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>table-cell</title>
<meta name="keywords" content="table-cell">
<meta name="description" content="table-cell">
<!–[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
<link href="css/style.css" rel="stylesheet" type="text/css">
<!– table-cellをIE6,7で有効にする –>
<script src="js/uuAltCSS.js"></script>
</head>
<body>
<div id="body">
<div id="navigation">navigation</div>
<div id="content">content</div>
<div id="sidebar">sidebar</div>
</div>
</body>
</html>
[/html]
CSSは下記な感じで記載します。
[css]
#body {
width: 100%;
display: table;
}
#navigation, #content, #sidebar {
display: table-cell;
}
#navigation {
width: 200px;
background-color: #FFCC66;
}
#content {
background-color: #CC6633;
}
#sidebar {
width: 200px;
background-color: #FF9966;
}
/* IEにhtml5として各項目をブロック要素と認識させる */
section, nav, article, aside, hgroup, header, footer, figure, figcaption {
display: block;
}
[/css]
という形で組んでみるとIE6でも7でも対応したテーブルレイアウトができます！
CSSがシンプル～！
floatの巻き込み→clear:bothで回避というものも必要なくなります。
スバラシー！！
しかし、またしてもIEですか。。。ことごとく対応してない。ｷｰ！！
jsファイルの作成者様に感謝です！ありがとうございますー！
参考URL：
CSS「display: table」と「display: table-cell」で出来ること
uuAltCSS.js
