- ベストアンサー
クラス名のネーミングはどうすれば分かりやすいか
- クラス名を適切に付けることで、スタイルシートの宣言部分を確認せずにどんな動きをするのかを理解できます。
- 一般的には動作と関係のないクラス名が使われますが、その理由はわかりにくくなる人が多いためです。
- わかりやすいクラス名を付けることで、他の人がコードを読む際にも混乱を避けることができます。
- OHWIMRMJUPMK
- お礼率100% (35/35)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
No.2です。読み返してみるとわかりにくいかもしれないので、HTML5的に説明しましょう。 <body>!-- HTML4.01の場合は、それぞれが<div class="header">になります。 <header>略</header> <section> <h2>HTML 4による文書の著述</h2> <p>本仕様は、HTML 4で作業を行う著者並びに実装者に対し、次の一般原則に従うよう推奨する。</p> <section> <h3>構造とプレゼンテーションの分離</h3> <p> <abbr title="Hyper Text Markup Language">HTML</abbr>は、常に構造的マーク付けを規定するところの<abbr title="Standard Generalized Markup Language">SGML</abbr>をルーツに持っている。<abbr title="Hyper Text Markup Language">HTML</abbr>の性質上、プレゼンテーションに関する要素や属性は、次々と他の機構、とりわけ<a href="http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html">スタイルシート</a>に置換えられていく。 また、<em>文書の構造をプレゼンテーションと<strong>切り離すことで</strong>広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になるということが、経験的に知られている。</em> </p> </section> <section> <h3>広汎なWebアクセス性の考慮 </h3> <p> ・・・【中略】・・・ </p> </section> </section> <footer>略</footer> </body> ＞スタイルシートでクラス名を宣言してbody内で使う場合は、クラス名だけ見てどんな動き--プレゼンテーション？---をするのかわからなくなってしまわないですか？ No.1さんが言われるように、そもそも順番が逆なのです。HTMLに必要なことは、上記のように徹底的に文書構造だけをマークアップするのです。 だから、HTMLの段階ではどのようにプレゼンテーションするかは、まったくわからないのです。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ なぜなら、どのようにプレゼンテーションするかのためにマークアップするのではないからです。 一方のスタイルシートは、その文書構造を元に指定していくのです。 [例] section p{text-indent:1em;margin:0 1em;line-height:1.6em;} section p abbr{font-weight:bold;} スタイルシートを見るだけで、どのようにデザインされているかがわかります。 ★面白い例を見つけたので ⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) 1) まず、HTMLのソースを見る--極めてシンプル 2) 印刷プレビューで印刷したらどうなるかを確認 3) ブラウザの表示メニューのスタイルで、沢山あるスタイルのどれかを選択してみる。 ・文書構造とプレゼンテーションを分ける ・HTMLを見たってプレゼンテーションはわからない。わかるほうがおかしい。 が理解できますよね。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
１度仕様書を通して読んで置かれると良いです。はじめはチンプンカンプンでも、とにかく目を通すこと。 <HTML> ではなく <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> と書き始める。 「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。」 「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」 ですから ＞「<SPAN class="pe">って何を宣言してるんだっけな？」と分からなくなり と言うことはありえないのですよ。 なぜなら、 ・HTMLは、その文書を読み解き、その文書を構成する要素(Element)に分解し、それぞれの要素をタグでマークアップしていくのです。 <h1></h1>で囲まれていれば、その部分が見出し(heading)要素だとわかります。 <strong></strong>だと重要なのだな・・ ・それらでは表しきれないときにDIVやSPANをidやclass名をつけてマークアップします。 <div class="header"></div>見出しのセクションだなとわかります。 <div class="figure"></div>ああ、挿絵だな <span class="mark"></span>ああ、他所から参照されるテキストだな とね。 その上で、スタイルシートを div.section p span.mark{text-decoration:underline;color:green;} とか書くのですから、わからなくなるわけありません。もしわからなくなるのでしたら、class名のつけ方がおかしいといわざるを得ません。 ところが現実には、「文書構造を補完するため」ではなく「デザインのために」適当なclass名やidが使われてきたのです。--そのようなサイトは参考にしないほうが良い-- その反省からHTML5では、「文書をよりよく構造化するために、新しい要素が追加されました」 実際にどのようなclass名がよいかは、HTML5の「3.1. 新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」が参考になるでしょう。上記のmarkは、そのひとつです。 ＞皆動作とは関係ないクラス名をつけてますよね。 動作がプレゼンテーションを意味し、文書構造を意味するのでしたら、それが正しいのです。 [例] <span class="red">ここはメモしておこう</span> span.red{color:red;} <span class="message">ここはメモしておこう</span> span.message{color:red;} 明らかに、下が正しいですね。先で背景をマゼンタにしたので、この色を青くしようとしたら span.red{color:aqua;} span.message{color:aqua;} ・・・ ※<font color="red">じゃまずい(非推奨)から<span class="red">にしたのと変わりません。意味ないですね。<strong>,<em>,<abbr>,<code>,<dfn>,<samp>,<kbd>,<cite>など( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/text.html#h-9.2.1 )を探して、適当なものがなければ、最後の手段として<span>とclass名やidを組み合わせてマークアップするのです。 後でデザインを変更するのもとっても楽になります。 div.section div.nav{position:absolute;left:0;width:20%;} と本文(section)中のナビゲーションを左においていたけど 右にしたり、div.section div.nav{position:absolute;right:0;width:20%;} 下に置いたり、div.section div.nav{position:absolute;bottom:0;width:100%;} 消したり、div.section div.nav{display:none;} 自由自在・・に、もしこれを <div class="leftMenue">なんてしていたら・・・(^^)
お礼
ありがとうございました。
- kmee
- ベストアンサー率55% (1857/3366)
考え方が逆のような気がします。 クラスは、タグに意味を追加するものであって、CSSで書式を変えられるのは、副次的なものだと思います。 「fontを2倍に大きくする」クラスを作って「peと名付ける」 のではなく 「『同じ種類』と考えられる部分を クラスpeと名付け」て、「peクラスは文字を倍の大きさにする」 という考え方 だから、動作を意味する名前ではなく、「種類、性質」を表わすような(広告、とか、ヘッダ/フッタとか)名前を付けます。 あとは、入門サイトで説明用に、とりあえず区別さえ付けばいいと、適当に付けてるとか プログラムで自動生成されたものだとか。
お礼
ありがとうございました。
お礼
ありがとうございました。