CSSの正しい記述の仕方

質問

CSSの記述の仕方なんですが、下記のような書き方は正しいのでしょうか？

.f14 {font-size: 14px;}
.bold {font-weight: bold;}
.red {color: #FF0000;}

<p class="f14 bold red">あいうえお<div>

HTMLには構成要素、CSSにはデザイン要素のみを記述と考えると正しくない気がしますが、
何度も使うような場合は、この方がCSSが短くなるので使っています。

どうなんでしょうか？
気にしすぎでしょうか。

回答No.8

UKY · ベストアンサー

> 日本語50音を、ア行は12pt、カ行は14pt、サ行は16pt、…ワ行は30pt、母音がアは赤、イは青、ウは黄、エは緑、オは桃、と表現したい場合

うーん、そんなに難しいですかねぇ。
単純に、行と段をそれぞれ class として当てはめればいいわけで、例えば文字に直接設定するなら、
<span class="a-gyou a-dan">あ</span>
<span class="ha-gyou i-dan">ひ</span>
<span class="ra-gyou u-dan">る</span>
という感じです。一つの要素に複数の class を設定できるのは知っていますよね?
もちろんこれはあくまでも一例で、例えば五十音表を作るのなら table を使って各行と各列にそれぞれ class 設定した方がいいでしょうね。

お礼

回答ありがとうございます。

>うーん、そんなに難しいですかねぇ。
いえ、難しくはないです。
ただ他の方はどうやってやるのかなー、と思って質問しました。

またご教示ください。
では失礼します。

回答No.7

yusuke_1977

> 理解できてきた上で、ひとつ質問なんですが、
> 日本語50音を、ア行は12pt、カ行は14pt、サ行は16pt、…ワ行は30pt、
> 母音がアは赤、イは青、ウは黄、エは緑、オは桃、と表現したい場合、
> どのようにHTML、CSSを記述したらベストなんでしょうか。ご教示、よろしくお願いします。

答えはすべてこのQ&Aにありますね！
さあ、あたまを使って考えましょう！

ついでなのでHTMLの記述方法について書いてあるページを、いくつか並べておきますので、がんばっていちからよ～く読んでくださいねっ（＾＾）/

http://homepage.mac.com/toda/html/11_what.html
http://members.jcom.home.ne.jp/pctips/www/introduction.html
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html.ja.sjis
http://msugai.fc2web.com/web/CSS/

参考URL：

http://www.asahi-net.or.jp/~bd9y-ktu/

回答No.6

UKY

いや、絶対に class 属性を使うなということではなくて、《デザインのために》 class 属性を使うなということです。単に div 要素に置き換えたのでは、結局デザインのために HTML をいじくっているところは変わらないでしょ?

で、先ほど「まずはデザインのことは抜きにして正しいHTML文書を完成させる。」といいましたが、実はこれは結構難しいんですよね。デザインすることに慣れていると、どうしても HTML を書いているときからデザインのことを考えてしまいます。
でも、そこでそのまま class="red" と書いてしまうのではなくて、そのデザインが思い浮かんだ理由を考えてみるんです。
「見出しだから大きくしたい」とか、「重要だから太字にしたい」とか、なんでもデザインには理由があると思うんです。で、HTML にはデザインそのものではなくて、その理由を書いてやる、と。
つまり、見出しは <h1>-<h6> を、重要なところは <em> や <strong> を、という風に書いていって、普通の HTML の書き方では足りないと思ったら class 属性を使うんです。

例えば、A さんが発言した内容と B さんが発言した内容を色を変えて区別したい、と思ったら、単に発言内容を <p> でくくるだけじゃなくて、こんな風に class 属性をつけておくんです。
<p class="a-san">[A さんの発言内容 1]</p>
<p class="b-san">[B さんの発言内容 1]</p>
<p class="a-san">[A さんの発言内容 2]</p>
<p class="b-san">[B さんの発言内容 2]</p>
そうすると後から A さんと B さんで色を変えるというようなことができるわけです。
この場合は、色を変えるというデザインの理由は「異なる人物の発言を区別するため」なので、異なる人物だということを示すような class を設定しています。

人間は感覚的な動物だから、HTML を書くときにデザインのことは一切忘れて文書に集中するというのはやっぱり難しいことです。でも、HTML を書いているときにふとデザインのことが思い浮かんでしまったとしても、上に書いたようにちょっと立ち止まって考えるようにすれば、正しい HTML を書くことは難しいことじゃありませんよ。
もちろん、理想はデザインのことは 100% 考えずに正しい HTML を書けることなんですけどね。

お礼

ありがとうございます。理解できてきました。

なぜこのような質問をしたかというと、きっかけは、classに複数のCSSを設定する事が出来ると知ったからでした。
いままでは、No.1のtabideさんのようにパターンごとに記述していました。

以前から、なるべくCSSの記述を減らしたい、効率的にしたいなと思っていたので使い始めたのですが、
はたしてこれは使い方としてあっているのかな、と疑問を持っていました。

okwebの中で「http://okwave.jp/kotaeru.php3?q=1473352」や「http://okwave.jp/kotaeru.php3?q=1444936」などの
回答を見ているうちに、やっぱりおかしいのだろうな。では他の人はどうやっているのだろうと思い、質問しました。

今では正しい記述の仕方は、どちらなのかというのは理解できたのですが、
では実際に、下記No.5のyusuke_1977さんへ質問した、50音の表現など多岐のパターンがある場合は
どうしたら正確な記述で、かつ効率的なのか、というのはまだよくわかっていません。

またご教示ください。
では失礼します。

回答No.5

yusuke_1977

> 単純に、下記のように無理矢理名前を変えて変えてしまえば、HTMLの記述的には合っているのかな、とも思っています。

横やりで申し訳ありませんが、No.2さんの回答を理解されていないようです。名前を変えただけで、本質的に何も変わっていません。

過去のHTMLに装飾効果があり、現在でも使えるために、このような間違いをされるのだと思います。

まず、「テキストデータの構造」に注目しましょう。
「全文」の中に、「章」があって、その中に「段落」があって、さらにその中に「行」があって、その中に「字」があるといった、階層構造があります。
そして、その各階層ごとに「全文の名前」、「章の名前」、「段落の名前」として見出しがついていきます。
さらに、段落には「引用」された箇所があったり、段落夜業の中で途中で「強調」される箇所があったり、「注釈」されたりする箇所があります。

現在のHTMLで使用される<h1>や<p>といったタグは、
「ここは章のレベルの見出しだ。」とか「ここは本文レベルの段落。」とか、「この固まりは強調。」など、文章部品に階層レベルを与えていく役目をになっています。

そして、HTMLによって与えられたレベルに対して、CSSが表示される形を与えていくということになっています。
これがNo.1のいわれた「構造とデザインの分離」です。

重要なのは「同じレベルの構造がいくつかあった場合に、それらに全く違う形は与えない」というレイアウトデザインの基本概念です。
デザイン的例外はあるにせよ、これに全く当てはまらないHTML構文は誰も読んでくれないでしょう。

> 特に問題なく動作はしていますが、HTMLの記述としてはまずい気がするので…

このコメントは、感覚的にこの問題をとらえた良い言葉だと思います。
が、どう記述するべきかは、やはりNo.1をはじめとした皆さんの回答の中にあります。

あなたが気に入っている記述の仕方ですが、それこそコピー＆ペーストで持っていけるのですから、なぜidやclassで名前が付けられるのか、もっとよくお考えになった方がよろしいのではないでしょうか。

http://oshiete1.goo.ne.jp/kotaeru.php3?q=1444936

記述が短くなることより、スタイルがまとまって記述されている方が、構造的な構文には有効だとご理解ください。

最後に、せっかく皆さんが好意をもって教えてくださっているのに、キチンと考えて読まないと質問する意味がありません。
HTMLやスタイルシートを一生懸命つくった人たちに対しても、失礼だと思います。

参考URL：

http://w3j.org/articles/MTstructuraldesign/MTstructuraldesign01.html

お礼

>記述が短くなることより、スタイルがまとまって記述されている方が、構造的な構文には有効だとご理解ください。

ありがとうございます。
なるほど、そうですね。理解できてきました。

理解できてきた上で、ひとつ質問なんですが、
日本語50音を、ア行は12pt、カ行は14pt、サ行は16pt、…ワ行は30pt、
母音がアは赤、イは青、ウは黄、エは緑、オは桃、と表現したい場合、
どのようにHTML、CSSを記述したらベストなんでしょうか。ご教示、よろしくお願いします。

>最後に、せっかく皆さんが好意をもって教えてくださっているのに、キチンと考えて読まないと質問する意味がありません。
>HTMLやスタイルシートを一生懸命つくった人たちに対しても、失礼だと思います。

キチンと考えて読んでないつもりもありませんし、失礼な態度を取ったつもりもありません。心外です。
もしそう感じたのでしたら、私のCSSの理解度が低いため、言葉足らずになってしまったからでしょう。

回答No.4

peg93

こちらも言葉足らずでした。すみません。

CSSを使いのは「構造とデザインの分離」が目的です。
なので、できればclassも極力使わないほうがいいんです。
（デザインのためにHTMLに追記するのは、デザインが構造に干渉しているので）

どうしても使うのであれば、
＞.youso1-1 {font-size: 14px;}
＞.youso2-1 {font-weight: bold;}
＞.youso3-1 {color: #FF0000;}
この方法にするしかないでしょうね。

補足

なるほど、そういう意図で回答をいただけたのですね。ありがとうございます。
そうですね。HTMLへの追加記述は少ない方がより良いですね。

でも、class使わないのは現実的には難しいですよねぇ。
下記のようにやれば減らせると思いますが…、こんどは<div>が増えますね。

#hoge h2{○○}
#hoge p{○○}
#hoge2 h2{○○}
#hoge2 p{○○}

<div id=hoge>
　<h2>あいうえお</h2>
　<p>かきくけこ</p>
</div>

<div id=hoge2>
　<h2>あいうえお</h2>
　<p>かきくけこ</p>
</div>

回答No.3

peg93

こんにちは。

<p class="f14 bold red">あいうえお<div>は
見出し もしくは 文章中で強調したい文字ではないですか？

見出しの場合は<h1>や<h2>などで、
強調したい場合は<strong>や<em>でくくってください。
そして、そのタグにCSSを指定してください。

------------------------------
例：

<h1>見出し1</h1>
<p>この文章の中で<em>ここ<em>を強調したい</p>

h1 {
　　font-size: 14px;
　　font-weight: bold;
}

em {
　　color: red;
　　font-style: normal;
}

☆注意
ブラウザの初期設定のスタイルがあるので、それが気に入らない時は
CSSで上書きしてやる必要があります。

・h1やh2は太字になってしまう
　→ h1やh2に { font-weight: normal; } を指定する

・emは斜体になってしまう
　→ em に { font-style: normal; を指定する}

私はいちいち指定するのが面倒なので、CSSの最初に
* {
　　margin: 0;
　　padding: 0;
　　font-style: normal;
　　font-weight: normal;
}
と指定しています。
（* は全称セレクタといって、全てのタグを指します）

補足

今気づいたのですが「<p class="f14 bold red">あいうえお<div>」ではなく、
「<p class="f14 bold red">あいうえお</p>」ですね。失礼いたしました。

すみません、質問の仕方が悪かったのかもしれません。
私が問題にしているのは、ANo.2のUKYさんが答えてくれたように、
「class 名が bold や red というのは結局 <b> や <font> で直接デザインを書くのと意味的には何も変わっちゃいないですよね」という事です。
特に問題なく動作はしていますが、HTMLの記述としてはまずい気がするので、何かよい記述の仕方はないでしょうか。

単純に、下記のように無理矢理名前を変えて変えてしまえば、HTMLの記述的には合っているのかな、とも思っています。
.youso1-1 {font-size: 14px;}
.youso2-1 {font-weight: bold;}
.youso3-1 {color: #FF0000;}

<p class="youso1-1 youso2-1 youso3-1">あいうえお</p>

回答No.2

UKY

というか、class 名が bold や red というのは結局 <b> や <font> で直接デザインを書くのと意味的には何も変わっちゃいないですよね?

質問タイトルは「CSSの正しい記述の仕方」ですが、むしろこれは「HTMLの正しい記述の仕方」の問題ですね。
まずはデザインのことは抜きにして正しいHTML文書を完成させる。そして後からじっくりデザインを考える。
この鉄則を守る限り、class="f14 bold red" なんてものは絶対に出てきません。

補足

>というか、class 名が bold や red というのは結局 <b> や <font> で直接デザインを書くのと意味的には何も変わっちゃいないですよね?
疑問に思っているのは、まさにそれです。

>質問タイトルは「CSSの正しい記述の仕方」ですが、むしろこれは「HTMLの正しい記述の仕方」の問題ですね
そうですね、「HTMLの正しい記述の仕方」の方がタイトル合ってますね。
でも「HTMLの正しい記述の仕方」だと、見に来てくれる人が変わってきそうですね。

>この鉄則を守る限り、class="f14 bold red" なんてものは絶対に出てきません。
では、例えばどんな書き方をしたらよいでしょうか？

回答No.1

tabide

同じ強調パターンをあちらこちらで使ってる場合(大抵はそう)、
「やっぱり、この強調は青に変えよう」
と思ったとき、修正が大変ですよ。
そのための「構造とデザインの分離」なんだし。

私なら、確実にこうしますね。

.kyocho1 { font-size: 14px; font-weight: bold; color: #FF0000; }
.kyocho2 { font-size: 14px; font-weight: bold; color: #FFFF00; }

<p><em class="kyocho1">あいうえお</em></p>
<p><em class="kyocho2">かきくけこ</em></p>
<p><em class="kyocho1">さしすせそ</em></p>
<p><em class="kyocho2">たちつてと</em></p>

<p class="kyocho1">……でもいいですけど。

お礼

※一言書き忘れていたのでこちらに書きます。

でも、tabideさんの記述の方が、HTML構成的には正しいのでしょうね。

補足

同じ強調パターンを修正したい場合は、「f14 bold red」指定で
置き換えバッチをかければいいと思うので、修正の手間はそんなに変わらないと思います。

.kyocho1 { font-size: 14px; font-weight: bold; color: #FF0000; }
.kyocho2 { font-size: 12px; font-weight: bold; color: #FFFF00; }
.kyocho3 {　}
.kyocho4 {　}
…
…
.kyocho10 {　}

と、全部のパターンのCSSを作るより、記述が短くてすみますし、
この書き方は、CSSを短くする事にメリットを感じています。