html内のコメント文

質問

初心者にて失礼します。

html+cssで３カラムの段組を行ってますが、内容が複雑になってくると「</div>」がどの属性の終了なのか混乱してくるため、各「</div>」の前に終了コメント<!--end div#id-->を付けておりますが、開始のほうに<!--start div#id-->と入れるのは変でしょうか？

また開始コメントを入れるのは素人の発想でしょうか？

ご教授願います。

回答No.3

神崎 渉瑠（@taloo） · ベストアンサー

開始タグ付近に書くのは、
おそらくCなどのプログラム言語で、関数名の最初に、その関数が何をするための物なのかをコメントとして書く習慣から来ているのではないでしょうか。

> また開始コメントを入れるのは素人の発想でしょうか？
プロが作ったであろうサイトでもよく見かけますので、あながち素人の発想とも言い切れないと思います。

私はタグ属性で確認できますので、開始タグの方には書いていません。
開始タグにコメントを入れるのなら、「このタグは○○の目的である」という説明を付け加えます。
idやclassを英単語の頭文字だけを組み合わせて物にした場合など、
推測しづらい物については書くかもしれませんが、（classに羅列するので）そういう場面になったことがありません。

<!-- body : 開始コメントについて、終了コメントについて -->
<div class="body">
　　<div class="section starting">
　　　　<h3>開始コメントについて</h3>
　　　　<p>たとえば内容物を書いてみるとわかりやすいと思いますが、
内容物を後から変更するとき、コメントの変更も必要になってくる手間が増えます。</p>
　　　　<p>プログラミングの関数解説では、その内容が変わるということがありませんので、こういうコメントが有効です。</p>
　　</div><!-- starting -->
　　<div class="section ending">
　　　　<h3>終了コメントについて</h3>
　　　　<p>「終了時に終了コメントを書く」というルールのため、「終わり」を意味する言葉をつけなくてもタグ終了というのがわかるので書きません。</p>
　　　　<p>インデントも有効ですが、エディタの折り返し表示に影響することがあります。</p>
　　</div><!-- ending-->
</div><!-- body -->

DreamweaverCS3ではタグの折りたたみができますので、
このように省略したカタチで表示して、body以外の部分を編集し安くできます。
（折りたたみをする部分をドラッグで選択しないと行けないので、終了部分を目視できないと大変です）

　<div id="header">
　・・・・
　・・・・
　</div>
　<!-- body : 開始コメントについて、終了コメントについて -->
+ <div class="body">
　<div id="footer">
　・・・・
　・・・・
　</div>

お礼

わざわざご丁寧な回答をありがとうございます。

読んでいて非常に参考になりました。

なけなしの金でDreamweaverCS3を購入したのはよかったんですが、以前はテーブルレイアウトを行ってまして、脱フレームレイアウトをこなすようになってからは毎日頭が混乱してどうにかdivを整理できないかと考えてました。

参考書には終了コメントについての記載はあるのですが、開始コメントの解説はどの書物にもなく、正直悩んでました。

本当にありがとうございます。

回答No.2

rally

TABで階層を作るのも有効ですが、divが長くなるとわかりにくくなりますね。

divについては、id属性を持たせると良いと思います。

タグが明確になりますし、スタイルシートを設定するのも簡単です。

<div id="main">
　<div id="left">
　</div> <!-- left -->

　<div id="right">
　</div> <!-- right -->
</div> <!-- main -->

補足

はじめまして。

終了コメントではなく開始コメントのほうを質問でしてるのですが・・・

rallyさんの回答では</div>の後に終了コメントがありますが、終了コメントは</div>の前につけるのでは？？

回答No.1

noname#83877

一般的にはtabキーの空白で親子関係を表すのでコメントを付けない気がするのですが・・・
擬似的な表現ですが

<div>
　　　　<div>
　　　　　　　　　<h1>ヘッダー</h1>
　　　　　　　　　<p>text text text text</p>
　　　　　　　　　<p>text text text text</p>
　　　　　　　　　<p>text text text text</p>
　　　　　　　　　<p>text text text text</p>
　　　　</div>
　　　　<div>
　　　　　　　　　<h2>ヘッダー</h2>
　　　　　　　　　<p>text text text text</p>
　　　　　　　　　<p>text text text text</p>
　　　　　　　　　<p>text text text text</p>
　　　　　　　　　<p>text text text text</p>
　　　　　　　　　<div>
　　　　　　　　　　　　　　<p>text text text text</p>
　　　　　　　　　　　　　　<p>text text text text</p>
　　　　　　　　　　　　　　<p>text text text text</p>
　　　　　　　　　　　　　　<p>text text text text</p>
　　　　　　　　　</div>
　　　　</div>
</div>

こんな感じで。
複雑に見えるのは人間側であって実際に処理をするコンピューター側ではないので、できるだけ無駄を省いた書き方にする方がよいのではないかと思います。

お礼

ありがとうございます。

tabキーで親子関係を表す方法は知りませんでした。非常に勉強になります。