←フエルチラシノウラ。トップページへもどる。

【HTML】Tableタグを使わずにスタイルシートでレイアウトする。

HTML stylesheet css tableタグ スタイルシート レイアウト

【HTML】Tableタグを使わずにスタイルシートでレイアウトする。

説明


テーブルタグを使わずにスタイルシートでレイアウトする方法です。
テーブルタグで深い階層をゴリゴリとコーディングするよりも理解しやすいしスマートですね。
下記にありがちなWebページのサンプルを載せておきます。
色は分かりやすいようにわざとキツイ色になってます(笑

サンプル



スタイルシート

* {
margin: 0;
padding: 0;
}
body {
text-align: left;
background-color: black;
}
body div {
text-align: left;
margin: 0 auto;
}
#title {
width: 780px;
height: 100px;
background-color: yellow;
}
h1 {
padding: 20px 12px 0 12px;
font-size: 150%;
}
#container {
width: 780px;
background-color: pink;
}
#menu {
width: 240px;
float: left;
background-color: cyan;
margin-right: 10px;
}
li {
list-style: none;
padding: 8px 12px;
border-top: solid 2px green;
border-bottom: solid 6px red;
}
#main {
width: 530px;
float: left;
background-color: white;
}
#main p {
margin: 0 8px;
line-height: 150%;
}
#footer {
width: 780px;
clear: both;
background-color: teal;
}
#footer p {
margin: 0 12px;
line-height: 150%;
}



サンプルHTML

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>style.css test</title>
<link rel="StyleSheet" type="text/css" href="style.css">
</head>

<body>
<div id="title">
<h1>たいとる</h1>
</div>
<div id="container">
<div id="menu">
<ul>
<li><a href="http://xxxxxxxx">りんく1</a></li>
<li><a href="http://xxxxxxxx">りんく2</a></li>
</ul>
</div>
<div id="main">
<p>どこにでもあるサイト構成。</p>
<p>あああああああああああああああああ。いいいいいいいいいいいいいいい。うううううううううううううううううううううう。ええええええええええええええええええ。
</div>
<div id="footer">
<p>フッター</p>
</div>
</div>
</body>
</html>

http://goodjob.boy.jp/chirashinoura/id/169.html

作成日: 2007-12-07 16:26:12

最終更新日: 2007-12-10 17:13:19

▲このページの上へ