南東風のパソコン関連ブログ

パソコン中心のブログ

ブログに目次を

DIVを見てて、ホームページの目次をコピペしてみた。アドレスは、絶対URLに変更した。幅を900ピクセルに変更した。(もうひとつ追加できるかな)あとでやってみよう。

スタイルシート
/*メニュー*/
#menu{
width:900px;
text-align:center;
background-color:#bdd1e7;
border-top:solid 3px #ceb8ce;
border-bottom:solid 3px #ceb8ce;
}
#menu ul{
margin: 0;
padding: 0px;
font:normal 11pt #fff "ms ゴシック";
list-style-type:none;
text-align:center;
display: block;
width:900px;
height:25px;
background-color:#bdd1e7;
}
#menu li {
margin: 0;
background:333333 url(http://milkysand.com/css/b-menu.jpg);
font:normal 11pt #fff "ms ゴシック";
height: 33px;
width: 100px;
list-style-type: none;
float:left
}
#menu li a {
text-decoration: none;
padding:5px;
background:333333 url(http://milkysand.com/css/b-menu.jpg);
font:bold 11pt #fff "ms ゴシック";
text-align:center;
display: block;
}
#menu li a:link {
font:bold 11pt #fff "ms ゴシック";
background:#333333 url(http://milkysand.com/css/b-menu.jpg);
}
#menu li a:hover {
font:bold 11pt #fff "ms ゴシック";
background:#333333 url(http://milkysand.com/css/b-menu1.jpg);
}
#menu li a:active {
font:bold 11pt #fff "ms ゴシック";
background:#333333 url(http://milkysand.com/css/b-menu2.jpg);
}
#menu a:visited {
font:bold 11pt #fff "ms ゴシック";
background:#333333 url(http://milkysand.com/css/b-menu.jpg);
}
/*サイドバー*/
.sidebar{
margin-top:30px;
float:right;
}
/*コンテンツ*/
#contents{
float:left;
}


上部のHTMLで目次を追加した。結局幅が900pxなので、携帯も追加しました。