![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
開始タグと終了タグについて
ものすごく初歩的な質問で失礼します。
<div id="container">
<div id="header">
</div>
<div id="menu">
</div>
<div class="main-top-img">
</div>
<div class="main-middle-img">
<div id="main-contents">
<div class="text">
<h2 class="title"></h2>
<p class="text"></p>
<h3 class="subtitle">
<p class="text"></p>
</div>
</div>
<div class="main-bottom-img">
</div>
<div id="footer">
</div>
</div>
などいのように開始タグと終了タグの間に、他の多くの<div>要素がある場合、どこがその要素の終了タグなのか分からなくなります。
それぞれの開始タグが、それぞれの終了タグと対応するのは、どのようなルールのもとに決定されているのですか??
No.4ベストアンサー
- 回答日時:
ブラウザーのソース表示では見にくいですね、
Firefox + Firebug
を使うと、とっても便利です。
http://mozilla.jp/firefox/
https://addons.mozilla.org/ja/firefox/addon/5165/
Firebug、さっそくインストールさせてもらいました。
うわ~これすごいですね!
こういう見方ができるソフトがあるんですね。
直感的理解の助けとなりそうです。
自分のような初心者に優しいソフト教えていただきありがとうございました(>_<)
No.5
- 回答日時:
プログラミングに関しての話は自分には少し難しかったですが、入れ子としての考え方にはとてもイメージが沸いて、理解の助けになりました。
マトリューシュカなんですね!
ありがとうございました(>_<)
No.3
- 回答日時:
開始タグから見ると, 直後の「開始タグに対応していない終了タグ」に対応する.
逆に終了タグから見ると, 直前の「終了タグに対応していない開始タグ」に対応する.
なお, 細かいことですが「<div>要素」という表現は「要素」と「タグ」を混同したものであって正しくありません. 「要素」は「開始タグから (対応する) 終了タグまで」を表す (あるいは「『開始タグ』や『終了タグ』がそれぞれの要素の開始や終了を意味する」) ので, この文脈では「div要素」と呼ぶべきです.
詳細な定義付けを教えて下さり、ありがとうございました!
まだまだこれから細かいところも理解できるようになりたいので、要素とタグの指摘ありがたかったです(>_<)
さっそくの回答とても助かりました。
No.2
- 回答日時:
>どこがその要素の終了タグなのか分からなくなります。
編集するエディタや、参照するブラウザの機能で確認するといいでしょう
どうしてもという場合は
<div id="container">
・・・・
</div><!--container-->
的なダミータグをいれる工夫もあります
当方Dreamweaverを使っているのですが、その機能の中で「無効なマークアップがあります」と指摘さててしまったのが今回質問させていただく理由でした。
ダミータグの提案、ありがたく使わせてもらいます!
さっそくの回答とても助かりました。
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_13.png?e8efa67)
No.1
- 回答日時:
タブやスペースを入れると見やすくなります、
ルールは、終了タグの直前に書いた開始タグが適応されます
あなたの例文では、こうなります
<div id="container">
<div id="header">
</div>
<div id="menu">
</div>
<div class="main-top-img">
</div>
<div class="main-middle-img">
<div id="main-contents">
<div class="text">
<h2 class="title"></h2>
<p class="text"></p>
<h3 class="subtitle">
<p class="text"></p>
</div>
</div>
<div class="main-bottom-img">
</div>
<div id="footer">
</div>
</div>
と、言う具合です、ちなにみあなたの例では、一番最後に</div>が要りますよ、一番初めの開始タグの終了タグがありません
>終了タグの直前に書いた開始タグが適応されます
そ、そうだったのか!!
なんだか言われるまでテンパリ続けていたので目から鱗です。
ず~~と開始タグばかりに目がいっていたので、混乱していました。
逆転の発想ありがとうございました!
とても理解が深まりました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
html の divとtable の役割
-
htmlのolやulなどlistにtitleや...
-
<div id="container">の使いか...
-
1時間30分を簡単に表したいで...
-
スペースを使わず文字位置を揃...
-
HTML文章の文字サイズについて
-
htmlの文字が縦書きになる
-
<h1>、<h2>と<p><div>の行間を...
-
css初心者 フレックスボックス...
-
html/cssの、navを2段にする...
-
CSS, リンクの色を一部変えるに...
-
iframe 内の画像を自動縮小させ...
-
【スタイルシート?】同行内で...
-
CSSがなぜかfont-sizeだけ効か...
-
ウインドウを小さくするとbody...
-
含む含まないという概念自体の...
-
Dreamweaverで画像⇔画像のアン...
-
ol要素の番号とリスト項目の離...
-
jQuery-もっと見るボタンをスマ...
-
C言語について。
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
min-heightとheightの違いについて
-
div要素が重なってします
-
1時間30分を簡単に表したいで...
-
スペースを使わず文字位置を揃...
-
<div>テキスト</div>
-
ヘッダーとフッターだけ背景を...
-
divを横に並べる方法
-
hタグの右横に画像を表示
-
セクションをdivで囲むと見出し...
-
divの中に外部のHTMLを埋め込む
-
h1のテキストサイズよりh2の方...
-
html5でheaderの中にnav
-
<!-- #BeginLibraryItemとは
-
3カラムレイアウトで「常に残り...
-
divとpの使いわけ
おすすめ情報