背景色を交互にしたいのですが・・・
- 背景色を交互に設定したい場合、HTMLやCSSを使用して背景色を指定し、奇数行と偶数行で異なる色を設定します。
- 具体的には、リスト要素などのテーブル以外の要素に適用する場合、nth-childセレクタを使用して奇数行と偶数行を指定します。
- ただし、テーブルの場合はCSSのnth-childセレクタではうまく動作しない場合があるため、代わりにnth-of-typeセレクタを使用する必要があります。
- ベストアンサー
背景色を交互にしたいのですが・・・
お世話になります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>index03のページ</title> <style type="text/css"> body { background-color: #FFFFCE; background-image: url(); } .list01-odd { background-color: #FFEEEE; } .list02-odd { background-color: #EEFFEE; } a {color: #cc6600 } ul,li {padding:0; margin:0; line-height:1.3; font-size: 14px; font-weight: italic; } li a {text-decoration: none;} .blockAA {width:740px; background:#FFFCCC;} .blockAA ul {width:740px;} .blockAA ul li {float:left; width:340px; list-style:none; padding-left:30px; } .unnamed1 { font-size: 16px; color: #FF0000; font-style: italic; font-weight: normal; } .style153 {font-size: 16px; color: #9CCE39; font-weight: bold; } .style132 /* clearfix */ .blockAA ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} /* for ie */ * html .blockAA ul {display:inline-table;} /* hides from ie-mac \*/ .blockAA ul {height:1%;} /* end hide from ie-mac */ </style> </head> <body> <br /> <table width="746" height="26" border="1" bordercolor="#9CCE39" bordercolorlight="#9CCE39" bordercolordark="#9CCE39" bgcolor="#9CCE39"> </table> <br /> </script> <span class="unnamed1">（あ行）</span> <div class="blockAA"> <ul class="hoge"> <li class="list01-odd"><a href="A073.htm">あああ</a></li> <li class="list01-odd"><a href="A017.htm">いいい</a></li> <li><a href="A069.htm">ううう</a></li> <li><a href="A043.htm">えええ</a></li> <li class="list01-odd"><a href="A080.htm">おおお</a></li> <li class="list01-odd"><a href="A077.htm">かかか</a></li> （省略部分があります） 上記において、例えば「ううう」を削除した場合、「えええ」の文字列が背景色といっしょに移動するのですが、この際、「えええ」の文字列のみを移動させたいのです（つまり、背景色は固定させたい） お知恵を拝借できれば幸いです。 よろしくお願いいたします。
- yamyamya-m
- お礼率49% (78/158)
- HTML
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
yyr446です。 <script>を<head>に配置するのなら、 先頭行の (function(){ を window.onload = function(){ に変えて、最終行の })();</script> も }</script> に変えてください。それだけでうまくいくはずなのですが。
その他の回答 (3)
- yuu_x
- ベストアンサー率52% (106/202)
CSS3 対応ブラウザなら(Firefox3.1+, Safari3.1+, Chrome, Opera) li:nth-child(odd) { background-color : #FFEEEE; } li:nth-child(even) { background-color : #EEFFEE; } IE 7以前 なら ol li { background-color : expression( this.value % 2 ? '#FFEEEE' : '#EEFFEE' ); } # ol に囲まれた li にのみ有効です。 # IE8 から expression のサポートを取りやめしまっているので、IE8以降 ではどちらの方法も使えません。 なるべく多くのブラウザでということでしたら、結局 li.even, li.odd クラスを作って地味に手書きしかないと思います。 ================================================================ # ちなみに <html> 要素直下に置けるのは、<body>、<head>、<frameset>のみで、<script>要素をおくことはできません。置くなら、</body>の前。 # class属性（className）は、スペース区切りで複数指定される可能性があります。その場合、== では引っかからない。= で代入すると、もともとつけられていたクラスを消してしまいます。
- yyr446
- ベストアンサー率65% (870/1330)
サンプルです。 "hoge"クラスの<ul>を対象にしています。 下記を</body>の下につけておけば、よろしいかと <script type="text/javascript"> (function(){ var ul_elms =document.getElementsByTagName("UL"); for(var i=0;i<ul_elms.length;i++){ if(ul_elms[i].className =="hoge"){ var count=0; var elment=ul_elms[i].firstChild; while(elment){ if(elment.tagName=="LI"){ if(count>1){ elment.className ="list01-evn"; count=(count>2)?0:3; }else{ elment.className ="list01-odd"; count++; } } elment=elment.nextSibling; } } } })(); </script>
補足
何度もご回答いただき、ありがとうございます。 下記のようにやってみたのですが・・・。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>index03のページ</title> <style type="text/css"> body {background-color: #FFFFCE; background-image: url();} .list01-odd {background-color: #FFEEEE;} .list02-odd {background-color: #EEFFEE;} a {color: #cc6600} ul,li {padding:0;margin:0;line-height:1.3;font-size: 14px; font-weight: italic;} li a {text-decoration: none;} .blockAA {width:740px;background:#FFFCCC;} .blockAA ul {width:740px;} .blockAA ul li {float:left;width:340px;list-style:none;padding-left:30px;} .unnamed1 {font-size: 16px;color: #FF0000;font-style: italic;font-weight: normal;} .style153 {font-size: 16px; color: #9CCE39; font-weight: bold; } .style132 /* clearfix */ .blockAA ul:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} /* for ie */ * html .blockAA ul {display:inline-table;} /* hides from ie-mac \*/ .blockAA ul {height:1%;} /* end hide from ie-mac */ </style> <script type="text/javascript"> (function(){ var ul_elms =document.getElementsByTagName("UL"); for(var i=0;i<ul_elms.length;i++){ if(ul_elms[i].className =="hoge"){ var count=0; var elment=ul_elms[i].firstChild; while(elment){ if(elment.tagName=="LI"){ if(count>1){ elment.className ="list01-evn"; count=(count>2)?0:3; }else{ elment.className ="list01-odd"; count++; } } elment=elment.nextSibling; } } } })(); </script> </head> <body> <br /> <table width="746" height="26" border="1" bordercolor="#9CCE39" bordercolorlight="#9CCE39" bordercolordark="#9CCE39" bgcolor="#9CCE39"> <tr> <td width="736" height="20" align="left" valign="middle" background="color01.gif"> <span class="style153">■</span> <span class="style153">ーー業</span> <span class="style153">■</span></td> </tr> </table> <br /> <span class="unnamed1">（あ行）</span> <div class="blockAA"> <ul class="hoge"> <li class="list01-odd"><a href="A073.htm">・あああ</a></li> <li class="list01-odd"><a href="A017.htm">・いいい</a></li> <li class="list01-even"><a href="A069.htm">・ううう</a></li> <li class="list01-even"><a href="A043.htm">・えええ</a></li> <li class="list01-odd"><a href="A080.htm">・おおお</a></li> <li class="list01-odd"><a href="A077.htm">・かかか</a></li> </ul> とやってみたのですが、うまくいきません。 お忙しいかとは思いますが、添削していただければ幸いです。 どうぞよろしくお願いいたします。
- yyr446
- ベストアンサー率65% (870/1330)
このソースを見る限り、li要素を1行に2こづつ配置して、偶数行のみ list01-oddクラスを最初から静的に指定していますね。 li要素を1個削除すれば、その行内のli要素がづれるだけで、class指定を 直さない限り、背景色はかわりません。 CSSとhtmlだけでも工夫すれば、出来るかも知れませんが、よいアイデアがでません。私ならjavascriptでやります。 対象ulを取得して、子li要素をfirstchirdからnextSiblingで順次参照し て、2個毎に背景色をセットしていく、処理をページロード時に実行させます。
お礼
回答いただき、ありがとうございます。 JavaScriptでやれれば一番いいのですが、当方まったくの初心者のため、苦戦中です＞＜ もしお時間に余裕がありましたら、もう少し詳しくご教授いただけたら幸いです。 どうぞよろしくお願いいたします。
関連するQ&A
- ページを開いた直後のサブメニューを非表示
現在、個人で利用するサイトをJqueryを導入してリニューアルしようと計画しているのですが、 添付画像のように新しいページを開いた直後は、左の青いサブメニューが必ず表示されてしまいます。 ("#menu ul li ul:first").hide();を入れると 消えることには消えたのですが、 それ以後サブメニューが表示されなくなってしまいました。 どなたかお分かりの方、ご助言をお願い致します。 参考までに以下にHTMLとＣＳＳのコードを記載します。 (HTML) <html> <head> </head> <body> <div id="content"> <div id="menuWrapper" class="menuWrapper bg1"> <ul class="menu" id="menu"> <li class="bg1" style="background-position:0 0;"> <a id="bg1" href="#">Our Passion</a> <ul class="sub1" style="background-position:0 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> <li class="bg1" style="background-position:-266px 0px;"> <a id="bg2" href="#">Our Brands</a> <ul class="sub2" style="background-position:-266px 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> <li class="last bg1" style="background-position:-532px 0px;"> <a id="bg3" href="#">Contact</a> <ul class="sub3" style="background-position:-266px 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> </ul> </div> </div> </body> </html> (CSS) .menuWrapper{ font-family: "Trebuchet MS", Arial, sans-serif; font-size: 15px; font-style: normal; font-weight: normal; text-transform:uppercase; letter-spacing: normal; line-height: 1.45em; position:relative; margin:20px auto; height:542px; width:797px; background-position:0 0; background-repeat:no-repeat; background-color:transparent; } ul.menu{ list-style:none; width:797px; } ul.menu > li{ float:left; width:265px; height:542px; border-right:1px solid #777; background-repeat:no-repeat; background-color:transparent; } ul.menu > li.last{ border:none; } .bg1{ background-image: url(../images/1.jpg); } .bg2{ background-image: url(../images/2.jpg); } .bg3{ background-image: url(../images/3.jpg); } ul.menu > li > a{ float:left; width:265px; height:50px; margin-top:450px; text-align:center; line-height:50px; color:#ddd; background-color:#333; letter-spacing:1px; cursor:pointer; text-decoration:none; text-shadow:0px 0px 1px #fff; } ul.menu > li ul{ list-style:none; float:left; margin-top:-180px; width:100%; height:110px; padding-top:20px; background-repeat:no-repeat; background-color:transparent; } ul.menu > li ul li{ display:none; } ul.menu > li ul.sub1{ background-image:url(../images/bg1sub.png); } ul.menu > li ul.sub2{ background-image:url(../images/bg2sub.png); } ul.menu > li ul.sub3{ background-image:url(../images/bg3sub.png); } ul.menu > li ul li a{ color:#fff; text-decoration:none; line-height:30px; margin-left:20px; text-shadow:1px 1px 1px #444; font-size:11px; } ul.menu > li ul.sub1 li{ display:block; } ul.menu > li ul li a:hover{ border-bottom:1px dotted #fff; }
- ベストアンサー
- JavaScript
- Dreamweaverでリストを作成するとボックスからずれてしまいます
DreamweaverCS3を使用してサイトを作成している初心者です。 AP divで作ったボックスの中にリストを作成したのですが、 何故か文字の部分がボックスから大幅にずれてしまいます。 CSS記述↓ #apDiv1 { position:absolute; left:57px; top:82px; width:150px; height:143px; z-index:12; background-color: #FFFFFF; } #apDiv1 li { list-style-type: none; background-color: #CCCCCC; color: #333333; display: block; width: 135px; padding-bottom: 4px; padding-top: 4px; margin-bottom: 1px; margin-left: 0px; margin-top: 0px; padding-left: 15px; } #apDiv1 li a:hover { background-color:#999999 } <body>内です↓ <div id="apDiv1"> <ul> <li class="style4"><a href="http://oshiete.goo.ne.jp/">あああ</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">いいい</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">ううう</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">えええ</a></li> </ul> </div> どうしたらボックスにピッタリ合わせる事ができるのでしょうか。 どうぞ宜しくお願い致します。
- ベストアンサー
- グラフィックソフト
- 背景色をAB,ACというように設定するには
お世話になります <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>index03のページ</title> <style type="text/css"> body { background-color: #FFFFCE; background-image: url(); } .list01-odd { background-color: #FFCCFF; } .list01-even{ background-color: #EEFFEE; } .list02-odd { background-color: #FFD5AA; } .list02-even{ background-color: #EEFFEE; } a {color: #cc6600 } ul,li {padding:0; margin:0; line-height:1.3; font-size: 14px; font-weight: italic; } li a {text-decoration: none;} .blockAA {width:740px; background:#FFFCCC;} .blockAA ul {width:740px;} .blockAA ul li {float:left; width:340px; list-style:none; padding-left:30px; } .unnamed1 { font-size: 16px; color: #FF0000; font-style: italic; font-weight: normal; } .style153 {font-size: 16px; color: #9CCE39; font-weight: bold; } .style132 /* clearfix */ .blockAA ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} /* for ie */ * html .blockAA ul {display:inline-table;} /* hides from ie-mac \*/ .blockAA ul {height:1%;} /* end hide from ie-mac */ </style> <script type="text/javascript"> window.onload=function(){ var ul_elms =document.getElementsByTagName("UL"); for(var i=0;i<ul_elms.length;i++){ if(ul_elms[i].className =="hoge1"){ var count=0; var elment=ul_elms[i].firstChild; while(elment){ if(elment.tagName=="LI"){ if(count>1){ elment.className ="list01-evn"; count=(count>2)?0:3; }else{ elment.className ="list01-odd"; count++; } } elment=elment.nextSibling; } } } } window.onload=function(){ var ul_elms =document.getElementsByTagName("UL"); for(var i=0;i<ul_elms.length;i++){ if(ul_elms[i].className =="hoge2"){ var count=0; var elment=ul_elms[i].firstChild; while(elment){ if(elment.tagName=="LI"){ if(count>1){ elment.className ="list02-evn"; count=(count>2)?0:3; }else{ elment.className ="list02-odd"; count++; } } elment=elment.nextSibling; } } } } </script> </head> わかりにくくてすみません。 list01,list02と、違う色の組み合わせで背景色を交互につけたいのですが、このやり方ではうまくいきません。 （例 list01では白、ピンク、list02では白、茶色というように） いい方法をご教授願えないでしょうか。 よろしくお願いします。
- 締切済み
- JavaScript
- 背景色について
お世話になります。 以下をご参照ください <style type="text/css"> body { background-color: #FFFFCE; background-image: url(); } .even{background-color:#FFCCFF;} .even_2{background-color:#FF0000;} a {color: #cc6600 } ul,li {padding:0; margin:0; line-height:1.3; font-size: 14px; font-weight: italic; } li a {text-decoration: none;} .blockAA {width:740px; background:#FFFCCC;} .blockAA ul {width:740px;} .blockAA ul li {float:left; width:340px; list-style:inside; padding-left:30px; } .unnamed1 { font-size: 16px; color: #FF0000; font-style: italic; font-weight: normal; } .style153 {font-size: 16px; color: #9CCE39; font-weight: bold; } /* clearfix */ .blockAA ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} /* for ie */ * html .blockAA ul {display:inline-table;} /* hides from ie-mac \*/ .blockAA ul {height:1%;} /* end hide from ie-mac */ </style> <script type="text/javascript"> <!-- window.onload=function(){ var uls=document.getElementsByTagName("ul"); for(var i=0;i<uls.length;i++) if(uls[i].className=="hoge") { var lis=uls[i].getElementsByTagName("li"); for(var j=0;j<lis.length;j++) if(j%4-j%2) lis[j].className='even'; } } // --> </script> 上記のやりかたでいくと、背景色が半分に切れてしまうところがでできてしまうのです（添付画像参照のほど） これを途切れないようにするにはどうしたらよいでしょうか？ どうぞよろしくお願いします。
- 締切済み
- HTML
- CSSのmarginが反映されません
HPを製作中メニューページを縞々のデザインにしようと下のようなCSSで製作をしているのですが、どうしても左に空白が出来てしまいます。 marginは0にしてあるのですが、どこか間違って居る所があるのでしょうか…自分で見直してもさっぱりわからないんです；； ::::CSS:::: #body{ text-align:center; font-family: 'HGS創英角ポップ体'; color:#5d5c70; width:100%; float:left; padding:180px 0px 0px 0px ; margin:0px; font-size:13px; background: #000000; } #body a{ width:100%; color:#5a5d73; } #body a:hover{ color:#7c7f95; } ul.list li { margin:0; padding:8px 0px 8px 0px; list-style: none; width:100%; } ul.list li.1 { background: #ffb6c1; } ul.list li.2 { background: #ffabbb; }ul.list li.3 { background: #ffa0b7; } ul.list li.4 { background: #ff95b4; } ul.list li.5 { background: #ff8ab3; } ul.list li.6 { background: #ff7fb2; } }ul.list li.7 { background: #ff74b2; } ul.list li.8 { background: #ff69b4; } ::::HTML:::: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <link rel="stylesheet" href="style.css" type="text/css" media="all"> <title>NO-NAME</title> </head> <body id="body" style="overflow:hidden;"> <ul class="list"> <li class="1"><a href="top" Target="right">TOP</a></li> <li class="2"><a href="about" Target="right">ABOUT</a></li> <li class="3"><a href="main" Target="right">MAIN</a></li> <li class="4"><a href="obi.jp/" Target="right">BLOG</a></li> <li class="5"><a href="nu0/" Target="right">MEMO</a></li> <li class="6"><a href="off" Target="right">OFF</a></li> <li class="7"><a href="bkm" Target="right">BKM</a></li> <li class="8"><a href="8797" Target="right">INDEX</a></li></ul> </div> </body> </html>
- 締切済み
- HTML
- リストを全体的に右寄せにしたい。
リストを横並びにしました。 これを大きいdivで囲んだ中の右寄せにするにはどうしたらよいのでしょうか。 #ex { width: 100%; background-color: #66CCFF; height: 28px; } #ex ul { list-style: none; } #ex li { margin: 0px; padding: 5px 0px 5px 30px; list-style: none; float: left; background: url(***.gif) no-repeat 10px 0.5em; } <div id="ex"> <ul> <li><a href="#">リスト</a></li> <li><a href="#">リスト</a></li> </ul> </div>
- ベストアンサー
- HTML
- IEでCSSによる背景画像の高さが伸びる原因は？
2枚の画像で、リンクを行おうとした場合、 div内にh2とulでリンクを行っています。 ところが、高さ（hight）を全てに指定しているにも関わらず、 divが引き伸ばされて、background-imageの不要な部分まで出てきてしまいます。 borderを入れると全体を挟んでいるDIVが何かによって引き伸ばされていますが、なぜIEだと引き伸ばされているのでしょうか？ FIREFOXだと綺麗に表示されます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> <style> <!-- * { margin:0; padding:0; } h2,ul { text-indent:-9999px; list-style:none; } h2 a { width:175px; height:28px; display:block; } ul a { display:block; width:175px; height:24px; } ul li { padding:0; margin:0; } .float_right { float:right; } .mgn_btm7 { margin-bottom:7px; } div#NAVIBAR { width:175px; margin-top:43px; height:398px; background-image:url(image/test-a.gif); background-repeat:no-repeat; border:1px #FF0000 solid; } h2 a:hover { background-image:url(image/test.gif); background-position:0 0; background-repeat:no-repeat; height:23px; } ul a:hover { background-image:url(image/test.gif); background-repeat:no-repeat; height:23px; } ul a#E:hover { background-position:0 -28px; } ul a#F:hover { background-position:0 -52px; } ul a#G:hover { background-position:0 -76px; } ul a#H:hover { background-position:0 -100px; } ul a#I:hover { background-position:0 -124px; } ul a#J:hover { background-position:0 -155px; } ul a#K:hover { background-position:0 -179px; } ul a#L:hover { background-position:0 -203px; } ul a#M:hover { background-position:0 -227px; } ul a#N:hover { background-position:0 -251px; } ul a#O:hover { background-position:0 -275px; } ul a#P:hover { background-position:0 -299px; } ul a#Q:hover { background-position:0 -323px; } ul a#R:hover { background-position:0 -347px; } ul a#S:hover { background-position:0 -371px; } --> </style> </head> <body> <div id="NAVIBAR" class="float_right"> <h2><a href="#">タイトル</a></h2> <ul class="mgn_btm4"> <li><a href="#" id="E">ああああああ</a></li> <li><a href="#" id="F">いいいいいい</a></li> <li><a href="#" id="G">うううううう</a></li> <li><a href="#" id="H">ええええええ</a></li> <li class="mgn_btm7"><a href="#" id="I">おおおおおおお</a></li> <li><a href="#" id="J">かかかかかか</a></li> <li><a href="#" id="K">きききききき</a></li> <li><a href="#" id="L">くくくくくく</a></li> <li><a href="#" id="M">けけけけけけ</a></li> <li><a href="#" id="N">ここここここ</a></li> <li><a href="#" id="O">ささささささ</a></li> <li><a href="#" id="P">しししししし</a></li> <li><a href="#" id="Q">すすすすすす</a></li> <li><a href="#" id="R">せせせせせせ</a></li> <li><a href="#" id="S">そそそそそそ</a></li> </ul> <hr> </div> </body> </html>
- ベストアンサー
- HTML
- 背景色を行ごとに変えるには？
お世話さまです。 以下において、 <style type="text/css"> ul,li {padding:0; margin:0; line-height:1.3;} .blockAA {width:740px;} .blockAA ul {width:740px;} .blockAA ul li {float:left;width:340px;list-style:inside;padding-left:30px;} /* clearfix */ .blockAA ul:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} /* for ie */ * html .blockAA ul {display:inline-table;} /* hides from ie-mac \*/ .blockAA ul {height:1%;} /* end hide from ie-mac */ </style> </head> <body> </body> </html> <div class="blockAA"> <ul> <li><a href="#">あああ</a></li> <li><a href="#">いいい</a></li> <li><a href="#">えええ</a></li> <li><a href="#">おおお</a></li> <li><a href="#">かかか</a></li> <li><a href="#">ききき</a></li> <li><a href="#">くくく</a></li> <li><a href="#">けけけ</a></li> <li><a href="#">こここ</a></li> </ul> </div> ここで、「あああ」「いいい」行と、 「えええ」「おおお」行の色を、交互に変えたいのですが、どのようにすればよいでしょうか？ ご回答よろしくお願いいたします。
- ベストアンサー
- HTML
- 縦並びメニューの枠線が重ならない
いつもこちらではお世話になり、ありがとうございます。 ｃｓｓのli:hoverを使ってサブメニューを表示させようとしていますが、 縦並びのサブメニューの枠線が重なってくれません。 どこが間違えているのでしょうか。 ご指摘をお願いいたします。 （素人ですので、他にもつっこみどころがかなりあると思います。 すみません（汗）） 【html】 <ul class="menu"> <li><a href="menu1.html" >メニュー１</a></li> <li><a href="menu2.html">メニュー２</a> <ul> <li><a href="submenu1.html">サブメニュー１</a></li> <li><a href="submenu2.html">サブメニュー２</a></li> </ul> </li> <li><a href="menu3.html" >メニュー３</a></li> <li><a href="menu4.html" >メニュー４</a></li> </ul> 【css】 ul.menu { margin: 0px; padding:0; list-style-type : none; } ul.menu li { margin:0; float:left; width: 107px; line-height: 43px; } ul.menu li a{ display:block; text-align:center; text-decoration: none; background-image: url(images/navi_b.png); background-repeat: no-repeat; color: #202020; font-family: "メイリオ"; font-size: 11px; } ul.menu li a:hover{ background-image: url(images/navi_r.png); } ul.menu li ul{ display: none; position: absolute; top: 165px; left: 210px; list-style-type : none; background-image: none; } ul.menu li:hover ul{ display: block; } ul.menu li ul li{ clear: left; width: 106px; line-height: 35px; border: 1px #989590 solid; border-collapse: collapse; } ul.menu li ul li a{ background: none; background-color:#B28872; color:#ffffff; } ul.menu li ul li a:hover{ background: none; background-color: #643E3E; color:#ffffff; } よろしくお願いします。
- ベストアンサー
- HTML
- CSS+HTMLだけで画像を使わず、角丸タブメニューを作りたい
職場でネットショップのWEB管理をしているものですが、サイト上のヘッダーに画像を使わずCSS+HTMLだけで角丸タブメニューっぽいものを作りたいのですが、なんせCSS初心のためどこをどう指定すれば画像なしの角丸タブメニューっぽくなるのかわかりません。できたら各メニューの下段にもサブメニューリンクを追加したいのですが・・・ どうか良きアドバイスよろしくお願いします。 感じとしてはここのサイトっぽいタブメニューができればと・・・ CSS <style type="text/css"> <!-- #demo-container{padding:2px 2px 0 60px;margin:0 0 15px 0;background:#67A897;width:870px;} ul#simple-menu{list-style- type:none;width:100%;position:relative;height:27px;font- family:"inpact",Arial,sans-serif;font-size:13px;font- weight:bold;margin:0;padding:11px 0 0 0;} ul#simple-menu li{display:block;float:left;margin:0 0 0 9px;height:27px;} ul#simple-menu li.left{margin:0;} ul#simple-menu li a{display:block;float:left;color:#fff; background:#4A6867;line-height:27px;text-decoration:none; padding:0 17px 0 18px;height:27px;} ul#simple-menu li a.right{padding-right:19px;} ul#simple-menu li a:hover{color:#;background:#708090;} ul#simple-menu li a.current{color:#708090;background:#fff;} ul#simple-menu li a.current:hover{color:#9370DB;background:#fff;} --> </style> HTML <div id="demo-container"> <ul id="simple-menu"> <li><a href="#" title="MENU1" class="current">MENU1</a></li> <li><a href="#" title="MENU2">MENU2</a></li> <li><a href="#" title="MENU3">MENU3</a></li> <li><a href="#" title="MENU4">NENU4</a></li> <li><a href="#" title="NENU5">NENU5</a></li> <li><a href="#" title="NENU6">NENU6</a></li> </ul> </div>
- ベストアンサー
- HTML
補足
ありがとうございます！ 見事になりました（＾－＾）