いつもお世話になっております。
ヘッダー部分に開閉式の隠し要素を埋め込みしているのですが、時々その隠し要素が一瞬表示されてしまいます。
問題のページ / http://blackartcard.com/?p=1820
どのページに飛んでも一瞬だけ表示されたり、されなかったり、、、どこでエラーが起きているのかわからないです。
<head>内も確認したのですがおかしい記載はしていないと思います。
どこがひっかかっているのでしょうか??
No.1ベストアンサー
- 回答日時:
エラーではなく、当然の結果です。
正常な動作です。単純にそれを隠すスクリプトなりスタイルシートが後から読み込まれ実行されるからです。
本来、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の最初のほうに「検索エンジン目立つように記事を書きねそれをスタイルシートで隠す」という手法は、検索エンジンから悪質と判断される危険があります。
返信ありがとうございます。
原則で読み込みがあるのは理解しました。
例えば今問題の部分が以下になるのですが、
<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">部分に持っていくと、その要素の開閉がされません。
これはどうゆうことなのでしょうか??
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
複数のボタンを等間隔に、かつ...
-
HTML属性での「""」 「''」違い
-
<div id="container">の使いか...
-
html の divとtable の役割
-
htmlのolやulなどlistにtitleや...
-
ヘッダーとフッターだけ背景を...
-
inline-blockを上下中央揃えに...
-
画面を縮小するとカラムが落ち...
-
セクションをdivで囲むと見出し...
-
1時間30分を簡単に表したいで...
-
ヘッダーを左右に二分割する方...
-
<div>テキスト</div>
-
テキストの揃え方について
-
「見出し画像+小見出し」と「見...
-
リストで画像を右に表示したい
-
XHTMLでループ処理のやり方
-
カラム落ちの対処法について
-
画像の横にテキストを縦方向中...
-
<div>で改行させない方法
-
div要素が重なってします
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
<div id="container">の使いか...
-
1時間30分を簡単に表したいで...
-
min-heightとheightの違いについて
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
div要素が重なってします
-
divを横に並べる方法
-
スペースを使わず文字位置を揃...
-
<!-- #BeginLibraryItemとは
-
HTMLのJIS規格について
-
スライド部分のリンクが貼れな...
-
セクションをdivで囲むと見出し...
-
要素間、要素内に隙間が空く
-
hタグの右横に画像を表示
-
inline-blockをネストすると表...
-
divとpの使いわけ
-
グリッドレイアウトで"auto-fit...
おすすめ情報