divとcssで骨組みしたほうが
圧倒的にシンプルで使いやすい。
今までやろうやろうと思いながらついついtableタグになっちゃってたけど
これからはdivとcssベースで作るぞ！
参考サイトは以下
CSSレイアウトは<div>で作る
CSSで中央配置（センターリング）する方法
メモ書き
<html>
<head>
<title>タイトル</title>
<style>
body {
text-align: center;
}* {
padding : 0px ;
margin : 0px ;
}#site-box {
width : 800px;
text-align: left;
border: 1px solid #FF9900;
margin : 5px auto
}#a-box {
border-bottom: 1px solid #FF9900;
background-image: url('img/header.gif');
padding: 20px;
}#b-box {
float: left;
width: 380px;
}#c-box {
float: right;
width: 380px;
font-size: 12px;
}#d-box {
clear: both;
width: 800px;
background-color: #FFFF99;
font-size: 12px;
padding: 10px;
text-align: center;
}h1 {
font-size: 22px;
}h2 {
font-size: 17px;
background-color: #FFFF99;
padding: 10px;
margin: 5px;
}h3 {
font-size: 15px;
color:#FF9900;
margin: 5px;
}p {
font-size: 14px;
margin: 30px;
}ul {
padding : 10px 5px 10px 30px;
}.category {
font-size: 14px;
color: #FFFFFF;
background-color: #FF9900;
padding: 5px;
margin: 5px;
}</style>
<link rel="stylesheet" type="text/css" href="style.css" /></head>
<body>
<div id="site-box">
<div id="a-box">
<h1>h1 サイトタイトル</h1>
ホームページの説明文 <br />
テキスト テキスト テキスト テキスト テキスト テキスト</div>
<div id="b-box">
<h2>h2 ページタイトル</h2>
<p>サイト全体を真ん中にする。
<BR>
body {
text-align: center;
}<BR>
<BR>文字は左にする
<BR>
#site-box {
width : 800px;
text-align: left;
border: 1px solid #FF9900;
margin : 5px auto
}
<BR></p>
<h3>h3 見出し</h3>
<p>テキスト （省略）</p><h3>h3 見出し</h3>
<p>テキスト （省略）</p></div>
<div id="c-box">
<div class="category">カテゴリー１</div>
<ul>
<li>ページ１</li>
<li>ページ２</li>
<li>ページ３</li>
</ul><div class="category">カテゴリー２</div>
<ul>
<li>ページ４</li>
<li>ページ５</li>
<li>ページ６</li>
</ul></div>
<div id="d-box">
copyright (c) oooo.com All right reserved.
</div>
</div>
</body>
</html>
0 コメント:
コメントを投稿