プロが教えるわが家の防犯対策術!

開始タグと終了タグについて


ものすごく初歩的な質問で失礼します。


<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に関連する最新のQ&A

A 回答 (5件)

ブラウザーのソース表示では見にくいですね、


 Firefox + Firebug
を使うと、とっても便利です。

http://mozilla.jp/firefox/

https://addons.mozilla.org/ja/firefox/addon/5165/
    • good
    • 0
この回答へのお礼

Firebug、さっそくインストールさせてもらいました。
うわ~これすごいですね!

こういう見方ができるソフトがあるんですね。
直感的理解の助けとなりそうです。

自分のような初心者に優しいソフト教えていただきありがとうございました(>_<)

お礼日時:2010/09/14 16:38

「入れ子構造」を勉強すると良いかと思います。



参考URL:http://ja.wikipedia.org/wiki/ネスティング
    • good
    • 0
この回答へのお礼

プログラミングに関しての話は自分には少し難しかったですが、入れ子としての考え方にはとてもイメージが沸いて、理解の助けになりました。

マトリューシュカなんですね!

ありがとうございました(>_<)

お礼日時:2010/09/14 16:34

開始タグから見ると, 直後の「開始タグに対応していない終了タグ」に対応する.


逆に終了タグから見ると, 直前の「終了タグに対応していない開始タグ」に対応する.
なお, 細かいことですが「<div>要素」という表現は「要素」と「タグ」を混同したものであって正しくありません. 「要素」は「開始タグから (対応する) 終了タグまで」を表す (あるいは「『開始タグ』や『終了タグ』がそれぞれの要素の開始や終了を意味する」) ので, この文脈では「div要素」と呼ぶべきです.
    • good
    • 0
この回答へのお礼

詳細な定義付けを教えて下さり、ありがとうございました!

まだまだこれから細かいところも理解できるようになりたいので、要素とタグの指摘ありがたかったです(>_<)

さっそくの回答とても助かりました。

お礼日時:2010/09/14 16:41

>どこがその要素の終了タグなのか分からなくなります。



編集するエディタや、参照するブラウザの機能で確認するといいでしょう

どうしてもという場合は

<div id="container">
・・・・
</div><!--container-->

的なダミータグをいれる工夫もあります
    • good
    • 0
この回答へのお礼

当方Dreamweaverを使っているのですが、その機能の中で「無効なマークアップがあります」と指摘さててしまったのが今回質問させていただく理由でした。

ダミータグの提案、ありがたく使わせてもらいます!

さっそくの回答とても助かりました。

お礼日時:2010/09/14 16:44

タブやスペースを入れると見やすくなります、


ルールは、終了タグの直前に書いた開始タグが適応されます

あなたの例文では、こうなります

<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>が要りますよ、一番初めの開始タグの終了タグがありません
    • good
    • 0
この回答へのお礼

>終了タグの直前に書いた開始タグが適応されます

そ、そうだったのか!!
なんだか言われるまでテンパリ続けていたので目から鱗です。

ず~~と開始タグばかりに目がいっていたので、混乱していました。

逆転の発想ありがとうございました!

とても理解が深まりました!

お礼日時:2010/09/14 16:48

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qの意味を教えてください。

Javascriptを見ていると
<a href="#" onClick="new_open();return false">
なる記述がありますが、
この<a href="#"
の部分の意味を教えてください。
<a herf まではわかるのですが、この#はどのようないみなのでしょうか?

Aベストアンサー

href="#" というのは「そのページの最上部へのリンク」という意味で、スクロールした場所から一番上に戻したい場合に使います。
ちなみに、同ページ内への # 指定でのリンクでは、ページは読み込まれずスクロールするだけです。

<a href="#" onClick="new_open();return false">
というのは、そのリンクがクリックされた時に new_open という関数を実行し、他の処理はするな、という意味です。
return false というのが、A タグ本来のジャンプ動作をキャンセルさせるためのもので、これを取ってしまうとページ最上部にジャンプしてしまいます。

このスクリプトを書いた人は onClick だけが必要だったのでしょうが、href がないとリンクの下線が出ないなどの不都合があるため、やむなく # を書いたのでしょう。

JavaScriptの内容を実行したいだけなら、
<a href="javascript:new_open()">
と書けば十分なのですが、一部のブラウザではこのタイプのリンクをクリックすると、アニメーションGIFが止まってしまうなどの弊害があるため、嫌う人もいるようです。

