クラス名のネーミングはどうすれば分かりやすいか

2023/10/27 08:26

このQ&Aのポイント

クラス名を適切に付けることで、スタイルシートの宣言部分を確認せずにどんな動きをするのかを理解できます。
一般的には動作と関係のないクラス名が使われますが、その理由はわかりにくくなる人が多いためです。
わかりやすいクラス名を付けることで、他の人がコードを読む際にも混乱を避けることができます。

ベストアンサー

クラス名のネーミング

2013/03/29 00:06

スタイルシートでクラス名を宣言してbody内で使う場合は、クラス名だけ見てどんな動きをするのかわからなくなってしまわないですか？例えば、 <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css">  </STYLE> </HEAD> <BODY> <SPAN class="pe">ｔｅｓｔ</SPAN><Br> </BODY> </HTML> の時、ソースを見たときに、「<SPAN class="pe">って何を宣言してるんだっけな？」と分からなくなり、いちいちスタイルシートの宣言部分を確認しに行っています。なので、どんな動きをするかわかりやすいクラス名をつけたいのですが、（例　pe 　→　font-size）ネットでサンプルコードを見ていると、皆動作とは関係ないクラス名をつけてますよね。わけわかんなくなんないのでしょうか？こんがらがるのは私だけなのでしょうか？

OHWIMRMJUPMK
お礼率100% (35/35)

HTML
回答数3
ありがとう数3

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

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

ベストアンサー

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

2013/03/29 17:30 回答No.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を見たってプレゼンテーションはわからない。わかるほうがおかしい。が理解できますよね。

質問者

お礼 2013/04/07 20:39

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

その他の回答 (2)

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

2013/03/29 09:38 回答No.2

　１度仕様書を通して読んで置かれると良いです。はじめはチンプンカンプンでも、とにかく目を通すこと。 <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">なんてしていたら・・・(^^) 　

質問者

お礼 2013/04/07 20:39

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

kmee
ベストアンサー率55% (1857/3366)

2013/03/29 00:43 回答No.1

考え方が逆のような気がします。クラスは、タグに意味を追加するものであって、CSSで書式を変えられるのは、副次的なものだと思います。「fontを2倍に大きくする」クラスを作って「peと名付ける」のではなく「『同じ種類』と考えられる部分をクラスpeと名付け」て、「peクラスは文字を倍の大きさにする」という考え方だから、動作を意味する名前ではなく、「種類、性質」を表わすような(広告、とか、ヘッダ/フッタとか)名前を付けます。あとは、入門サイトで説明用に、とりあえず区別さえ付けばいいと、適当に付けてるとかプログラムで自動生成されたものだとか。

質問者

お礼 2013/04/07 20:39

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