html5+jqueryでリンクが反映されない
- html5+css3でスマートフォン向けサイトをコーディングしています。タブナビゲーションを作りたくて、ちょうど良いサンプルを見つけて使わせていただきました。表示は思った通りに出来たのですが、テキスト部分にリンクを付けてもソース上では何も反応しない問題が発生しています。
- PCで動作確認しています。使用しているjQueryのバージョンは1.8.2です。
- テキスト内にリンクを反映させるための設定に問題があるため、リンクが反映されない状況になっています。現在、解決策についてのヒントを求めています。
- ベストアンサー
html5+jqueryでリンクが反映されない
html5+css3でスマートフォン向けサイトをコーディングしています。 タブナビゲーションを作りたくて、ちょうど良いサンプルを見つけて使わせていただきました。 http://designdrill.jp/wordpress/?p=5082 表示は思った通りに出来たのですが、テキスト部分にリンクを付けてもソース上では <div id="txt_1"><a href="http://www.google.co.jp/">googleの説明文</a></div> このように問題無く表記されているのですが、クリックしても何も反応しません。 動作確認はPCでしています。 ソースは以下の通りです。 ※オリジナルの方はjquery-1.7.min.jsでしたが、1.8.2使用です。 html部分------------------- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#textArea>div").hide(); var select_id = 1; $("#btn_" + select_id).addClass("selected"); $("#txt_" + select_id).show(); $('#tab').on("click touchstart", "li:not(.selected)",function() { var click_id = this.id.split("_")[1]; var myColor = $("#btn_" + click_id).css("background-color"); $("#textArea").css("background-color", myColor); //alert(myColor) $("#btn_" + select_id).removeClass("selected"); $("#txt_" + select_id).hide(); $("#btn_" + click_id).addClass("selected"); $("#txt_" + click_id).show(); select_id = click_id; }) }) </script> </head> <body> <section id="tab"> <ul> <li id="btn_1" class="yellow">google</li> <li id="btn_2" class="pink">yahoo</li> <li id="btn_3" class="blue">apple</li> </ul> <div id="textArea"> <div id="txt_1"><a href="http://www.google.co.jp/">googleの説明文</a></div> <div id="txt_2">yahooの説明文</div> <div id="txt_3">appleの説明文</div> </div> </section> css部分------------------- #tab { -webkit-tap-highlight-color: rgba(0,0,0,0); /* デフォルトのタップハイライトを停止 */ } #tab ul { margin: 10px; } #tab ul li { float: left; padding:5px 15px 5px 15px; border-top: 1px #ddd solid; border-left: 1px #ddd solid; border-right: 1px #ddd solid; -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; color: #999; height:15px; line-height:15px; margin: 5px 0px 0px 5px; } #tab ul li.selected { color: #000; height:20px; line-height:20px; margin: 0px 0px 0px 5px; } #textArea{ position:relative; top:-1px; z-index:-1; clear:left; background-color:#ffd; margin:0px 10px 10px 10px; padding:10px; height:100px; border: 1px #ddd solid; -webkit-border-radius: 5px; } .yellow{ background-color:#ffd; } .pink{ background-color:#fdf; } .blue{ background-color:#dff; } 見た目とタブをクリックして同一ページ内で遷移する動きは希望通りですが、リンクが反映されない点だけが難点です。 （テキスト内のリンクは内容上必須です） 今現在、完全に煮詰まっていますのでヒントだけでもいただけたらと思い投稿しました。 よろしくお願い致します。
- nekocue
- お礼率37% (3/8)
- HTML
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
＞自分で見た限りでは他の要素がかぶさっているという感じでは無さそうです。 firebugでは、見つかりませんでしたか？ たいていは、それでわかるはずですが・・・ 表示→スタイルシートでスタイルシートを外すとリンクが利きませんか？ それでリンクが利くなら、もう一度firebugで、それぞれの要素を順番に調べてください。z-indexの大きなものがかぶさってないか？
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
リンクの上(+z)に他の要素がかぶさっているのでは？ firebugなどで調べてください。
お礼
回答有難うございます。 自分で見た限りでは他の要素がかぶさっているという感じでは無さそうです。 見方が間違っているかもしれませんので、もう少しご教示いただけないでしょうか？
関連するQ&A
- liタグのナビボタンがFirefoxで二重に表示。
liタグでナビボタンを縦に３つ積みたいのですが、IEでは正しく表示しますが、何故かFirefoxでは２段めから２つずつ表示してしまい５つのナビボタンになってしまいます。どのように記述すれば良いのでしょう？ <div id="sidebar"> <ul> <li id="aaa"><a href=""><span>aaa</span></li> <li id="bbb"><a href=""><span>bbb</span></li> <li id="ccc"><a href=""><span>ccc</span></li> </ul> </div> div#sidebar { width: 245px; float:left; border-right-width: 1px; border-right-style: solid; border-right-color: #CCCCCC; } div#sidebar ul li a { display: block; } div#sidebar ul li a span { position:absolute; width: 0; height: 0; overflow:hidden; } ul li#aaa a { width: 245px; height: 60px; background-image:url(image/aa.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#bbb a { width: 245px; height: 60px; background-image:url(image/bb.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#ccc a { width: 245px; height: 60px; background-image:url(image/cc.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; }
- ベストアンサー
- CSS
- ページの上下に同じタブメニューを付けたい
現在、wordpressにて、タブメニュー入りのページを作っていますが、添付の画像のように、ページの上下に、連動したタブメニューをつける方法を教えてください。 ちなみに、 ヘッダーに↓の記述をし、 <script> <!-- jQuery( function() { jQuery( '#jquery-sample-tabs > ul > li' ) . click( function () { var str = jQuery( 'input', this ) . val(); jQuery( '#jquery-sample-tabs > div' ) . not( str ) . css( 'display', 'none' ); jQuery( str ) . css( 'display', 'block' ); jQuery( this ) . css( { 'backgroundColor': '#F3F3F3', 'border-bottom': 'none' } ); jQuery( '#jquery-sample-tabs > ul > li' ) . not( this ) . css( { 'backgroundColor': '#f60', 'border-bottom': 'solid 1px #F3F3F3' } ); } ) . first() . click(); } ); // --> </script> cssに↓の記述をし、 #jquery-sample-tabs { width:750px; background:#F3F3F3; } #jquery-sample-tabs ul { background:#000; margin: 0; padding: 5px 5px; } #jquery-sample-tabs ul li { display: inline; margin: 1px; padding: 5px 20px; border: solid 1px #888888; border-radius: 5px 5px 0px 0px; background-color: #F3F3F3; cursor: pointer; } #jquery-sample-tabs div { padding: 10px 15px; } HTMLに↓の記述をしています。 <div id="jquery-sample-tabs" class="jquery-sample-tabs"> <ul> <li> <input id="#jquery-sample-tab-1" type="hidden" value="#jquery-sample-tab-1-contents" /> タブ(1) </li> <li> <input id="#jquery-sample-tab-2" type="hidden" value="#jquery-sample-tab-2-contents" /> タブ(2) </li> <li> <input id="#jquery-sample-tab-2" type="hidden" value="#jquery-sample-tab-3-contents" /> タブ(3) </li> </ul> <div id="jquery-sample-tab-1-contents">(1)の内容</div> <div id="jquery-sample-tab-1-contents">(2)の内容</div> <div id="jquery-sample-tab-1-contents">(3)の内容</div> </div> よろしくお願いします。
- 締切済み
- JavaScript
- jqueryで特定の要素をdivで囲う
jqueryを使い、HTMLの特定の要素をdivで囲いたいと思っています。 元のHTMLのソースは、 ========= <div class="tabWrap02 tabSwitcher materialityRefine"> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-1" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-1" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-2" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-2" class="tabDetail" style="display: none;"> </div> <h2 class="headline06 mb20">×××</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-3" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-3" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-4" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-4" class="tabDetail" style="display: none;"> </div> </div> ========= このようになっております。 上記のソースを、以下のように２か所<div class="wrap">で<ul class="spAcodNav">を囲いたいと思っています。 ========= <div class="tabWrap02 tabSwitcher materialityRefine"> <h2 class="headline06 mb20">●●●</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <div class="wrap"> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-1" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-1" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-2" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-2" class="tabDetail" style="display: none;"> </div> </div> <h2 class="headline06 mb20">×××</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <div class="wrap"> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-3" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-3" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-4" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-4" class="tabDetail" style="display: none;"> </div> </div> </div> ========= jqueryでwrapAllなどを使って試しているのですが、うまいいかず、 お分かりいただける方いらっしゃいましたらご教授いただけますと幸いです。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- jquery教えて下さい。
現在、 <script type="text/javascript"> $(function(){ $("#btn1","#test2").click(function () { $("div","#test2").slideDown(3000); }); }); </script> のコードで btn1のidボタン▼をクリックすると test2がslidedownするコードを造っているのですが これをボタンを押さずに ページがひらいたと同時にスライドするにはどのように すればよろしいでしょうか？ 宜しくお願いします。 <div id="test2"> <div style="display:none;"><div class="slide"> <ul> <li class="setsumei1">test1</li> <li class="setsumei1">test2</li> <li class="setsumei1">test3</li> <li class="setsumei1">test4</li> </ul> </div></div> <div id="btn1">▼</div> </div>
- ベストアンサー
- JavaScript
- Tumblrでjsが適用されない
Tumblrをカスタマイズしています。 webデザインド素人です。ご教授いただけますと助かります。 http://codepen.io/gabrielbrettas/pen/vtmdE このサイトのメニューをつけたいと思い、コピペしてみたのですがｊｓが適用されず、 http://shisakusonoic.tumblr.com/ ↑パスワードは3212173です このように、ただの文字だけになってしまいます。 何が問題なのでしょうか？ どうぞよろしくお願いいたします。 下記、ソースコードです。 <!doctype html> <html> <head> <style> body { /* 画像ファイルの指定 */ background-image: url(URL); /* 画像を常に天地左右の中央に配置 */ background-position: center center; /* 画像をタイル状に繰り返し表示しない */ background-repeat: no-repeat; /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */ background-attachment: fixed; /* 表示するコンテナの大きさに基づいて、背景画像を調整 */ background-size: cover; /* 背景画像が読み込まれる前に表示される背景のカラー */ background-color: #464646; } * {text-decoration: none; transition: all 0.3s; transform: all 0.3s; } body {padding: 50px;} li {list-style: none;} .menu { display: inline-block; position: relative; .btn { display: block; cursor: pointer; padding: 10px; .bar { width: 30px; height: 5px; background: #000; margin-bottom: 5px; } .bar:last-child {margin-bottom: 0px;} } nav { position: absolute; left: 10px; background-color: whitesmoke; border: 3px solid #000; visibility: hidden; opacity: 0; -webkit-transform: scale(0.7); a { font-family: 'Open Sans'; color: #222; padding: 10px 20px; display: block; border-bottom: 1px solid #ddd; white-space: nowrap; } li:last-child a {border-bottom: 0px;} a:hover {color: whitesmoke; background: #000;} } .menu_show { visibility: visible; opacity: 1; -webkit-transform: scale(1); } } </style> </head> <body> <div class="menu"> <div class="btn"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> </div> <nav id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav> </div> <script type="text/javascript"> $(document).ready(function(){ $('.menu .btn').on('click', function() { $('#nav').toggleClass('menu_show'); }); }); </script> </body> </html>
- ベストアンサー
- JavaScript
- jQueryのコードで分からない箇所があります
プログラミング系の勉強を始めたばかりのど素人につき、間抜けな質問かと思いますが、 ご教授いただけますと幸いです。 ※ 以下今回の質問に関連するソースコード ■html <ul class="tab"> <li><a href="#tab1" class="selected">AAA</a></li> <li><a href="#tab2">BBB</a></li> <li><a href="#tab3">CCC</a></li> </ul> <ul class="panel"> <li id="tab1”>…(省略)…</li> <li id="tab2”>…(省略)…</li> <li id="tab3”>…(省略)…</li> </ul> ■jQuery $(function(){ $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide() }); ——————————————————— 上記のjQueryのコード内の $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")") ↑箇所につきまして、なぜ+(プラス)が２箇所必要なのですか？ $("ul.panel li:not("$("ul.tab li a.selected").attr("href")")") もしくは $("ul.panel li:not($("ul.tab li a.selected").attr("href"))") のように記述するとどうしてエラーになるのでしょうか？ どうぞよろしくお願いいたします(>_<)
- ベストアンサー
- SE・インフラ・Webエンジニア
- IE9でa:hoverが効かない
IE9でa:hoverが効かなくて困っています。 droppy.jsというJavaScriptを使ってドロップメニューにしているのが原因でしょうか？ 以下ソースです。 html <div id="navi"> <div class="inner"> <ul> <li><a href="サイトトップのURL">トップ</a></li><!-- ←ここのa:hoverは正常に動作する --> <li> <a href="メニュー1のURL">メニュー1</a><!-- ←ここのa:hoverは正常に動作する --> <ul> <li><a href="メニュー1-1のURL">メニュー1-1</a></li><!-- ←ここのa:hoverが効かない --> <li><a href="メニュー1-2のURL">メニュー1-2</a></li><!-- ←ここのa:hoverが効かない --> </ul> </li> </ul> </div> </div> ｃｓｓ #navi { background: url(naviの背景画像のURL) repeat-x left top #000000; border-bottom: 1px solid #000000; -moz-box-shadow: 0 0 3px #484848;/* Firefox用 */ -webkit-box-shadow: 0 0 3px #484848;/* Safari,Google Chrome用 */ box-shadow: 0px 0px 3px rgba(0,0,0,0.5); } #navi .inner { margin: 0 auto; width: 940px; } #navi .inner ul li { float: left; margin: 15px 0; padding: 0 10px; position: relative; } #navi .inner ul li a { padding: 5px 11px; color: #ffffff; text-decoration: none; } #navi .inner ul li a:hover { border: 1px solid #ffffff; padding: 5px 10px; color: #333333; background: #ffffff; background:linear-gradient(#eaeeee, #e2e3e3); background: -moz-linear-gradient(top, #eaeeee, #e2e3e3);/* Firefox用 */ background: -webkit-gradient(linear, left top, left bottom, from(#eaeeee), to(#e2e3e3));/* Safari,Google Chrome用 */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#eaeeee, endcolorstr=#e2e3e3);/* IE6,7 */ -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#eaeeee, endcolorstr=#e2e3e3)";/* IE8 */ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; behavior: url(/PIE.htc); } #navi .inner ul li ul { position: absolute; top: 39px; left: 0; zoom: 1; display: none; background: #dae4d7; border: 1px solid #8db0a0; border-top: none; border-bottom: none; font-size: 85%; width: 150px; } #navi .inner ul li ul li { float: none; padding: 0; margin: 0; background: none; } #navi .inner ul li ul li:hover { background: none; } #navi .inner ul li ul li a { color: #2d595f; text-align: left; display: block; background: url(icon画像のURL) no-repeat 5px center; border-top: 1px solid #ffffff; border-bottom: 1px solid #8db0a0; padding: 5px 5px 5px 20px; } #navi .inner ul li ul li a:hover { background: url(hoer用icon画像のURL) no-repeat 5px center #2d595f; color: #ffffff; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; border-top: 1px solid #2d595f; border-bottom: 1px solid #2d595f; border-left: none; border-right: none; padding: 5px 5px 5px 20px; margin: 0; } どこがおかしいのかわからないのでnaviv部分全体を載せます。 宜しくお願いします。
- ベストアンサー
- CSS
- CSSの「a」と「a:link」の違いを教えてください。
CSSでリストを横に並べて、グローバルナビゲーションを作っているのですが、aとa:linkの違いがわかりません。 例えばHTMLは以下のように <div id="gNavi"> <ul> <li><a href="../omotenashi.html">おもてなし</a></li> <li><a href="../stay.html">過ごし方</a></li> <li><a href="../rooms.html">客室</a></li> <li><a href="../facilities.html">館内施設</a></li> <li><a href="../dish.html">料理</a></li> <li class="last"><a href="../onsen.html">温泉</a></li> </ul> </div> CSSは #gNavi { height: 60px; width: 960px; margin-right: auto; margin-left: auto; } #gNavi ul { text-align: center; } #gNavi ul li { display: inline; border-right-width: 1px; border-right-style: solid; border-right-color: #FFF; width: 159px; float: left; } #gNavi ul li.last { border-right-style: none; } #gNavi ul li a { background-color: #F00; width: 159px; float: left; } #gNavi ul li a:hover { background-color: #09F; color: #FFF; width: 159px; float: left; } という風に書きますが（間違っているかもしれません。）、#gNavi ul li aを#gNavi ul li a:linkと書いてはいけないのでしょうか？ aとa:linkの違いはなんですか？
- ベストアンサー
- HTML
- jqueryでのプルダウンメニューについて
jqueryでのプルダウンメニューについて こんにちは。 現在私はWEBサイトを製作中です。 メインメニューにプルダウンをつけたいのですが、うまくいきません。 メニューはロールオーバーでの表示（CSSでやってます）です。 slideDownを使用しているのですが、 マウスオーバー時にslidDownで表示された、 サブメニューの背景が、上の要素の背景になってしまいます。 つまり、下のコードでいくとid="sub"の背景がそのまま clas="sub"の"li"要素の背景になってしまうということです。 何か対策はありますでしょうか？ html <div id="head"> <ul id="globalnavi"> <li id="gh"><a href=".">メニュー</a> <ul class="sub"> <li><a href="">サブメニュー</a></li> </ul> </li> </ul> </div> <div id="main"> </div> jquery $(function(){ $("ul.sub").hide(); $("ul#globalnavi>li").hover(function(){ $("ul:not(:animated)", this).slideDown();}, function(){$("ul.sub",this).slideUp();}); }); CSS #globalnavi a{ background-image : url(../img/navi.png); background-repeat : no-repeat; display : block; width : 160px; height : 36px; color : #333333; text-decoration : none; line-height : 36px; } #header #globalnavi li { list-style-type : none; float : left; width : 160px; position : relativ; } #header #globalnavi { clear : both; width : 960px; line-height : 36px; overflow : hidden; position : relative; text-align : center; display : block; } ul,li{ margin:0; padding:0; } .sub li{ float : none; background-color : #FFF; } #gh a{ background-position :0 0; } #gh a:hover{ background-position :0 -36px; } ロールオーバー自体はうまくいっています。 他にプルダウンの方法あるよ、などありましたら教えてください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- 特殊なカラムのデザイン設定について
いつもお世話になっております。閲覧ありがとうございます。 実は新しいことに挑戦して自己解決できず、宜しければお知恵をお借り頂ければと思います。 どのようなことかと言うと １．左カラムのheight部分を100％表示して、position:fixedを使って位置固定とスクロールしないメニュー画面を作りたい。 ２．左カラムにマウスを乗せるとカラムが右に若干スライドするようにしたい。スライド時、右カラムも左カラムが動いた分、スライドします。 以上のようなWEBサイトを作りたいのですが・・・項目１の部分で躓いてしまいました。 実は左カラムの部分に右カラムが隠れてしまっています。 解決策として左カラムの背面にボックスを作って解決しようとしましたが、別の問題が発生しました。 ブラウザのサイズを狭めてスクロールさせると右カラムが左カラムに隠れてしまいます。 どなたか解決案を頂けませんでしょうか。 お手数おかけ致しますが、何卒ご教授お願い致します。 【HTML】 <body> <div id="MasterColumn"> <!--<div id="LeftColumu_z1"></div>--> <div id="LeftColumu_z2"> <ol> <li>コンテンツ１</li> <li>コンテンツ２</li> <li>コンテンツ３</li><!-- サブコンテンツ１ --> <li>コンテンツ４</li><!-- サブコンテンツ２ --> </ol> </div> <header> <div id="LeftHeader"> <h1>タイトル</h1> </div> <div id="RightHeader"> <ol> <li>１</li> <li>２</li> <li>３</li><!-- サブコンテンツ１ --> <li>４</li><!-- サブコンテンツ２ --> </ol> </div> </header> <div id="RightColumu"> <h2>コンテンツ２</h2> <h3>コンテンツ３</h3> <h4>コンテンツ４</h4> </div> <footer>フッダー</footer> </div> </body> 【CSS部分】 body{ background-color: #FFE9E7; background-image: none; background-position: top left; background-attachment: fixed; font-family: "メイリオ", Meiryo, Verdana, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif; /* フォントを設定 */ color: #333; margin: 0; padding: 0; line-height: 1.5; } #MasterColumn{ width: 1200px; margin-left: auto; margin-right: auto; } #LeftColumu_z1 { float:left; width: 200px; height: 100%; background-color: #FFFFFF; z-index: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #LeftColumu_z2{ float:left; position: fixed; width: 200px; height: 100%; background-color: #2C2B30; z-index: 2; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } header{ float: left; width: 1000px; height: 80px; line-height: 80px; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #LeftHeader{ float: left; height: 80px; width: 700px; background-color: #FFFFFF; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #RightHeader{ float: left; width: 300px; height: 80px; background-color: #920832; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } header h1{ display: inline; } header ol,li{ display: inline; } #RightColumu { float: left; width: 1000px; height: 1000px; border: dashed 1px #999; margin: 0; padding-left: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } footer { float: left; width: 1200px; background-color: #2C2B30; color: #FFFFFF; text-align: center; }
- 締切済み
- CSS
お礼
だいぶ前にscriptのチェックで使ったきりだったので、Firebugの見方自体が良く解っていなかったようです。 アドバイスに従ってFirebugでもう一度見たら、すぐに解りました。 作者様のサイトにタブ部分とコンテンツ部分のborderが重なってしまう為、きれいに繋がって表示されるようにz-index:-1;で表示順を指定したとありました。 「へー、ちゃんと隠れてるね。」ぐらいの感覚で読み飛ばしていたのですが、この影響だったのですね。 border指定とz-index: -1;を外したら、上手く動作するようになりました。 Firebugの利用方法も少し理解できたので、今後に役立てたいと思います。 的確なヒントをいただき有難うございました。 非常に助かりました。