- 締切済み
W3Cに準拠したホームページ作り
nonbejapanの回答
- nonbejapan
- ベストアンサー率77% (14/18)
どちらが正解か、個人的意見でSEO的にliメニューが最適かと思いますが、個人的な意見なので本当に正解かは微妙。 標準の文法に照準をあわせるなら、参考URLのような便利なツールがあります。
関連するQ&A
- cssでdisplay:noneを指定した時のプルダウンメニュー
こんにちは、JavaScriptでプルダウンメニューを作ろうとして cssで予めdisplay:none;を指定したところ、 メニューがクリックしても開かなくなってしまいました。 html、css、JavaScriptの記述は以下の通りです。 html --------------------------------------- <span onclick="PullDown('term1')">クリック</span> <div id="term1"> <ul> <li>***********</li> <li>***********</li> </ul> </div> ----------------------------- css ------------------------------ div#term1 { display: none; } ------------------------------- JavaScript ------------------------------- function PullDown(id){ if(document.getElementById(id).style.display == 'none') document.getElementById(id).style.display=''; else document.getElementById(id).style.display='none'; } --------------------------------- cssの記述部分を無くすとちゃんと開いたり閉じたりと動作します。 また、 function Init(){ document.getElementById("term1").style.display="none"; } とJavaScriptで書いて、 bodyタグの所で <body onload="Init()">として呼び出してロード時に隠すようにするとちゃんと開閉してくれます。 cssでdisplay:none;と書くと動かなくなる理由と、 対策が分かる方居ましたら教えてください。
- ベストアンサー
- JavaScript
- ホームページ作成 ツリーメニュー
ホームページビルダー15を使っています。 タグ（ｈｔｍｌ）の位置が無効です。 と構文エラーが出てしまいます。 エラー箇所は、<body> です。 どこを修正すればいいでしょうか？？解決法を教えてください。 初心者ですので、わかりやすく教えていただければ有難いです。 <html> <head> <title>階層メニュー</title> <SCRIPT Language="JavaScript"> <!-- function myMenu(num){ obj=document.all[num].style; flag=obj.display; if(flag=="none"){ obj.display="block" }else{ obj.display="none" } } // --> </SCRIPT> </head> <body> <a href="JavaScript:void(0)" onClick="myMenu('M1');return false">CD</a><br> <span id="M1" style="display:none"> ├<a href="test_page1.html">新品ＣＤ</a><br> └<a href="test_page1.html">中古ＣＤ</a><br> </span> <br> <a href="JavaScript:void(0)" onClick="myMenu('M2');return false">DVD</a><br> <span id="M2" style="display:none"> ├<a href="test_page1.html">メニュー４</a><br> ├<a href="test_page1.html">メニュー５</a><br> └<a href="test_page1.html">メニュー６</a><br> </span> <br> <a href="JavaScript:void(0)" onClick="myMenu('M3');return false">VHS</a><br> <span id="M3" style="display:none"> ├<a href="test_page1.html">メニュー７</a><br> ├<a href="test_page1.html">メニュー８</a><br> └<a href="test_page1.html">メニュー９</a> </span> </body> </html>
- ベストアンサー
- ブログ
- wordpress でのhtml 記述とCSS
wordpressのテーマを作成しているのですが、 PHP内のhtml記述で、メニューリストを横並びに表示させたくて 投稿ページと固定ページをリストメニューにしています。 が、投稿ページのli要素が横並びになってくれません。 どこが間違っているのでしょうか。 【html】 <ul> <span class="menu"><?php wp_list_categories('title_li='); ?></span> <li class="menu"><a href=#" target="_self">Stance</a></li> <li class="menu"><a href="#" target="_self">Artists</a></li> <li class="menu"><a href="#" target="_self">Disc</a></li> <li class="menu"><a href="#" target="_self">Video</a></li> <li class="menu"><a href="#" target="_self">Contact</a></li> <li class="menu"><a href="#" target="_blank">teitter</a></li> </ul> 【css】 .menu{ display:inline; margin-right:85px; text-decoration:none; list-style-type: none; }
- 締切済み
- ブログ
- li ul横並びについて
横並びのメニューを表示させるところまでは出来たのですが、ウィンドウを縮小させると画像の通りリストが画面に合わせてズレてしまいます。 CSSはこのように書いています。 ul.menu{ list-style:none; width:100%; font-size:25px; //margin-left:0px; //margin-top: 642px; position: relative; top: 642px; right: 27px; padding:3px 0px; text-align:center; font-family: 'Gorditas', cursive; } ul.menu li{ list-style:none; display:inline; margin:0px 15px; } ウィンドウを縮小しても横並びのままにはならないのでしょうか？まだまだ勉強途中なのでわかりやすく教えて頂けるとありがたいです。
- ベストアンサー
- CSS
- firefox でjavascript が無効
下記のようにjavascriptで場面の切り替えを行ったのですが、firefox 3.6で見ると切り替え表示されません。他にlightbox やjquery-1.4.4.min.js などを使用していますが、取り除いて試したところやはり無効です。ＩＥでは正常に機能します。なにかよい方法はないでしょうか？ <script> function show1(){ content1.style.display="block"; content2.style.display="none"; } function show2(){ content1.style.display="none"; content2.style.display="block"; } </script> <style> #content1 { display:none; } #content2 { display:none; } </style> <ul class="u2" id="menu2"> <li><span onclick="show1();"><img src="images/menu1.jpg" alt="" border="0" /></span></li> <li><span onclick="show2();"><img src="images/menu2.jpg" alt="" border="0" /></span></li> </ul> <div id="content1"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> <div id="content2"> bbbbbbbbbbbbbbbbbbbbbbbbbb</div>
- ベストアンサー
- JavaScript
- java scriptでフォーム制御
どなたか詳しい方、是非ご教授をお願いいたします。 自分のページに投稿フォームを設けているのですが、 画像をクリックしたら下にフォームが開く（表示する）ような形に変えたいと思い、挑戦しているのですがうまくいきません。 現在のソースはこんな感じです。 ・head部分 <SCRIPT language="JavaScript"> <!-- flag = new Array(); function tree(menu){ tree_list = document.all.item("tree"); if(flag[menu] == 1){ tree_list[menu].style.display='none'; flag[menu] = 0; } else{ tree_list[menu].style.display='block'; flag[menu] = 1; } } --> </SCRIPT> ・body部分 <SPAN onclick="tree(0)" style="cursor:hand"> <img src="画像名"></SPAN><BR> <DIV id="tree" style={display:none;}> <form method="post" action="./"> ～途中省略～ </form> </DIV> どなたか問題箇所を指摘、修正いただければ非常に助かります。よろしくお願いします。
- ベストアンサー
- JavaScript
- リンク押下でタグを書き換えたい
リンクが複数あって、押したリンク文字だけ<span></span>のみにしたいと 思っています。また対応するdivタグのdisplay属性も書き換えたいです。 とりあえず思いついたのは以下の方法なのですが、冗長ですし、 リンクの数が増えた場合に足していくのが大変です。 もっとシンプルに書く方法がないものでしょうか。 ご助言ください。 <html> <body> <script> function change(spanid,divid,menuName){ document.getElementById('menu1').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu1','div1','メニュー1')\">メニュー1</a>"; document.getElementById('div1').style.display="none"; document.getElementById('menu2').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu2','div2','メニュー2')\">メニュー2</a>"; document.getElementById('div2').style.display="none"; document.getElementById('menu3').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu3','div3','メニュー3')\">メニュー3</a>"; document.getElementById('div3').style.display="none"; document.getElementById(spanid).innerHTML = menuName; document.getElementById(divid).style.display="block"; } </script> <ul> <li><span id="menu1">メニュー1</span></li> <li><span id="menu2"><a href="javascript:void(0)" onclick="change('menu2','div2','メニュー2')">メニュー2</a></li> <li><span id="menu3"><a href="javascript:void(0)" onclick="change('menu3','div3','メニュー3')">メニュー3</a></li> </ul> <div id="div1"> test1 </div> <div id="div2" style="display:none"> test2 </div> <div id="div3" style="display:none"> test3 </div> </body> </html>
- ベストアンサー
- JavaScript
- styleシート
スタイルで<SPAN style="display：none">というやつがありますが、<SPAN style="printing：none">という感じに印刷のときには表示させないようなタグかなにかってありますか？できればCGIは避けたいのですが。
- ベストアンサー
- その他（プログラミング・開発）
- CSSでひとつだけdisplay:none;が適用されない
メニューを画像にし、文字を見えなくするために display:none; を用いたのですが、一番上のメニューのみ適用されません。 #menu_1 a span{ display:none; } #menu_2 a span{ display:none; } ～～～～～～～～～～～～～～～ #menu_10 a span{ display:none; } としているのですが、 #menu_1のみが適用されません HTMLタグは <strong id="menu_1"><A href="#"><span>メニュー１</span></A></strong> <strong id="menu_2"><A href="#"><span>メニュー２</span></A></strong> <strong id="menu_3"><A href="#"><span>メニュー３</span></A></strong> <strong id="menu_4"><A href="#"><span>メニュー４</span></A></strong> <strong id="menu_5"><A href="#"><span>メニュー５</span></A></strong> ～～～～～～～～～～～～～～～ <strong id="menu_11"><A href="#"><span>メニュー１０</span></A></strong> このようにしています。 一番上のメニューのみ画像の上に文字が重なるように表示されます。 うまくまとめることができませんでしたが、 どなたか宜しければ教えて頂けるとうれしいです。
- ベストアンサー
- CSS
- 折りたたみメニュー
http://www2s.biglobe.ne.jp/~club_tom/java-kouza/sample/ja-sam_ri.htm ↑上記ページ８番目のように、別のメニューをクリックすると閉じる折りたたみメニューを探しています。 画像は使わずに下記ページのようなテキスト式の折りたたみメニューで、ソースも複雑でなく出来るだけ軽い物を探しています。http://www.openspc2.org/reibun/javascript/mouse/005/code.html 1日以上かけて上記条件の折りたたみメニューを探しましたが、どうしても見つかりませんでした。お教えいただけると幸いです。 ちなみに、今現在は以下の折りたたみメニューを使っています。 bodyの中にonclick="doClick()"を記入。 <SCRIPT LANGUAGE="JavaScript"> <!-- var myObj = null; function doClick(){ var strName; var intNo; myObj = window.event.srcElement; if((myObj.id=="")||(myObj==null))return true; intNo=1; strName=myObj.id + "_"+String(intNo); while(document.all.item(strName)!=null){ if(document.all.item(strName).style.display == "none"){ document.all.item(strName).style.display="block"; }else{ document.all.item(strName).style.display="none"; } intNo=intNo+1; strName=myObj.id + "_"+String(intNo); } return true; } //--> </SCRIPT> <SPAN id=menu1 STYLE="cursor:hand;" class="gramenua">メニュー１</SPAN> <SPAN id=menu1_1 STYLE="display:none;">メニュー２</SPAN> <SPAN id=menu1_1 STYLE="display:none;">メニュー３</SPAN>
- ベストアンサー
- JavaScript