新規ページ作成 2

メニューの設定

HTML

div id="menu"内に各メニュー項目をリスト項目とする番号なしリスト（ul）を作成し
各リスト項目に仮のリンクを挿入する

<div id="menu">
　<ul>
　　<li><a href="">top</a></li>
　　<li><a href="">私達の願い</a></li>
　　　・
　　　・
　　　・
　　<li><a href="">入会案内</a></li>
　　<li><a href="">会則</a></li>
　　<li><a href="">完成品販売</a></li>
　</ul>
</div>

CSS

➀ ulとliのマージンとパディングを初期化する
➁ ulでリストマークを無しにする
➂ liに枠線を指定する
➃ liの幅と間隔を指定して左にフロートする
（800÷7）－(1+1+1)＝111.29
➄ li aで行の高さと高さを同じ値に指定する、表示をblokに中央揃えにする
➅ 下線を消す。背景色を指定する
➆li a：hoverで マウスが当たった時の背景色と文字色を指定する

ul,li{
margin:0;padding:0;
}
ul{
list-style-type:none;
}
li{
border:1px solid #333;　/* 枠線*/
width:111px;  /* リスト項目の幅*/
float:left;　/* 回り込み*/
margin-left:1px;　/* 隣のスト項目との間隔*/
margin-bottom:1px;　/* 下のスト項目との間隔*/
}
li a{
line-height:30px;
height:30px;
text-align:center;　/* 中央に配置*/
display:block;
text-decoration:none;　/* 下線を消す*/
background-color:#c9f4c4;　/* リスト項目の背景色*/
}
li a:hover{
color : #ffffff;　　/* マウスON時のリスト項目の色*/
background-color : #3434c5;　/* マウスON時のリスト項目の背景色*/
}

コンテンツの設定

HTML

➀ テキストを入力しpで括り、idを指定する
➁ 画像とキャプションを挿入し横並べにするためdivで括りクラスを指定する
➂ テキストを入力しpで括り、idを指定する

<div id="contents">
<p id=“center”>絵本の・・・・は「ください。</p>
<div class="img2"><a href=“#”><img alt=“魔女の冒険” width=“390” height="349" src="画像URL" ></a><a href="#">魔女の冒険</a></div>
<div class="img2"><a href=“#"><img alt="動物園" width="390" height="349" src="画像URL" ></a><a href="#">動物園 </a> </div>
<p id="setumei">このホーム・・・・・・・頂いています。</p>
</div>

CSS

➀ 最初のｐを中央揃えにする
➁ 画像の入ったdivの幅を50％に設定し左にフロート、中央揃えにする
➂ 後半のｐ　回り込みを解除してテキストの属性を指定する

p#center{
text-align:center;
}
div.img2{
width:50%;
float:left;
text-align:center;
margin-bottom:10px;
}
div.img2 a{
display:block;
text-decoration:none;
}
p#setumei{
clear:both;