また、JavaScriptが有効でない環境の人は、質問に書かれたリンクをクリックしてもページ最上部に戻されるだけで、開くべきページの内容を見ることができません。
なので、
<a href="ページのURL" target="_blank" onClick="new_open(); return false">
とするなどして、非JavaScript環境にも対応した方が親切です。

長文失礼しました。

href="#" というのは「そのページの最上部へのリンク」という意味で、スクロールした場所から一番上に戻したい場合に使います。
ちなみに、同ページ内への # 指定でのリンクでは、ページは読み込まれずスクロールするだけです。

<a href="#" onClick="new_open();return false">
というのは、そのリンクがクリックされた時に new_open という関数を実行し、他の処理はするな、という意味です。
return false というのが、A タグ本来のジャンプ動作をキャンセルさせるためのもので、これを取ってしまうとペー...続きを読む

Qリンクをクリックした時にformからPOST送信したい。

HTML、PHP、JavaScript等でサイトを作っているのですが・・・。

【実現出来ている例】
<form name="form1" method="post" action="Next.php" onSubmit="return InputCheck()">
 <input type="submit" value="送信">
</form>
 submitボタンを一つ置いて、それがクリックされた場合に
formの内容をPOSTで送信する。

【実現したい例】
<form name="form1 method="post">
 <a href="Next.php" onClick="???">???</a>
</form>
 formの中のリンクをクリックされた場合に、formの内容を
POSTで送信したいのですが、その実現方法がわかりません。
GETで送るという手もあり得ますが、今回はどうしてもPOST
したいのですが。

Aベストアンサー

<form name="form1" method="post" action="Next.php">
<a href="#" onClick="document.form1.submit();">???</a>
</form>

onclick内の対象がform1としてあてているので、
アンカータグは別にform内に記述しなくても大丈夫です

form内にhidden等でnameとvalueを持ったパラメータがあればそれも送られます

アンカータグから動的にvalueを変更したい場合は、
document.form1.hogename.value = 'hoge';
等をsubmit()の前に行えば可能です

ただしform内に
<input type="hidden" name="hogename" value="">
を記述する等、変更先パラメータの元を用意する必要がありますのでご注意下さい

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Q「httpステータス404」というエラーが出ます。

「httpステータス404」というエラーが出ます。

java初心者です、宜しくお願い致します。
EclipseでServletを書いてやりましたが、以下のようなエラーが出ます、
原因はなんでしょうか、宜しくお願い致します。
「httpステータス404-/Servlet%E7%B7%B4%E7%BF%92/ ServOutput」

Aベストアンサー

Not Found
という意味です。
そのファイルが無い。あるいはリンクが間違っています。
詳しくは参考URLをみてください。

参考URL:http://ja.wikipedia.org/wiki/HTTP_404

Qボタンを横に並べて表示させる方法

<input type="button"> ←このボタンを、並べて表示させるにはどうしたら良いでしょうか? (tableは使わない方法で) よろしくお願いいたします

Aベストアンサー

ソースをください。

inputはインライン要素なので改行は入らないです。

QHTMLファイル同士での値渡し

困っています。

HTMLファイルからHTMLファイルへ移動するときに、
HTMLファイル1でJavaScript で算出された値を
HTMLファイル2へ渡して使用したいのです。

showModalDialogだとダイアログにしか渡せないし・・・。
このように、値をそのまま次のページに渡すための方法を教えてください。
お願いします。

Aベストアンサー

すみません。うっかりしてました。

document.write(FORM[v1]);
では、v1を変数と認識してしまうので、エラーになってしまいますね。

document.write(FORM.v1);  // 「FORM.v1」です
あるいは
document.write(FORM["v1"]);
としてください。

QリンクでPOSTデータを送信することは可能ですか?

はじめまして。
Submitボタンを使用せずに<A>リンクでFORMのPOSTメソッドデータを送信することは可能でしょうか?
やはりURLにデータを付加して送信するしかないのでしょうか?
ご教授よろしくお願い致します。

Aベストアンサー

javascript を使えば可能です。大雑把にはこんな感じ。

・パラメータが全部 hidden な form を記述しておく(ブラウザでは表示されない)
・<a href> では、その form を submit するように javascript を記述する

試してないですけど、こんな感じ。

<form name=f method=POST action="http://どこか">
<input type=hidden name=x1 value=v1>
</form>

<a href="javascript:document.f.submit()">リンクから submit</a>

Qタグが閉じてないというエラーについて

タグチェックをすると、下記のようなコメントが出ます。

