CSSだけでテーブルタグのようなレイアウトって作れますか？
上に横長一段
その下にボックス（テーブルではなく）を等幅に3個ずつ並べていきたいです。
CSS「だけ」じゃ無理。
CSSはマークアップ言語の付属仕様なので、HTML等のマークアップ言語と組み合わせなきゃ意味が無いですから。
HTML（Transitional）とCSSでテキトーに作ったご希望に沿うようなサンプルは下記↓
メモ帳にでもコピペしてHTMLとして保存すれば、ブラウザで実際の表示が見られます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>無題ドキュメント</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#container {
width: 900px;
}
#header {
height: 50px;
width: 100%;
margin-bottom: 15px;
background: #3CF;
}
#leftBox,
#centerBox,
#rightBox {
width: 290px;
height: 25px;
float: left;
background: #3FF;
margin-bottom: 15px;
}
#leftBox,
#centerBox {
margin-right: 15px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<p>横長一段</p>
</div>
<div id="leftBox">
<p>テーブルじゃないボックス（左）</p>
</div>
<div id="centerBox">
<p>テーブルじゃないボックス（中央）</p>
</div>
<div id="rightBox">
<p>テーブルじゃないボックス（右）</p>
</div>
</div>
</body>
</html>
３個ずついっぱい並べたい場合はこう↓
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>無題ドキュメント</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#container {
width: 900px;
}
#header {
height: 50px;
width: 100%;
margin-bottom: 15px;
background: #3CF;
}
.leftBox,
.centerBox,
.rightBox {
width: 290px;
height: 25px;
float: left;
background: #3FF;
margin-bottom: 15px;
}
.leftBox,
.centerBox {
margin-right: 15px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<p>横長一段</p>
</div>
<div class="leftBox">
<p>テーブルじゃないボックス（左）</p>
</div>
<div class="centerBox">
<p>テーブルじゃないボックス（中央）</p>
</div>
<div class="rightBox">
<p>テーブルじゃないボックス（右）</p>
</div>
<div class="leftBox">
<p>テーブルじゃないボックス（左）</p>
</div>
<div class="centerBox">
<p>テーブルじゃないボックス（中央）</p>
</div>
<div class="rightBox">
<p>テーブルじゃないボックス（右）</p>
</div>
</div>
</body>
</html>
0 件のコメント:
コメントを投稿