• ベストアンサー
  • 暇なときにでも

</div>は、どのdivに対しての終わりなのか

<div class="test1">   <div class="test2"> ・・・ ・・・   </div> </div> とする時に、</div>は、どのdivに対しての終わりになるのか、わからなくなってしまうのですが、 何か目印を付ける方法はないのでしょうか? コメントで自分がわかるようにメモを付けるしかないですか?

共感・応援の気持ちを伝えよう!

  • 回答数4
  • 閲覧数246
  • ありがとう数4

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

  • ベストアンサー
  • 回答No.4

自分でルールを決めておきましょう。 私は、ブロック要素はタブ・・ <body> - - <div class="header"> - - - - <h1>タイトル</h1> - - - - <div class="abstract"> - - - - - - <h2>抄録</h2> - - - - - - <p> - - - - - - - - このページでは、・・・・ - - - - - - </p> - - - - - - <p> - - - - - - - - このページでは、・・・・ - - - - - - </p> - - - -</div> - - </div> - - <div class="section"> - - - - <h2>本文</h2> - - - - - - <p> - - - - - - - - このページでは、・・・・ - - - - - - </p> 連続したタブや改行、半角スペースは「ユーザエージェントは、語間スペースの出力処理に際しては、連続する空白類の入力があった場合は1つにまとめてしまう必要がある。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#h-9.1 )」から、ソースが見やすいように改行、タブ、半角スペースでインデントさせると良いでしょう。 ※きちんと開始タグでインデント、閉じタグでインデント解除 ※むやみやたらと<DIV>を使わない。使うときは  『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』  なのですから、今何処にいるかもわかるはず ※よいテキストエディタを使用する。  私のEmEditorだと、添付のように何処までがその開始タグかわかる。 ★基本は、タグごとにインデントさせること ★むやみにDIVなど使わないこと。  

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ありがとうございました。

関連するQ&A

  • floatのクリアについて

    以下のように「test1」,「test2」というclassを「test」の中で左右に 配置したのですが、一番最後のh2にあるclassのclearが反映されずfloatを 解除することが出来ません。(IEの7では解除できましたが、FireFoxの 3.0.11での解除が出来ません) 「test」の</div>直前に<br class="test3" />を入れると解除されるので すが、<br>を使わずに解除する方法はありますでしょうか? 現在の希望は以下の方法での解除か、「test1」にclearを設定し「test」を 下に続けて並べたいと考えています。 ご教授よろしくお願いします。 ■■■HTML■■■ <div id="test">    <div class="test1">       <img src="画像" width="100" height="100" />    </div>    <div class="test2">       <p>test2</p>    </div> </div> <h2 class="test3">test</h2> ■■■CSS■■■ #test { width: 500px; margin: 0 0 20px 0; } .test1 { float: left; width: 100px; margin: 0 10px; padding: 0; } .test2 { float: left; width: 380px; margin: 0; padding: 0; } .test3 { width: 500px; clear: both; }

  • <table summary="test1 tes

    classの場合は、 <div class="test1 test2"> が出来ますが、 テーブルで <table summary="test1 test2"> とは出来ないのでしょうか? 二つのテーブルに対するcssを作ったので、二つとも適用させたいです。

    • ベストアンサー
    • CSS
  • jquery教えて下さい。

    現在、 <script type="text/javascript"> $(function(){ $("#btn1","#test2").click(function () { $("div","#test2").slideDown(3000); }); }); </script> のコードで btn1のidボタン▼をクリックすると test2がslidedownするコードを造っているのですが これをボタンを押さずに ページがひらいたと同時にスライドするにはどのように すればよろしいでしょうか? 宜しくお願いします。 <div id="test2"> <div style="display:none;"><div class="slide"> <ul> <li class="setsumei1">test1</li> <li class="setsumei1">test2</li> <li class="setsumei1">test3</li> <li class="setsumei1">test4</li> </ul> </div></div> <div id="btn1">▼</div> </div>

その他の回答 (3)

  • 回答No.3

フリーで「HTML整形ツール」があります。 簡単にインデントをつけて整形してくれるので、とても便利です。

参考URL:
http://u670.com/pikamap/htmlseikei.php

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ありがとうございました。

  • 回答No.2

Tab、または半角スペース4つ程を使用してインデントを入れます。例えばこの質問ページのソースなどもそのようになっているかなと思います。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ありがとうございました。

  • 回答No.1
  • kmee
  • ベストアンサー率55% (1857/3366)

ツールによっては、自動で字下げしたり、対応するタグの色が変ったりします。 それ以外なら、コメント付けるくらいでしょう。 そのコメントが間違ってることもありますが 別解として、divを極力使わない、というのもあります。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ありがとうございました。