"<!--" が現れたのに "-->" が最後まで現れなかったときの警告です。コメントを入れ子にしたりして、どこか間違えたのでしょう。


・下記のスクリプトは、フリーのスクリプトをもらってきたものです。
タグは閉じられてるはずなのに、何故このようなメッセージが出るのでしょう?
どこがいけないのか教えてください。

<SCRIPT type="text/javascript">
<!--
xx = escape(document.referrer);
yy = "";
for (i = 0; i < xx.length; i++) {
zz = xx.charAt(i);
yy += (zz == "+") ? "%2B" : zz;
}
document.write('<IMG WIDTH=84 HEIGHT=16 ');
document.write('SRC="./count.cgi');
document.write('?gif+ref+', yy, '">');
//--><IMG WIDTH=84 HEIGHT=16 SRC="./count.cgi?gif" ALT="counter" ALIGN=BOTTOM>

</SCRIPT>

タグチェックをすると、下記のようなコメントが出ます。

"<!--" が現れたのに "-->" が最後まで現れなかったときの警告です。コメントを入れ子にしたりして、どこか間違えたのでしょう。


・下記のスクリプトは、フリーのスクリプトをもらってきたものです。
タグは閉じられてるはずなのに、何故このようなメッセージが出るのでしょう?
どこがいけないのか教えてください。

<SCRIPT type="text/javascript">
<!--
xx = escape(document.referrer);
yy = "";
for (i = 0; i...続きを読む

Aベストアンサー

>SCRIPTタグの中にIMGタグがある時点で何かおかしい気がします。

私もそう思います。
<SCRIPT>
...
</SCRIPT>
<IMG WIDTH="84" HEIGHT="16" SRC="./count.cgi?gif" ALT="counter" ALIGN="BOTTOM" />

でどうでしょうか。

Qプルダウンリストの背景色の指定

お世話になります。
現在作成しているwebページがあり、下記のようにプルダウンリストの背景色を設定しております。
<select>
<option style="background-color: #FF0000;">サンプル1</option>
<option style="background-color: #00FF00;">サンプル2</option>
<option style="background-color: #0000FF;">サンプル3</option>
<option style="background-color: #FFFFFF;">サンプル4</option>
</select>
このページにおきまして、サンプル3を選択したときに、プルダウンリストに「サンプル3」と表示され、背景色が#0000FFになるようにしたいのですが、
上記のままだと、IEでは背景色も変化しますが、firefoxですとプルダウンリスト内に「サンプル3」と表示されても背景色は白のままです。

IEとおなじ動きになるようにするには、どうしたらよいでしょうか。
ちなみに、

<select style="background-color: #FF0000">

にすると、IE、firefoxともにプルダウンリストの背景色が変更できたので、javascriptでoptionのvalueをとり、それをselectのstyleに設定できれば。。。
と考えたのですが、javascriptはほぼ無知なので、上記の方法でも解決できずでした。

簡単に解決できる方法などございますでしょうか。
もしくは、javascriptで解決できますでしょうか。

どうぞ宜しくお願いいたします。

お世話になります。
現在作成しているwebページがあり、下記のようにプルダウンリストの背景色を設定しております。
<select>
<option style="background-color: #FF0000;">サンプル1</option>
<option style="background-color: #00FF00;">サンプル2</option>
<option style="background-color: #0000FF;">サンプル3</option>
<option style="background-color: #FFFFFF;">サンプル4</option>
</select>
このページにおきまして、サンプル3を選択したときに、プルダウンリストに「サンプル3」と表示され...続きを読む

Aベストアンサー

「スタイルシートのクラス名」

<html>
<head>
<title>TAG index Webサイト</title>
<script type="text/javascript">
<!--
function chBackGround(e) {
e.className=e.options[e.selectedIndex].className;
document.getElementById('submit').focus();
}

window.onload = function() {
document.getElementById('key').className='color01';
}
// -->
</script>
<style type="text/css">
<!--
.color01 {
background-color: #FF0000;
}

.color02 {
background-color: #00FF00;
}

.color03 {
background-color: #0000FF;
}

.color04 {
background-color: #FFFFFF;
}
-->
</style>
</head>
<body>
<form name="f1" action="./DB.cgi" method="POST">
<div>
<select id="key" name="key" onchange="chBackGround(this)">
<option class="color01">
サンプル1
</option>
<option class="color02">
サンプル2
</option>
<option class="color03">
サンプル3
</option>
<option class="color04">
サンプル4
</option>
</select>
</div>
<input id="submit" type="submit" value="表示">
<input type="hidden" name="mode" value="display">
</form>
</body>
</html>

「スタイルシートのクラス名」

<html>
<head>
<title>TAG index Webサイト</title>
<script type="text/javascript">
<!--
function chBackGround(e) {
e.className=e.options[e.selectedIndex].className;
document.getElementById('submit').focus();
}

window.onload = function() {
document.getElementById('key').className='color01';
}
// -->
</script>
<style type="text/css">
<!--
.color01 {
background-color: #FF0000;
}

.color02 {
background...続きを読む

QEclipse デバッグ エラー処理

Eclipseを使用しているのですが、原因が出てこないエラーなどが良く出てきます。
自力では、なんとも分からず、時間も消費してわからないでかなり困ってしまいます。

今回の場合は新しい処理をいれ、それがnullということは分かるのですが、
ソースは、コピーを少し変えただけで、どこがおかしいか特定できませんでした。

デバッグ(見方とかあまり分からず、触るのも2回目くらい)を利用して箇所を特定しようと、
ステップオーバーしてるうちに、ページが見つかりませんでしたとなってしまいます。

わけが分かりません。
今回の場合どうしたらよいか、
デバックについて勉強になるもの、
又は、エラーパターンの参考になるようなHPや書籍などありましたら教えてください、
よろしくお願いします。

致命的: サーブレット jsp のServlet.service()が例外を投げました
java.lang.NullPointerException
at org.apache.jsp.keiji.Top_jsp._jspService(Top_jsp.java:149)
at org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:98)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:729)
at org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:331)
at org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:329)
at org.apache.jasper.servlet.JspServlet.service(JspServlet.java:265)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:729)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:269)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:188)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:213)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:172)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:127)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:117)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:108)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:174)
at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:875)
at org.apache.coyote.http11.Http11BaseProtocol$Http11ConnectionHandler.processConnection(Http11BaseProtocol.java:665)
at org.apache.tomcat.util.net.PoolTcpEndpoint.processSocket(PoolTcpEndpoint.java:528)
at org.apache.tomcat.util.net.LeaderFollowerWorkerThread.runIt(LeaderFollowerWorkerThread.java:81)
at org.apache.tomcat.util.threads.ThreadPool$ControlRunnable.run(ThreadPool.java:689)
at java.lang.Thread.run(Unknown Source)

