• ベストアンサー

htmlのidとクラスについて

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

  • HTML
  • 回答数4
  • ありがとう数5
回答 全件
ベストアンサー
少し長いですが、とても大事なことなのでよく読んでください。 私もきっ…
No.3です。 もう少し補足しておきます。私はオーサリングツールで作ら…
つかわないものつくってもじかんむだということでしょー そーすにこめんと…

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答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名をつけるのですからね。

kureakai
質問者

お礼

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

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (3)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.4

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

kureakai
質問者

お礼

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

全文を見る
すると、全ての回答が全文表示されます。
  • OKWavex
  • ベストアンサー率22% (1222/5383)
回答No.2

つかわないものつくってもじかんむだということでしょー そーすにこめんといれればみるけどべつにかんりひょうつくってもだれもみないとゆーこと

kureakai
質問者

お礼

>つかわないものつくってもじかんむだということでしょー 別のところに力を割けばいいことですね。 情報ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
  • akr
  • ベストアンサー率18% (32/173)
回答No.1

規模によると思います。 あまりに小規模なWEBシステムであれば、変に管理表なんか作っても誰も見ない、誰もメンテナンスしない物になると思います。

kureakai
質問者

お礼

情報ありがとうございます。 やはり規模と誰も見ないということがポイントですか。 参考にさせていただきます。ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • CSSのIDとclassの命名規則は？

    CSSのIDとclassの命名規則をお教えいただけますでしょうか？ なお、XHTML1.1メインでつくっているのですが、 HTMLのバージョンで違ってくるようなら、それもお教えください？ なお、出力エンコーディングはUTF-8です（関係ない？） よろしくお願いします。

    • ベストアンサー
    • CSS
  • ＩＤとパスワードにより見ることができるホームページを作成したい。公開す

    ＩＤとパスワードにより見ることができるホームページを作成したい。公開するページとＩＤとパスワードを入力しないとみることができないＷＥＢページを作成したい。その方法、ＨＴＭＬ、ＣＳＳの記述について具体的に書かれている書籍名を知りたい。

  • # $Id:　とは？

    シェルやメイクファイルなどでたまにみかけるのですが、 # $Id:　に続き、作成日時や作成者などの情報があるのですが、 これはただのコメントなのでしょうか？ はたまた、バージョン管理？か何かのための記述 （何かアクションすると、自動でバージョンが更新されたりする）のでしょうか？

  • CLASSとIDの違いについて教えてください。

    スタイルシートを使ってWEBページを作っているのですが、 CLASSとIDの違いがわからず困ってしまいました。 CLASSでやってもIDでやっても 同じように動作しているように見えます。 この2つに機能的な違いはあるのでしょうか？ また、使い分けた方がいいのでしょうか？

  • xhtmlにおけるid,classの命名規則は？

    表題のとおりですが、 xhtmlにおけるid,classの命名規則は、どのようになっているのでしょうか？ マルチバイトがだめなことくらいはわかりますが、 大文字がだめ？、とか、アンダースコアがだめ？とか、 数字から始まるとだめ？など・・・がわかりません。 なお、xhtml 1.0 1.1 また、strict transitional　で規則が違っていたら、お教えいただければ幸いです。 なお、、もしよろしければ、それらについてまとめて書いてあるサイトをお教えいただければ幸いです。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • id、classの記述について

    WEBの記述について質問します。 スクールではclassやidに、 .margin{ padding-left:10px; margin-left:10px; } など1つのId、classに何個も指定をするように教わりました。 しかし前勤務していたweb制作会社ではひとつのclassやidに一つしか指定してませんでした。 classに分かりやすい名前をつけて分類してました。 .margin_left{ margin-left:10px; } これはどちらが正しいんでしょうか? 一般的に会社で使われている方法はどちらが多いのでしょうか?

  • 共通したクラス名を持つ複数のタグのIDを取得したい

    共通したクラス名を持つ複数のタグのIDを取得したい <div class="classA" id="id1">aaa</div> <div class="classB" id="id2">bbb</div> <div class="classA" id="id3">ccc</div> となっているHTMLファイルからjqueryで要素を取得するプログラムを作成しています この時、class="classA"となっているID(id1とid3)とテキスト(aaaとccc)をjqueryで取得する方法を考えています jqueryで、 var elements = $(".classA"); でclass名がclassAの要素の数を取得したり、 var id = $(".classA").attr("id"); でidを指定すれば取得することもできました しかし、これはjqueryがあらかじ

  • 指定したページのidをgetElemetByIdで

    JavaScriptのイベントで document.getElementById('test')で呼び出し元のHTML内のid="test"を指定した要素を取得する のはできるんですが、呼び出し元のHTMLのdocumentではなく、 「別の指定したHTMLページ」のid="test2"をdocument.getElementById（'test2')で 取得できますか？

  • アンカーにクラスを適用しての擬似クラスの記述の仕方について

    すみません、質問させてください。 アンカーにidを適用して <a id="abc">テスト</a> cssに下記のような記述でマウスオーバーでの変化させていたのんですが、 a#abc {} a:hover#abc {} アンカーにidではなくclassを適用して <a class="abc">テスト</a> a.abc {} a:hover.abc {} のように記述しましたところ、ポインタがおかしいです。IE6以外では、色を変えたりすることは可能でしたが、ポインタが指差しマーク状態になりません。 どなたか解決する方法をご教授ください。よろしくお願いします。

    • ベストアンサー
    • HTML
  • cssのidとclassの違いについて

    cssのidとclassの違いについて ホームページ作成でcssを指定するとき、同一ページ内に1つしか指定しない場合はidを使用し、同一ページ内に複数指定したい場合はclassを指定しているのですが、使い方はあってるのでしょうか？ 独学なゆえ間違った使い方をしているのかなぁと思い質問してみました。 もし間違っていたら正しい使い方を教えてください。またidとclassの意味の違いも一緒に教えていただければうれしいです。

    • ベストアンサー
    • HTML
EP-879AW インクカートリッジが認識できない
このQ&Aのポイント
  • EP-879AW インクカートリッジの認識エラーについて解決方法を教えてください
  • EP-879AW インクカートリッジの黒色のみがメンテナンスエラーを起こしています
  • 購入店舗で黒色の単品交換を試しましたが、問題は解決していません
回答を見る

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する