関連するQ&A

  • <div class="div_1" class=

    実際のソースは <div class="div_1" class="div_2">test</div> なのに、 グーグルクロームのデペロッパーツールの elementsで見ると、 <div class="div_1">test</div> となっています。 そのためなのか、 class="div_2"のスタイルシートが適用されていません。 <div class="div_1" class="div_2"> という書き方は間違えなのでしょうか?

    • ベストアンサー
    • HTML
  • ブラウザの横幅イコール100%ではない?

    以下のコーディングで、各色、1行になる筈なのですが、上手くいかず困っています。根本的に何かを間違えているようで、思ったようになりません。何を勘違いしているのか、どうすればいいのかを教えてください。よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head> <title>無題ドキュメント</title> <style type="text/css"> body{margin:0;padding:0;width:600px;} h1{margin:0 1%;width:98%;background:#ffbbbb;} div{float:left;padding:2em;margin:0 1%;} .test2{width:48%;background:#ffdddd;} .test3{width:31.3%;background:#ddffdd;} .test4{width:23%;background:#ddddff;} .test1{width:98%;background:#ffffcc;} </style> </head> <body> <p>body{margin:0;padding:0;width:100%;}</p> <h1>見出し1 h1{margin:0 1%;width:98%;}</h1> <div style="margin:0;width:100%;background:#eeeeee;height:30px;padding:1em;">div 共通{float:left;padding:2em;margin:0 1%;}</div> <div class="test2">div.test2{width:48%;赤}</div> <div class="test2">.test2(左右1%のマージンと48%のコンテンツで50%)が2個で100%のつもり</div> <div class="test3">div.test3{width:31.3%;緑}</div> <div class="test3">.test3(左右1%のマージンと31.3%のコンテンツで33.3%)が3個で99.9%のつもり</div> <div class="test3">.test3</div> <div class="test4">div.test4{width:23%;青}</div> <div class="test4">.test4(左右1%のマージンと23%のコンテンツで25%)が4個で100%のつもり</div> <div class="test4">.test4</div> <div class="test4">.test4</div> <div class="test1">.test1{width:98%;黄}(左右1%のマージンと98%のコンテンツで100%)のつもり</div> </body> </html>

    • ベストアンサー
    • CSS
  • classの再定義エラーについて

    C++初心者で初歩的な質問ですがよろしくお願いします。 【内容】  <test.h>  class testを定義  <test2.h>  class testを継承したclass test2を定義  <test3.h>  class testを継承したclass test3を定義  <test4.h>  class test2とclass test3で作成したインスタンスをメンバに持つclass test4を定義 【問題】  test2.hとtest3.hではclass testを継承するために#include "test.h"をしています。そして、test4.hではclass test2とclass test3を使うため#include "test2.h"、#include "test3.h"をしているのでredefinition of 'class test'というエラーが発生します。  このようなエラーを発生させずに上記の内容のものを実現させることは出来るのでしょうか?  ちなみにOSはTurboLinux8でコンパイラはg++です。よろしくお願いします。

  • html内に <div id"test">があり、このtestというi

    html内に <div id"test">があり、このtestというid名をjavascriptで変更するにはどうすればいいのでしょうか?このhtml内には普通一度しか使用しないid名が何度が記述され、そのid名をたとえばtest0やtest1のように変更するjavascriptを作りたいのですが、 <div id"test"><p>あ</P></div> <div id"test"><p>い</P></div> <div id"test"><p>う</P></div>を <div id"test0"><p>あ</P></div> <div id"test1"><p>い</P></div> <div id"test2"><p>う</P></div>のように document.getElementsByTagName("div")[0].id;でタグ名は取得できるのかもしれませんが、<div id"test">の前後にはいくつか<div id"test">以外のdiv id が存在するとお考え下さい。 どなたか、詳しくわかる方お教えください。

  • <div ~ </div> で囲まれたテキスト文字を取得する方法はあり

    <div ~ </div> で囲まれたテキスト文字を取得する方法はありますか? 「 <div class="TEST" id="TEST">?</div> 」 上記のような、?部分の表示内容によって、処理を分けたいのです。

  • Javascriptでloop処理

    一点ご質問で、書かせていただきました。 Javascriptには全くの初心者同然の中で一生懸命やったのですが、 わからないまま積んでしまったので、どなたか助けていただけませんでしょうか? <div class="demo" id="test1">test1</div> <div class="demo" id="test2">test2</div> <div class="demo" id="test3">test3</div> new Tip('test1' , 'jiojoi;j;ioj' , { title: "Click", closeButton: true, showOn: 'click', hideOn: { element: 'closeButton', event: 'click'}, stem: 'bottomMiddle', hook: { target: 'topMiddle', tip: 'bottomMiddle' }, offset: { x: 0, y: -2 }, width: 'auto' }); new Tip('test2' , 'jiojoi;j;ioj' , { title: "Click", closeButton: true, showOn: 'click', hideOn: { element: 'closeButton', event: 'click'}, stem: 'bottomMiddle', hook: { target: 'topMiddle', tip: 'bottomMiddle' }, offset: { x: 0, y: -2 }, width: 'auto' }); ・          ・           . . もしこれが50個並ぶようになってしまったら大変なのですが、 fonなどで、ループ処理をすればいいと思ったのですが、 案の定自分ではいろいろ試したのですが、全て何も反応せず 終わってしまいました。 お手数ですが、アドバイス等いただけるととても助かります! よろしくお願い致します。          

  • Jquery html()を使って空のdivを挿入したい

    お世話になります。 コーディングの際、「div」がひとつ多いために大幅にレイアウトが崩れてしまいました。しかし、事情があってHTMLをいじることができません。 そこで無理やりなのですが Jqueryのhtml()を使って<div class="test">と、追加してやることにしました。 <script> $(function(){ $("#article_btm").html('<div class="test">'); }); </script> <div id="article_btm"></div> </div><!--これがひとつ多いdiv--> 思惑では <div id="article_btm"><div class="test"></div> </div><!--これがひとつ多いdiv--> と、なるかと思ったんですが、プレビューすると <div id="article_btm"><div class="test"/></div> </div><!--これがひとつ多いまま--> となって、結局</div>がひとつ多いままなんです。 他にもtext()でもためしてみたんですが、結果は同じでした。 どなたかよい方法をご存じの方は教えてください!!

  • 横並びdivで一部の初期高さがずれる理由について

    いつもお世話になっております。 きわめて初歩的な質問とは思うのですが・・・どうしても上手くいかず分からない事なので教えて欲しいです。 divブロックを横並びにして、divブロック4つ、検索formを含んだdivフォームを1つ配置したいのですが、 [css] #hoge{ overflow: hidden;} #head{ width: 750px; height: 35px; margin: 0px auto; position: relative; border: 1px solid;} #head div { display: inline-block; margin: 0px; border: 1px solid;} #test1{ width:100px; height:33px;} #test2{ width:100px; height:33px;} #test3{ width:100px; height:33px;} #test4{ width:100px; height:33px;} #test5{ width:250px; height:33px;} #Form input{ margin:auto 0px; font-size: 70%; width: 150px; } #Form button{ font-size: 70%; width: 50px; } [html] <div id="hoge"> <div id = "head"> <div id="test1"></div> <div id="test2"></div> <div id="test3"></div> <div id="test4"></div> <div id="test5"> <form id = "Form"> <input name="list"/> <button>テスト</button> </form> </div> </div> </div> この場合、表示は画像のように、test5のdivだけ初期の高さが沈み込んでしまいます。 また、divとdivの間に余計な隙間が作られてしまいます。 ここで分からないことは、 1.たぶん折り返しをするような必要がないはずなのになぜdiv test5だけが一つ沈み込んでいるのか? 2.div test1-5の間で横に奇妙な隙間がでてきている根本的な原因は? 3.cssのinline-block等の属性を変えずに隙間を詰めることはできるか? 等が知りたいです。お手数ですが、どなたかご教示いただけませんでしょうか。m(_)m

    • ベストアンサー
    • CSS
  • templateの抽象クラスについて

    VC++2003の環境なんですが、 下記の状態でtest2.a()を呼び出すと未解決の外部シンボル(LNK2019)のエラーが発生します。同じファイルでこれらを定義した場合は普通に通りました。class内で定義した場合も通ります。なぜでしょうか? test1.h : template<class T> class test1 { public: void a(); }; test1.cpp : template <class T> void test1<T>::a(){} test2.cpp : class test2 : public test1<int> {public:};

  • C++で、クラスの受け渡しを行いたい

    C++を現在勉強中です。 java は少しだけわかるのですが、 以下のjavaのコードをC++で実現する方法が わかりません。 ------------------------------------------- class test2 { private test2() { } public test2(String hoge) { } } class test1 { private void method1(test2 t2) { } public static void main(String[] args) { test1 t1 = new test1(); } } ------------------------------------------- ようは、test2クラスのデフォルトコンストラクタを不可視にしておきながら、呼び出し側でどのように定義すればよいのかがわかりません。 どなたか回答お願いします。