いや～
Ｄｗさん
テンプレート豊富ですな～
一から書いたら
でら時間かかるのを
一気だすよ
いっき
(笑
てか
お仕事で、使っている人からしたら
あったりまえだの
前田隆だわな
(笑
んで、コメントを読んでいるだけで
勉強に、なるし
うん
わかったふりを
してたとことか (笑
「ああ、そうなんだ」
とか、教えてもらってるよ
うん
Ｄｗ先生って、感じ♪
うん
ちあきなおみに、
テンプレートで、ヘッダーとフッターそして、サイドバーが自由な感じのを選択して
クリックすると・・・
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>無題ドキュメント</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
font: 100% "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
background: #666666;
margin: 0; /* 複数の異なるブラウザの初期設定値に対応するため、body エレメントのマージンと余白を 0 にすることをお勧めします */
padding: 0;
text-align: center; /* これにより、IE 5* ブラウザではコンテナが中央揃えになります。そして、テキストは、#container セレクタの初期設定である左揃えに設定されます */
color: #000000;
}
.twoColHybRtHdr #container {
width: 80%; /* これにより、幅がブラウザの幅の 80% のコンテナが設定されます */
background: #FFFFFF;
margin: 0 auto; /* 自動マージン（幅と連動）により、ページが中央揃えになります */
border: 1px solid #000000;
text-align: left; /* この設定は body エレメントの text-align: center より優先されます。 */
}
.twoColHybRtHdr #header {
background: #DDDDDD;
padding: 0 10px; /* この余白は、その下に表示される div のエレメントの左揃えと一致します。#header でテキストの代わりにイメージが使用される場合は、必要に応じて、余白を削除してください。 */
}
.twoColHybRtHdr #header h1 {
margin: 0; /* #header div の最後のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間の原因不明のスペース）が回避されます。div の周囲に境界線が適用されている場合は、境界線によってマージンの相殺が回避されるため、この操作は不要です */
padding: 10px 0; /* マージンの代わりに余白を使用して、エレメントを div の端に接触しない位置に維持することができます */
}
/* #sidebar1 に関するヒント：
1. 単位は相対単位であるため、サイドバーで余白を使用することは回避してください。標準に準拠したブラウザでは、余白は全体の幅に追加されるため、実際の幅が不特定の幅になります。
2. サイドバーの値の単位として em が使用されているので、その幅が初期設定のテキストサイズに応じて変化することに注意してください。
3. 「.twoColHybRtHdr #sidebar1 p」ルールで見られるように、div の端と div に含まれるエレメントの間のスペースは、エレメントに左マージンと右マージンを適用することによって設定できます。
*/
.twoColHybRtHdr #sidebar1 {
float: right;
width: 12em; /* このエレメントはフローティングエレメントであるため、幅が設定されている必要があります */
background: #EBEBEB; /* 背景色は、列内のコンテンツの長さにわたって表示されます */
padding: 15px 0; /* 上余白と下余白により、この div 内に視覚的なスペースが設定されます */
}
.twoColHybRtHdr #sidebar1 h3, .twoColHybRtHdr #sidebar1 p {
margin-left: 10px; /* サイドバーに配置されるすべてのエレメントに左マージンと右マージンが設定されている必要があります */
margin-right: 10px;
}
/* #mainContent に関するヒント：
1. #mainContent と #sidebar1 の間のスペースは、#mainContent div の右マージンによって設定されます。#sidebar1 div に含まれるコンテンツの量に関係なく、#sidebar1 div のスペースは維持されます。#sidebar1 のコンテンツが終了した後のスペースに #mainContent div のテキストを挿入するには、この右マージンを削除します。
2. #mainContent div の幅より広いエレメントが #mainContent div 内に配置されると、フローティングエレメントの落下（フローティング状態ではない #mainContent 領域がサイドバーの下に配置されること）が発生する可能性があります。ハイブリッドレイアウトの場合（全体の幅の単位はパーセント、サイドバーの単位は em）、使用可能な幅を正確に計算できない場合があります。ユーザーのテキストサイズが平均よりも大きい場合、#sidebar1 div が広くなるため、#mainContent div のスペースが狭くなります。クライアントが Contribute を使用してコンテンツを追加する予定である場合は、この制限に注意してください。
3. 下の Internet Explorer の条件分岐コメントでは、#mainContent に「hasLayout」を設定するのにズームプロパティが使用されます。これにより、いくつかの IE 固有のバグを回避できます。
*/
.twoColHybRtHdr #mainContent {
margin: 0 13em 0 10px; /* 左マージンの値は、ヘッダーおよびフッターの値と同じです。これにより、ドキュメントの左側の整列が設定されます。 */
}
.twoColHybRtHdr #footer {
padding: 0 10px; /* この余白は、その上に表示される div のエレメントの左揃えと一致します。 */
background:#DDDDDD;
}
.twoColHybRtHdr #footer p {
margin: 0; /* フッターの最初のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間のスペース）が回避されます */
padding: 10px 0; /* このエレメントの余白により、マージンの相殺を発生させることなく、マージンの効果とまったく同じように、スペースが設定されます */
}
/* 再使用できる各種クラス */
.fltrt { /* このクラスは、ページ上でフローティングエレメントを右側に配置するのに使用できます。プローティングエレメントは、ページ上でその横に配置されるエレメントの前に配置される必要があります。 */
float: right;
margin-left: 8px;
}
.fltlft { /* このクラスは、ページ上でフローティングエレメントを左側に配置するのに使用できます */
float: left;
margin-right: 8px;
}
.clearfloat { /* このクラスは、div またはブレークエレメントに適用される必要があり、また、フローティングエレメントが完全に含まれているコンテナの末尾の直前にある最後のエレメントである必要があります */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style><!--[if IE]>
<style type="text/css">
/* この条件分岐コメントにすべてのバージョンの IE を対象とした css のフィックスを配置します */
.twoColHybRtHdr #sidebar1 { padding-top: 30px; }
.twoColHybRtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* 上述の専用のズームプロパティにより、いくつかのバグを回避するのに使用される hasLayout が IE に対して設定されます */
</style>
<![endif]--></head>
<body class="twoColHybRtHdr">
<div id="container">
<div id="header">
<h1>見出し</h1>
<!-- end #header --></div>
<div id="sidebar1">
<h3>sidebar1 コンテンツ</h3>
<p>この div の背景色は、コンテンツの長さにわたってのみ表示されます。代わりに境界線を使用するには、#mainContent div の右側に常に #sidebar1 div より多くのコンテンツが含まれる場合は、#mainContent div の右側に境界線を配置します。 </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<!-- end #sidebar1 --></div>
<div id="mainContent">
<h1> メインコンテンツ </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h2>H2 レベルの見出し </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent --></div>
<!-- このクリアリングエレメントは、#container div に強制的にすべての子フローティングエレメントが含まれるようにするため、#mainContent div の直後に配置される必要があります -->
<br class="clearfloat" />
<div id="footer">
<p>フッター</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
うん
スタイルが、埋め込まれたＨＴＭＬだけど
こんな感じからスタートかな
うん
これから
この子を自分色に、染めちゃうよ～
てか
Ｄｗ先生よろしくね～
(笑