- ベストアンサー
ページのトップへ戻るためのidの仕込み方
- みんなの回答 （9）
- 専門家の回答
質問者が選んだベストアンサー
単純にdivでメニューを囲むとか。 見苦しいソースにならなければですが。 <div id="pagetop" class="menu"> メニュー </div>
その他の回答 (8)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
ANo.6の > 試してないですが、スタイルシートでdisplay:noneにするとアンカー先として機能しなくなるんじゃないでしょうか？ これは > ページのトップに戻るidを設定したいと思っています。 > ただ、その中に要素を配置したくないので、以下のように考えています。 > > <body>すぐ下に > > <div id="pagetop" style="display: none;"></div> に対しての意見ですが、 もちろんエレメントは存在しますが、 あらためてMac Opera9で確認したところ、display:noneにするとアンカー先としては機能しません。 なので、質問者さんの希望する動作（トップに戻るためのIDを設定）は無理ではないでしょうか。 ということで、<div><a name="toppage"></a></div>を入れると言うことを提案させて頂いたわけですが、 これならスタイルシートで隠さなくても表示されません。 <div>の改行が気になるのであれば、 <div style="positon:absolute;"><a name="toppage"></a></div> としておけば他の要素への影響もないと思います。 display:noneを使わないので、display:noneに対する懸念も心配いりません。 アンカーを作る方法と、 SEOにおけるdisplay:noneの質問に関連性がないのであれば、無視してください。 > ・適応したいページが膨大で、メニュー部分を共有化しているので、そこに記述したい メニューの中に入れるなら、 <ul> <li><a name="toppage"></a><a href="page1.html">ページ１</a></li> <li><a href="page2.html"></a>ページ１</li> </ul> としたり、 既存のメニューがすでにdiv要素に入っているなら、 <div id="mypagecontainer"><a name="toppage"></a> <ul id="mypage1"> <li><a href="page1.html">ページ１</a></li> <li><a href="page2.html"></a>ページ１</li> </ul> </div> でも良いと思います。 >> <div id="pagetop">に対応していないブラウザの方が多いです。 >そうなんですか？ >よければ参考先などあれば教えてください。 参考先は私のサイト（自分でテストした結果を書いています）です。 もし私以外の方の意見がほしいというのであれば、ご自身でテストして下さい。 <p><a href="toppage">link</a></p> <div id="toppage">a</div> と書いてクリックするだけなのですぐ出来ると思います。 MacIE全バージョン、NN4.8以前が対応していません。IE5.0も対応していないかもしれません。 空要素のアンカー先に飛べないのはLynx2.6らしいですが、入手不可（？）なので確認出来ません。 空要素のアンカーの作成と > (1)空タグはまずい、と聞きますが、これではよくないのでしょうか？ この質問に関連性がないのであれば、無視して下さい。 ちなみに空タグ（空開始タグ、空終了タグ）と空要素と空要素タグはそれぞれ別物ですが、 空要素のことを仰っている物と勝手に判断させて頂きました。 空開始タグ、空終了タグはおそらく全てのブラウザが対応していませんので、使わない方がよいでしょう。 「アンカー」「アンカー先」でわかりにくければ、「リンク」「リンク先」と読み替えて下さい。
お礼
御礼が非常に遅くなってしまってすみませんでした。 報告ですが、今回は、メニューをdivで囲うという方法で対応しました。 ですが、ご回答をみて勉強になりました。 今後製作する際、display:noneでのid設定は避けようと思います。 今回の質問で、もっとW3Cの推奨を勉強しようと思いました。 どうもありがとうございました！
- goldfox
- ベストアンサー率49% (123/249)
> 試してないですが、スタイルシートでdisplay:noneにするとアンカー先として機能しなくなるんじゃないでしょうか？ 画面上に表示されていなくとも、「そこにidがある」ことに変わりはないので問題はありません。 > <div id="pagetop">に対応していないブラウザの方が多いです。 そうなんですか？ よければ参考先などあれば教えてください。
- goulan
- ベストアンサー率46% (23/50)
SEO について。 私の理解の範囲内です。間違っている部分があるかもしれません。というか、多分あるんじゃないかなと思うのですが・・・後は、御自分で勉強なさるしかないかと思います。 "idを埋め込むために中身のない要素を置き、さらに表示を避けるために display: none; を指定する" これがスパム行為に当てはまるかどうか？というご質問だと判断します。 私には、絶対に当てはまるとも当てはまらないとも言えません。なぜなら、ロボット検索を運営している「側」ではないからです。ですので、以下「らしい」とか「多分」としか言えない事をご承知おき下さい。 意図的、無意識、気付かない間違い、何であっても、欺く行為であるとクローラーのアルゴリズムが判断したならば、スパム行為と見做されるようです。クローラー自身が持っている判断分岐は、スパムに当てはまると判断したのちに、"これは間違って書いたのだろう"とか、"topに戻るidを表示なしで入れたかったんだろう"などという「推測」はしないでしょうね、多分・・・。 display: none; を使用する事そのものには問題ありませんが、使い方次第では、スパム行為と見做されることがあるかもしれないという意味です。ご自分で調べてらっしゃるようですから、スパム行為と見做される事例は出しません。 display: none; を使うならば、スパム行為と見做される事例を良く眺めて、それに当てはまらないように使う 。それしか言えません。多分、運営側（Google, goo, infoseek など）に質問しても、アルゴリズムは教えてくれないでしょうし。 SEOとスパム行為は表裏であり、異なるのは、その目的と内容です。ロボット検索がどのように働くのかを考えれば、SEOもスパム行為も似た者同士だとお判り頂けると思います。 ページトップに戻るための id をどこに、display: none; で書くか。サイトを訪れる人に対しては、どの様に書いても実際のページ内ジャンプは、若干の違いしかありません（除：音声読上げUA；音声読み上げは対応してない事がほとんどです）。 body, div,menuの要素。しかし、クローラーにとって、display: none; を読み取った時点で、何かしらの判断があるのではないか？と想像してます。 過去にそれを悪用してきたページが多い「らしい」からです。 私見ですが、使っちゃいけないものではなし、私も使うことあります。しかし、ペナルティを課せられたことはありません。目的的に正統な理由があるから使う、ではなく、私のスタイルとして使う、必要があるから使う。要素もスタイルもそうなのだと思っております。
お礼
ご回答を見て、もっと知識を増やして自信を持って自分のスタイルが確立できるように、勉強しようと思いました。 貴重なご意見、ありがとうございました！
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
試してないですが、スタイルシートでdisplay:noneにするとアンカー先として機能しなくなるんじゃないでしょうか？ アンカー先を目的とするなら、アンカー先を入れるのが良いんじゃないでしょうか。 <body> <div><a name="pagetop" id="pagetop"></a></div> <div>ヘッダ</div> もちろん、ヘッダに入れても良いと思います。 <body> <div><h1><a id="pagetop"></a>タイトル</h1></div> 空要素の<a>を避けるべきと言うのは、10年ほど前のブラウザで、空要素のアンカーに対応していないブラウザがあったからですが、 それに比べれば<div id="pagetop">に対応していないブラウザの方が多いです。 name属性が非推奨だからといって、<a id="pagetop">トップ</a>とするのであれば、空要素未対応ブラウザを考える必要はありません。 内容のない段落<p></p>というのは、文書として不適切だと思いますが、 （HTMLの文法としては正しい記述だが、ブラウザは無視すべきとあります。） テーブルの行の列数を合わせるために<td></td>としたり、 JavaScriptで使用するための<div></div>や、アンカーのための<a></a>はHTML（マークアップ）として適切だと思います。 実際にW3Cの例でも<a></a>が使われています。 http://w3g.jp/css/display_position/display > 無意味にむやみやたらと要素を CSS で消したり・非表示にする等の誤解を招くような使い方はできるかぎり避けた方が無難なようです。 > ANo.5 > 基本的に、人に見せるためのページ上で、"display : none ;" を使う機会はほとんどないと思いますが。 たしかにHTML/XHTMLとスタイルシートだけのページではdisplay:noneはほとんど使い道がありませんが、 解説文などをかくしておいて、JavaScriptのonmouseoverなどで表示するなど、実際に使われる場面は多いです。 （特定の状況下でa:hoverを使ってCSSでも実現出来ます） そういうページでは、意味のある隠し文章を大量に持っています。 もちろん、スパムサイトと見なされているページもあると思いますが、 これらが全てがスパムサイトと見なされているわけではないと思います。 むしろスパムではなく、被リンク数が少ないなどの理由で上位に表示されないだけではないでしょうか。
お礼
御礼が非常に遅くなってしまってすみませんでした。 報告ですが、今回は、メニューをdivで囲うという方法で対応しました。 ですが、ご回答をみて勉強になりました。 今後製作する際、display:noneでのid設定は避けようと思います。 今回の質問で、もっとW3Cの推奨を勉強しようと思いました。 どうもありがとうございました！
- goldfox
- ベストアンサー率49% (123/249)
> ただし、この "none" には制作者の動機的問題があって～ 読む限り、「隠しテキストを作る小細工」（色々な検索用キーワードを書いてページ上には表示させない）がスパム行為に当たるのであって、"display : none ;" 自体には問題はないように思われます。 気になるなら多用は避ける方向で作成していけばよいのではないでしょうか。 基本的に、人に見せるためのページ上で、"display : none ;" を使う機会はほとんどないと思いますが。
お礼
御礼が非常に遅くなってしまってすみませんでした。 ご報告ですが、今回は、メニューをdivで囲うという方法で対応しました。 できる限り、display:noneを使用しないような製作ができるようにしたいと思います。 どうもありがとうございました！
- goulan
- ベストアンサー率46% (23/50)
1. 空要素以外、要素の中身がない状態は良くない・・・というか、基本的には有り得ないと思っております。html は 何かをマークアップするためにあるのですから。それと、UAは中身がない場合、つまり、<p></p>などは無視します。 2.どうですか、というのは「何が、どうなのか」何を御質問なさっているのか良く判りませんが・・・ クローラーが拾ってくれるかどうかとか、具体的にお願いします。SEOあまり詳しくないですが、私は。判る範囲でしたら。 ページトップに戻る idについて。 その共有なさっているメニュー全体を div id="**" でという意見に賛成です。それがお嫌ならば、display: none;を指定し、マークアップされる文などを入れましょう。display: none; はレンダリングされません。ですから、何も表示されませんし、隙間も空かない（はず）です。
お礼
ご回答、どうもありがとうございます！ マークアップとしてよくない、ということですね。 皆さんの意見を聞いて、メニューをdivで囲む方向にしようかと思い始めました。検討しようと思います。
補足
（2）についてですが、display: noneについて検索していたところ、こんなページを見つけまして↓ http://w3g.jp/css/display_position/display ----略--- ただし、この "none" には制作者の動機的問題があって、一時期、"visibility : hidden ;" や "display : none ;" といった要素を消したり・非表示にする手法を利用して検索エンジンのロボットにだけ上位表示させたいキーワードを収集させ、検索エンジンを欺くような隠しテキストを作る小細工が横行したことがありました。現在では、このような行為は検索エンジンスパム行為として、スパム行為を行っている文書に対して、またはスパムの程度によってはドメイン単位でペナルティ（検索結果の表示順位の下落や検索結果からの削除）が課せられるとされています。 ----略--- それで、どうなんだろうか、と思いたった次第です。 聞きかじり程度の知識で、なんだか、ぼんやりとした質問になってしまってすみません。
- goldfox
- ベストアンサー率49% (123/249)
えーと、なら空要素を利用するとか。 （技術的というか専門的な意見でなくてすみません。） <hr id="pagetop" style="display: none;">
お礼
続けてのご回答、どうもありがとうございます！ 皆さんの意見を聞いて、メニューをdivで囲む方向にしようかと思い始めました。検討しようと思います。
- goldfox
- ベストアンサー率49% (123/249)
> 空タグはまずい、と聞きますが、これではよくないのでしょうか？ 「その中に要素を配置したくないので」 これの理由次第だと思いますけど。 <body id="pagetop"> で問題はないと思います。
お礼
早速のご回答ありがとうございます！
補足
要素を配置したくない理由を補足します。 ・ページの最初にメニューがあるため また、bodyタグに記述せずに、body以下に記述で実現したいのです。理由としましては ・適応したいページが膨大で、メニュー部分を共有化しているので、そこに記述したい メニューに使用しているid使用を考えましたが、メニューが複数パターンあり、id名が統一されていないため、叶いませんでした。。 いいお知恵、ありましたらよろしくお願いします。
関連するQ&A
- 擬似フレームでのページ内リンクについて
擬似フレームの横分割のレイアウトで、 左に位置固定された折りたたみ式メニュー 右にメイン画面を置いてあります。 左で折りたたみメニューを開き、ページ内リンクで右に出てくる本文の項目ごとにリンクさせたいんですが普通にaタグを設置してみても上手くいきません。 どうやったらできるでしょうか？ 折りたたみメニュー ・外部js function oritatami(id){ obj=(document.all)?document.all(id):((document.getElementById)?document.getElementById(id):null); if(obj) obj.style.display=(obj.style.display=="none")?"block":"none"; } ・外部CSS body { font-size: 82%; color: #505050; position: relative; padding: 0px 20px 0px 150px; } #PAGETOP { margin: 0px auto; max-width: 700px; } #MENU { width: 220px; padding-top: 20px; position: fixed; left: 30px; top: 0px; font-size: 85%; } .box{ line-height: 1.2; background-color: #FFFFFF; border: 1px solid #000000; padding: 1em; margin-top: 0.5em; } #MEIN {line-height: 1.5;} 以下、text.htmlのソース ----------------------------------------- （中略） <body> <div id="PAGETOP"> <div id="HEADER"> （中略） </div> <!-- 左メニュー --> <div id="MENU"> <div class="box"> <ul> <li><a href="text.html" onclick="oritatami('o0');return false">メニュー1</a></li> <div id="o0" style="display:none"> <ul> <li><a href="text.html#abc.html">ABC</a> <li><a href="text.html#def.html">DEF</a> </ul> </div> </div> </div> <!-- 右メイン --> <div id="MEIN"> <h2 id="abc">ABC</h2> （中略） <h2 id="def">DEF</h2> （中略） </div> <div id="FOOTER"> （中略） </div> </div> </body> 検討よろしくお願いします。
- ベストアンサー
- HTML
- javascriptでid要素の取得について
お世話になります。 最近、javascriptの勉強を始めたたのですが、 以下の違いがよくわかりません。 ------------------------------------------------------- <html> <head><title>Test</titile></head> <body> <div id='wrapper'></div> </body> </html> <script language='javascript'> function aaa() { document.getElementById("wrapper").style.display = "none";//---(1) wrapper.style.display = "none"; //---(2) } </script> (2)は、document等省略してますが、その違いは無視して 頂ければと思います。 (1)でわざわざgetElementByIdを使用してid要素を取得 するメリットがわかりません。 初心者の質問で申し訳ありませんが、よろしくお願い致します。
- 締切済み
- JavaScript
- bodyにidをつける理由は何ですか？
お世話になっています。 スタイルシートを勉強している者です。 いろいろなサイトのソースを見て疑問に思ったんですが、 下記のようにbodyタグにidやclassをつけているサイトがありました。 <body class="indexPage"> トップページにidを指定し階層ページには指定しないサイトもあれば、 トップページ、階層ページともそれぞれidを指定しているサイトもありました。 あとはどちらにもつけていないものもありました。 bodyにつけるスタイルは何が目的なんでしょうか？ 背景画像でしょうか？ ならば<body>下の<div id="wrapper">に指定すればいいのかなぁと思ったんですが… 何が利点なのか教えてください。。 よろしくお願いします！
- ベストアンサー
- HTML
- ブロックレベル要素内ブロックレベル要素のmargin-topが効かない
<html><head><style> *{ margin:0; paddgin:0; border:none; } div#wrap{ background:#BBB; width:600px; height:900px; margin:30px auto; } div#header{ background:#999; width:150px; height:60px; margin:30px; } </style></head><body> <div id="wrap"> <div id="header"> </div> </div> </body></html> 例えばこの用な場合で、divの中にdivが入っている場合など…中に入っているdiv要素のmargin-topが効きません。原因がよくわらないのですが、どのような条件の時にmargin-topは効かなくなるのでしょうか？また解決策はどのようなものがあるでしょうか？このようなケースでmargin-topが効かなくなったのが二度目でどうしても気になったので質問させていただきました。よろしくお願いします。
- ベストアンサー
- HTML
- 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
- プルダウンメニューでページ内の表示を変える の派生質問
某サイトで紹介いただいているソースの引用で恐縮ですが、 下記のソースで、div1～3のソース部分はうまく切り替わるのですが、ページが開いてすぐの時点では、まったく表示されず、セレクト項目を選んだ後に切り替えが動作します。 ページを開いたら、デフォルトで <div id="item1"> <p> あいうえお </p> </div> が表示されるようにするには、どうすれば宜しいでしょうか？ ご教授くださいませ ------------------------ <html> <head> <script type="text/javascript" language="JavaScript"> function showthis(obj) { if(!obj) return false; if(document.getElementById) { document.getElementById("item1").style.display = "none"; document.getElementById("item2").style.display = "none"; document.getElementById("item3").style.display = "none"; document.getElementById(obj).style.display = "block"; } else { return false; } } // --> </script> <style type="text/css"> #item1,#item2,#item3 { display: none; } </style> </head> <body> <form> <select onchange="showthis(this.value)"> <option value="item1">ディブ１</option> <option value="item2">ディブ２</option> <option value="item3">ディブ３</option> </select> </form> <div id="item1"> <p> あいうえお </p> </div> <div id="item2"> <p> かきくけこ </p> </div> <div id="item3"> <p> さしすせそ </p> </div> </body> </html>
- 締切済み
- JavaScript
- 文字列の表示/非表示
下記のコードで、ボタンを押すたびに、 sample1 sample2 sample3 の３個の文字列の非表示/表示が切り替わるようにしたいのですが、 alert(elements.length+"個の要素を取得しました"); の実行で、class="sample"のエレメントの個数は正しく取得できているようなのですが、 elements.style.display = elements.style.display == "none" ? "block" : "none"; で非表示/表示が切り替わってくれません。 何か書き方が悪いのでしょうか？ ご経験のある方、御教示ください。 <html> <head> <title>document.getElementsByClassName - class名を元にエレメントを取得する</title> </head> <!--class名を元にエレメントを取得するのサンプル--> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> <!-- function execute() { var elements = document.getElementsByClassName("sample"); alert(elements.length+"個の要素を取得しました"); elements.style.display = elements.style.display == "none" ? "block" : "none"; } //--> </script> <body> <div id="sample1" class="sample" style="display:none;">sample1</div> <div id="sample2" class="sample" style="display:none;">sample2</div> <div id="sample3" class="sample" style="display:none;">sample3</div> <button onclick="execute()">サンプル実行</button> </body> </html>
- ベストアンサー
- JavaScript
- <div id="AA">の時、<form id="BB">内のselect要素などすべての要素をdisableにしたい。
▼次のようにページ内のdivタグのidの名前によって、formタグ内の要素をdisableにすることはJava scriptによって可能でしょうか？ <div id="AA">のとき、別の場所にある<form id="BB">内のselect要素などすべての要素をdisableにする。 また同時に、id="BB"に指定したスタイルシートの記述を書き換えることは可能でしょうか？ 何かよい方法をご存知でしたら教えてください。よろしくお願いいたします。
- ベストアンサー
- JavaScript
- CSSのID名に配列を使えませんか？
以下のようなソースで、項目ごとにサブメニューの開閉をしようとしているのですが、サンプルの#a1～に該当するID名を、配列として定義することってできませんか？ <style type="text/css"><!-- #a1 { display:none; } #a2 { display:none; } #a3 { display:none; } // --></style> <script type="text/javascript"><!-- function disp(aaa) { obj = document.getElementById(aaa); if( obj.style.display =="block" ){ obj.style.display ="none"; }else{ obj.style.display ="block"; } } function create(bbb){ document.write(bbb); } // --></script> <body> ああああ<a href="javascript:void(disp('a1'))">◎</a><div id="a1"><script type="text/javascript">create("アアアア");</script></div><br> いいいい<a href="javascript:void(disp('a2'))">◎</a><div id="a2"><script type="text/javascript">create("イイイイ");</script></div><br> うううう<a href="javascript:void(disp('a3'))">◎</a><div id="a3"><script type="text/javascript">create("ウウウウ");</script></div><br>
- ベストアンサー
- JavaScript
- JSでページ内の表示を変えた時の問題について
どなたかお手すきでしたら、稚拙な質問にお付き合いお願い致します。 Javascriptを利用して、プルダウンメニューの選択肢を選んで ページ内の表示を変更したときの問題なのですが、 選択後submitボタンで次のページに移動しブラウザの戻るボタンで前ページに戻ると プルダウンメニューにはさきほど選択したものが残っているのですが、 変更したはずの表示部分が元に戻ってしまいます。 FireFoxで確認した場合、この症状はみられませんでした。 IEの仕様なのでしょうか？ どなたか解決方法が分かりましたらご教授お願い致します。 【ソース】 <html> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Type" Content="text/Javascript"> <title>テスト</title> <script type="text/javascript"> <!-- //表示変更 function showthis(obj) { if(!obj) return false; if(document.getElementById) { for( i=0; i<=5; i++ ){ document.getElementById( "1_"+ i ).style.display = "none"; document.getElementById(obj).style.display = "block"; } } else { return false; } } --> </script> </head> <body> <form name="one" action="./two.html" method="POST"> <table class="box2"> <tr class="tr1"> <td class="pdown"> <select name="q1" onChange="showthis(this.value)"> <option value="1_0" selected>---- 選んでください ----</option> <option value="1_1"> １ － いち</option> <option value="1_2"> ２ － に－</option> <option value="1_3"> ３ － さん</option> <option value="1_4"> ４ － よん</option> <option value="1_5"> ５ － ご</option> </select> </td> </tr> </table> <div id="youso"> <table class="box1"> <tr> <td> <div id="q1"> <div id="1_0"> <p>【---- 選んでください ----】</p> </div> <div id="1_1" style="display: none;"> <p>【１ － いち】</p> </div> <div id="1_2" style="display: none;"> <p>【２ － に－】</p> </div> <div id="1_3" style="display: none;"> <p>【３ － さん】</p> </div> <div id="1_4" style="display: none;"> <p>【４ － よん】</p> </div> <div id="1_5" style="display: none;"> <p>【５ － ご】</p> </div> </div> </td> </tr> </table> </div> <input type="submit" name="" value="次へ進む"> </form> </body> </html>
- ベストアンサー
- JavaScript
お礼
思いつきませんでした、ありがとうございます！ メニューをdivで囲って、ひとまず検証してみたいと思います。