横並びデザインを作るのが色々とめんどくさくなってきたので、テンプレート作りします。8月4日記事
横並びリストイメージ
目次
reset.cssどこからかとってきてください。当ページのCSSのリセットでもいいです。 あとは以下のコードが書いてあるスタイルシート
HTML部
<div id="wrapper1"> <p>タイトルなしリスト</p> <br> <nav id="menulist"> <ul class="clearfix"><!-- ulタグ終わったあとにfloat解除--> <li><a href="#">リスト1</a></li> <li><a href="#">リスト2</a></li> <li><a href="#">リスト3</a></li> <li><a href="#">リスト4</a></li> <li><a href="#">リスト5</a></li> <li class="last"><a href="#">リスト6</a></li> </ul> </nav> <br> <p>ここはclearfixにて解除されている。</p> </div>
CSS部
#menulist1{ margin: 10px auto;/*ここも自由に*/ width:1000px;/*ここも自由に*/ min-height: 50px;/*ここも自由に*/ background: #EEE;/*ここは消す*/ } #menulist ul{ margin: 0px 20px; } #menulist ul li{ float:left; border-left: 1px solid #000;/*左の線の太さと色を変えてもいいよ*/ padding: 0px 10px;/*文字から棒までの太さ*/ } #menulist ul li.last{ border-right: 1px solid #000;/*右の線の太さと色を変えてもいいよ*/ } #menulist ul li a{ color: #000;/*通常の色*/ } #menulist ul li a:hover{ color: #000;/*hoverしたときの色*/ text-decoration:none; } #menulist ul li a:visited{ color: #666;/*一回アクセスしたときの色*/ } .clearfix:after {/*clearfixクラス*/ content: "."; display: block; clear: both; height: 0; visibility: hidden; }
HTML部
<div id="menulist2"> <p>タイトルありリスト</p> <br> <nav id="menulist2"> <dl class="clearfix"><!-- dlタグ終わったあとにfloat解除--> <dt>タイトル</dt> <dd> <ul> <li><a href="#">リスト1</a></li> <li><a href="#">リスト2</a></li> <li><a href="#">リスト3</a></li> <li><a href="#">リスト4</a></li> <li><a href="#">リスト5</a></li> <li class="last"><a href="#">リスト6</a></li> </ul> </dd> </dl> </nav> <br> <p>ここはclearfixにて解除されている。</p> </div>
CSS部
#menulist2{ margin: 10px auto;/*ここも自由に*/ width:1000px;/*ここも自由に*/ min-height: 50px;/*ここも自由に*/ background: #FFC;/*ここは消す*/ } #menulist2 dl dt{ float:left; margin:0px 20px; } #menulist2 ul li{ float:left; border-left: 1px solid #000;/*左の線の太さと色を変えてもいいよ*/ padding: 0px 10px;/*文字から棒までの太さ*/ } #menulist2 ul li.last{ border-right: 1px solid #000;/*右の線の太さと色を変えてもいいよ*/ } #menulist2 ul li a{ color: #000;/*通常の色*/ } #menulist2 ul li a:hover{ color: #000;/*hoverしたときの色*/ text-decoration:none; } #menulist2 ul li a:visited{ color: #666;/*一回アクセスしたときの色*/ } .clearfix:after {/*共通のclearfixクラス*/ content: "."; display: block; clear: both; height: 0; visibility: hidden; }
タイトルありリストでリスト部分が2行以上にわたってしまう場合にdd部分のインデントを1つ目のliに揃える方法
liタグの中にddが複数ある際の改行処理~インデントを1つ目のddに揃えたい~を参照
これらを利用してやってください。
以上