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

解決済

質問者：01mk
質問日時：2012/07/26 17:58
回答数：1件

いつもお世話になっております。

ヘッダー部分に開閉式の隠し要素を埋め込みしているのですが、時々その隠し要素が一瞬表示されてしまいます。

問題のページ　／　http://blackartcard.com/?p=1820

どのページに飛んでも一瞬だけ表示されたり、されなかったり、、、どこでエラーが起きているのかわからないです。
<head>内も確認したのですがおかしい記載はしていないと思います。

どこがひっかかっているのでしょうか？？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2012/07/26 23:35

エラーではなく、当然の結果です。

正常な動作です。

　単純にそれを隠すスクリプトなりスタイルシートが後から読み込まれ実行されるからです。
本来、HTMLは、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
　ですし、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の最初のほうに「検索エンジン目立つように記事を書きねそれをスタイルシートで隠す」という手法は、検索エンジンから悪質と判断される危険があります。

- 0
- 件

通報する

この回答へのお礼

返信ありがとうございます。

原則で読み込みがあるのは理解しました。
例えば今問題の部分が以下になるのですが、

<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> …
</ul>
</div>
<div class="pull"><a href="#" class="open"><img src="http://blackartcard.com/wp/wp-content/uploads/20 … /></a></div>
</div>

この場合class="box"を<div class="footer">部分に持っていくと、その要素の開閉がされません。
これはどうゆうことなのでしょうか？？