リスト横並びデザイン1 - nicepaper @ ウィキ

横並びデザインを作るのが色々とめんどくさくなってきたので、テンプレート作りします。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;
}

タイトルありリストver1

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;
} 

タイトルありリストver2

タイトルありリストでリスト部分が2行以上にわたってしまう場合にdd部分のインデントを1つ目のliに揃える方法 liタグの中にddが複数ある際の改行処理～インデントを1つ目のddに揃えたい～を参照

まとめ

これらを利用してやってください。

以上