ベストアンサー

htmlのidとクラスについて

2012/05/17 20:34

HTMLでページを作成していました。最近コツがわかってきたのですが、 idとかclassの命名規則等の管理が、まだ上手くできず管理表をエクセルに起こし、管理していこうとしました。 (どのページ、どの所でid名:testを使用。といった内容を記述しております。) すると上司に、「そんな管理表なんて物いらない。コメントさえ書いておけばいい」と言われました。仕事で、Webページを作成していく際は、コメントだけ残しておけばいいものなのでしょうか？

kureakai
お礼率69% (179/256)

HTML
回答数4
ありがとう数5

みんなの回答 （4）
専門家の回答

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

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/05/17 23:15 回答No.3

少し長いですが、とても大事なことなのでよく読んでください。私もきっとそういいます。なぜなら、HTML(小文字じゃないです)の仕様書に「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」　言い換えれば、idやclass名はまさに文書構造を示しているのですから、それ以上に管理表やコメントがあること、自体おかしいです。　私は、基本HTML4.01strictですが、その際のclass名は下記のようにつけています。 <body> 　<div class="header"> 　　<h1>タイトル</h1> 　　<div class="abstract"> 　　　<p>class名は、HTMLで用意されている要素だけでは文書構造を示しきれないときに、それを保管する目的でつけるようにしましょう。</p> 　　</div> 　</div> 　<div class="section"> 　　<h2 id="How_to_put_it_with_class_name">class名のつけ方</h2> 　　<p>・・・・・</p> 　　<p>・・・・・</p> 　　<blockquote cite=""> 　　　<p>DIV要素とSPAN要素は、id属性及び class属性と併用することで、</p> 　　</blockquote> 　　<div class="aside"> 　　　<p>・・本文と直接関係ない記事・・・</p> 　　</div> 　　<p>・・</p> 　　<div class="tableContent"> 　　　<ol> 　　　</ol> 　　</div> 　</div> 　<div class="footer"> 　　<h2>文書情報</h2> 　　<dl id="document-version"> 　　　<dt id="FIRST-PUBLISHED">First Published</dt> 　　　<dd>2005-06-10</dd> 　　　<dt id="LAST-MODIFIED">Last Modified</dt> 　　　<dd>2005-06-10 12:00:00 (JST)</dd> 　　</dl> 　　<div class="nav"> 　　</div> 　</div> </body> ・・・ここで使用しているclass名はHTML5の「新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」とその用途を参考にしています。　この様に書かれていたら、管理表どころかコメントも要らないでしょう。もちろんスタイルシートも div.header,div.section,div.footer{margin:0 auto;width:80%;min-width:640px;max-width:900px;} div.section{position:relative;} div.section>*{margin-left:200px;} div.section div.contentTable{position:absolute;top:0;left:0;width:195px;height:100%;} と・・簡単でわかりやすくなりますね。HTMLなんていちいち開かなくてもスタイルシートだけを見てデザインの変更が出来ますよね。　class名やidは、文書構造を示すために---言い換えればそれが文章を構成するどんな要素であるかを示すためのものですから、それにさらにコメントが要ることすらおかしいですし、まして管理表が要るなんてとんでもないです。　私は、原則としてidはアンカーやjavascriptのターゲットに使用する以外は使いません。class名は、それ以外で「文書構造を示すため」に使用します。これは、headerやsection,footerを含めて文書内に何度も登場する可能性があるからです。　たとえば、sectionは、内部にheaderやfooterを持ちえますね。その場合でも div.section div.h2{} div.section div.section h2{} とセレクタで選択できます。　数年後に第三者が、上記のようなHTMLやCSSを見ても理解できるでしょう。HTMLを開かなくてもスタイルシートだけ見てデザインを変えられる。　この様なソースでしたら、あなたでもきっとわかりますよね。そして、これらのclass名はあのgoogleの検索エンジンも理解してくれるのです。(HTML5の新しい要素名を強く推進していたのもgoogle)・・言い換えればSEO(検索エンジン最適化)としてねベストです。　ですから、管理表はもちろんですが、コメントが必要なことすらclass名やidのつけ方が間違っているということです。それが必要なくするためにclass名をつけるのですからね。

質問者

お礼 2012/05/21 22:20

>「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」　言い換えれば、idやclass名はまさに文書構造を示しているのですから、それ以上に管理表やコメントがあること、自体おかしいです。確かに仰られる通りだと思いました。やはり、正しく作れていればこんな問題は発生しないということですね。情報ありがとうございました。

その他の回答 (3)

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/05/18 08:48 回答No.4

No.3です。もう少し補足しておきます。私はオーサリングツールで作られたページの修正を良く行うのですが、たとえばNo.3で示したdiv.section内の目次ですが、<div id="innerLeftBox2">なんてのを見かけます。もし、そのように書かれていたらコメントにと書いたり、別の一覧表に innerLeftBox2 : 内側のボックスの２番目でボックスの左側に200pz幅で表示する部分なんて書いておかなければなりません。　ところが、将来、目次を本文の右に置き換えたとき、管理表も書き換えなければならなくなります。そもそもスタイルシートを見ただけじゃ「わけわかめ」なので、HTMLを開いてどの部分が目次なのか探さなければなりません。fireBugなどを使えば簡単ですが、それでも大きなHTMLだと大変な作業になるでしょう。　それを防ぐためにHTMLはプレゼンテーションと完全に分離しておかなければなりませんし、HTMLに用意された要素(タグ)で足りなければ、class名(やid)に適切なものを付けておきます。プレゼンテーションのためにHTMLを書かない。　仕事でウェブページを作成する場合は、誰にでも(検索エンジンも)理解できる簡潔でわかりやすいHTMLやスタイルシートを書くようにしましょう。「コメントや管理表が必要かも？」と不安になった時点で、書き方がまずいのではないかと疑ってください。　それだけであなたのスキルは上達します。頑張ってください。誰もが通ってきた道ですから・・

質問者

お礼 2012/05/21 22:19

>仕事でウェブページを作成する場合は、誰にでも(検索エンジンも)理解できる簡潔でわかりやすいHTMLやスタイルシートを書くようにしましょう。「コメントや管理表が必要かも？」と不安になった時点で、書き方がまずいのではないかと疑ってください。やはり、これですか。書き方がよくないから、余計なものを作る。という考え方になるのですね。参考になりました。ありがとうございました。