ベストアンサー

開閉式の隠し要素が一瞬表示される。

2012/07/26 17:58

いつもお世話になっております。ヘッダー部分に開閉式の隠し要素を埋め込みしているのですが、時々その隠し要素が一瞬表示されてしまいます。問題のページ　／　http://blackartcard.com/?p=1820 どのページに飛んでも一瞬だけ表示されたり、されなかったり、、、どこでエラーが起きているのかわからないです。 <head>内も確認したのですがおかしい記載はしていないと思います。どこがひっかかっているのでしょうか？？

01mk
お礼率62% (45/72)

CSS
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/07/26 23:35 回答No.1

エラーではなく、当然の結果です。正常な動作です。　単純にそれを隠すスクリプトなりスタイルシートが後から読み込まれ実行されるからです。本来、HTMLは、【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここからどんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より　ですし、javascriptやスタイルシートを理解しないユーザーエージェントもあります。もちろん検索エンジンもそのひとつです。　もうひとつの理由は、HTMLは原則として逐次表示だからです。可能なものから表示していくことになっている。　対策としては、基本に忠実--すなわち文書構造にしたがってきちんとHTMLをマークアップすることです。　なれないうちは、HTMLを書くときに、それをLynxのようなテキストブラウザで確認することも必要です。添付画像は実際にそのページをLynxで確認したものです。ごらんのようにそのページの主題がどこにあるか分かりませんよね。　HTML5では、そのあたりが徹底されHTMLは基本的に <body> 　<header> 　　ここのページタイトルや要約　</header> 　<section> 　　本文　　<aside> 　　　本文と直接関係ない記事　　</aside> 　</section> 　<section> 　　本文　　<article> 　　　<header></header> 　　　<section></section> 　　　<footer></footer> 　　</artice> 　</section> 　<footer> 　　フッタ　</footer> </body> 　先のサイトの隠す予定の内容は、footerないしasideに書くべき内容です。　HTL4.01でしたら<div class="footer"></div>など・・　もし、そのように書かれていたら、スタイルシートやjavascriptが動作していない段階やそもそもそれらを利用しないユーザーエージェント(や検索エンジン)にページの主題を正確に伝えられます。　いずれにしても、HTMLの最初のほうに「検索エンジン目立つように記事を書きねそれをスタイルシートで隠す」という手法は、検索エンジンから悪質と判断される危険があります。

質問者

お礼 2012/07/27 09:46

返信ありがとうございます。原則で読み込みがあるのは理解しました。例えば今問題の部分が以下になるのですが、 <div class="box"> <div class="box-top"> <div class="box-left"> <ul> <li><a href="http://blackartcard.com/"><img src="http://blackartcard.com/img/bac.jpg" width="225" height="225" /></a></li> <li class="box-text"><h3>BLACK ART CARD</h3><h6>Webデザイナー兼フォトグラファーMaksimの公式HPになります。<br /> ここでは作成したHPや動画や写真などを公開しています。旅などの写真なども公開しています。</h6><h6><a href="http://blackartcard.com/"><img src="http://blackartcard.com/img/koushiki.jpg" width="225" /></a></h6></li> </ul> </div> <div class="box-left"> <ul> <li><a href="http://blackartcard.com/web.html"><img src="http://blackartcard.com/img/bac-web.jpg" width="225" height="225" /></a></li> <li class="box-text"><h3>BAC WEB HP</h3><h6>HTML＋CSS＋JQUERY＋WORDPRESS＋動画などを勉強しながら調べたサイト情報やサンプルの作成。そのほかweb 制作に役立つ情報をまとめてます。</h6><h6><a href="http://blackartcard.com/web.html"><img src="http://blackartcard.com/img/bac-study.jpg" width="225" style="margin-top:20px;" /></a></h6></li> </ul> </div> </div> </div> <div id="hp"> <div id="header"> <h1><a href="http://blackartcard.com/"><img src="http://blackartcard.com/img/nav_02.jpg" /></a></h1> <div class="nav-bar"> <ul id="menu"> <li><a href="http://blackartcard.com/">TOP</a></li> <li><a href="http://blackartcard.com/?cat=6">BLOG</a></li> <li><a href="http://blackartcard.com/?page_id=32">CONTACT</a></li> </ul> </div> <div class="pull"><a href="#" class="open"><img src="http://blackartcard.com/wp/wp-content/uploads/2012/07/test.jpg" /></a></div> </div> この場合class="box"を<div class="footer">部分に持っていくと、その要素の開閉がされません。これはどうゆうことなのでしょうか？？