●　中級編－Ⅱ（メニュー・コンテンツ作成）

サイドバーとコンテンツ部分のセルにスタイルを設定する

　サンプルでは、サイドバーとコンテンツとを３列一行の表を作成して、サイドバー部分と余白部分だけ横幅を固定して表示します。
ここではサイドバーの横幅を190ピクセル、余白の大きさを30ピクセルに設定します。

　サイドバー部分とコンテンツ部分に今回はスタイルシート設定を挿入しますので、サンプルのソースをコピー貼り付すると、できあがりです。






MENU　ソースのコピー貼り付け


STYLE HTML
/* サイドバー */
div#sidebar {
width: 166px;
float: left;
margin-bottom: 25px;
}
ul.sidemenu {
border-top: solid 1px #ffffff;
font-size: 0.85em;
margin-top: 10;
margin-left: 12;
margin-right: 12px;
padding-left: 0;
line-height: 0;
}
ul.sidemenu li {
list-style-type: none;
}
ul.sidemenu li a {
display: block;
line-height: 40px;
text-decoration: none;
color: #ffffff;
background-color: #005087;
border-bottom: solid 1px #ffffff;
padding-left: 15px;
}
ul.sidemenu li a:hover {
background-color: #017acd;
}
 <UL class="sidemenu">
<LI><A href="link.html">トップページ</A>
<LI><A href="link.html">あいさつ</A>
<LI><A href="link.html">画像掲示板</A>
<LI><A href="link.html">アルバム</A>
<LI><A href="link.html">リンク集</A>
<LI><A href="link.html">自己紹介</A>
<LI><A href="link.html">問い合わせ</A>
</UL>

コンテンツ　ソースのコピー貼り付け


STYLE HTML
/* コンテンツ */
.content01{
font-size : 17px;
font-family : HG丸ｺﾞｼｯｸM-PRO;
line-height : 25px;
padding-top : 10px;
padding-left : 17px;
padding-right : 17px;
padding-bottom : 17px;
}
h2 {
background-color: #92c9ff;
background-image : url(2dan_img/grad-skyblue.png);
background-repeat: repeat-x;
border: solid 1px #84c2ff;
font-size: 18px;
color: #000000;
line-height: 18px;
padding-left: 6px;
margin-top: 0;
margin-bottom: 0;
}

h3 {
background-color: #ffffff;
background-image : url(2dan_img/maru-skyblue.png);
background-repeat: no-repeat;
background-position: 0px 2px;
font-size: 18px;
line-height: 22px;
padding-left: 26px;
margin-top: 0px;
margin-bottom: 0;
}
<TD class="content01"
valign="top" bgcolor="#ffffff">
<H2 align="left">●　中級編－Ⅱ（メニュー・コンテンツ作成）</H2>
<H3>サイドバーとコンテンツ部分のセルにスタイルを設定する</H3>
<IMG src="2dangumi/2dan_img/block_01.gif" width="350" height="408" border="0" align="right"></TD>

フッター　ソースのコピー貼り付け　

フッターは省略します。

　▲サンプルはこちらです。 　　　　▲ダウンロードはこちら