Eclipseを使用しているのですが、原因が出てこないエラーなどが良く出てきます。
自力では、なんとも分からず、時間も消費してわからないでかなり困ってしまいます。

今回の場合は新しい処理をいれ、それがnullということは分かるのですが、
ソースは、コピーを少し変えただけで、どこがおかしいか特定できませんでした。

デバッグ(見方とかあまり分からず、触るのも2回目くらい)を利用して箇所を特定しようと、
ステップオーバーしてるうちに、ページが見つかりませんでしたとなってしまいます。

...続きを読む

Aベストアンサー

>今回の場合は新しい処理をいれ、それがnullということは分かるのですが、
>ソースは、コピーを少し変えただけで、どこがおかしいか特定できませんでした。

言葉の意味がよくわかりませんが、今までエラーもなく動作していたコードに何か追加したらエラーが出るようになったということでしょうか?

であれば追加したコードに問題がある可能性が高いので追加したコードの部分をトレースしてみるしかないでしょう。

>致命的: サーブレット jsp のServlet.service()が例外を投げました
>java.lang.NullPointerException
>at org.apache.jsp.keiji.Top_jsp._jspService(Top_jsp.java:149)

jspをコンパイルしたファイルが生成されているはずなのでそのファイルの中身を参照し、149行目付近(大抵の場合該当行かその手前)のコードを追ってみて、問題がないか確認してみるとか。

NullPointerExceptionは大抵作成したコードに問題があるケースがほとんどです。(引数で受け取った値をノーチェックで何かの関数に受け渡している、とか)

>今回の場合は新しい処理をいれ、それがnullということは分かるのですが、
>ソースは、コピーを少し変えただけで、どこがおかしいか特定できませんでした。

言葉の意味がよくわかりませんが、今までエラーもなく動作していたコードに何か追加したらエラーが出るようになったということでしょうか?

であれば追加したコードに問題がある可能性が高いので追加したコードの部分をトレースしてみるしかないでしょう。

>致命的: サーブレット jsp のServlet.service()が例外を投げました
>java.lang.NullPoi...続きを読む


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング