「リスト横並びデザイン1」の編集履歴（バックアップ）一覧はこちら

「リスト横並びデザイン1」(2015/08/06 (木) 09:17:54) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

横並びデザインを作るのが色々とめんどくさくなってきたので、テンプレート作りします。8月4日記事
~
~
横並びリストイメージ
#image(width=600,listmenu.png)
~
~
目次
#contents
~
~
----
~
*読み込むもの
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に揃えたい～]]を参照
~
~
*まとめ
これらを利用してやってください。
~
~
以上

横並びデザインを作るのが色々とめんどくさくなってきたので、テンプレート作りします。8月4日記事
~
~
横並びリストイメージ
#image(width=600,listmenu.png)
~
~
目次
#contents
~
~
----
~
*読み込むもの
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に揃えたい～]]を参照
~
~
*まとめ
これらを利用してやってください。
~
~
以上