Index
Memo
css, xhtml
class=redとかclass=hiddenとか

class=redとかclass=hiddenとか

kz
2007-03-13 (火) 18:46
css, xhtml

<p>この部分は<span class="red">期末試験の範囲</span>だよ！</p>

.red {
    color: red;
}

とか。

.alignright {
    text-align: right;
}

とか、

.left {
    float: left;
}

とか、

.hidden {
    display: none;
    visibility: hidden;
}

とか、

.clearfix:after {
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    content: ".";
}

とか。

視覚効果のために文章構造を変えるのはよろしくない

さんざん言われていることだけれども、未だに上記のようなことが書かれているエントリがあがっていたりして、少し悲しく思うのでした。いくらサイトデザインの面で楽になる、サイトのメンテナンス性が向上するからとはいえ、そのために文章構造を変化させるのは本末転倒ではないでしょうか。”.clearfix”など、気持ちはわからなくもないですが、右に寄せたいからrightと名付けたり、非表示にしたいからhiddenと名付けたりするのはよろしくないですよね。

ある程度妥協しなければならない場面もある

とはいえ、現状ではCSSの仕様通りに実装されていないせいで文章構造が冗長にならざるを得なかったり、どうしてもそのままでは表現しきれないデザインであったりする場合は妥協することもありますよね。それがプライベートではなくビジネスならなおさらだと思います。マークアップって難しい。

結局なにが言いたいかというと…

下の会話文が書きたかっただけなのです。みなさん怒らないでっ

HTMLくんとCSSちゃん

CSSちゃん:

HTMLくん、どう？強調してあげたいところを赤字にしたいときにclass=”red”とか用意しておけばあちこち使えて便利じゃない？

HTMLくん:

同じデザインにスタイルを適用させるために、汎用化するのはいいよね！そこは認めるよ！でも重要な部分すべてにclass=”red”は認めないよ！

CSSちゃん:

class=”red”でもいいじゃない、コードを見ても「その部分が赤になる」ってわかりやすいし！

HTMLくん:

じゃあたとえばさ…

<p>この年の運動会は、<span class="red">白組</span>の勝利！</p>

これだと、文章構造としては”白組”なのに”red”って意味がついちゃうよ？

CSSちゃん:

うう…なら赤組が勝ったことにしちゃおうよ！

HTMLくん:

その発想はなかったわ

Newer: WordPressはじめ
Older: html要素とbody要素のbackground-color

Comments: 10

コバ 07-03-13 (火) 20:20

[red]ということに焦点をあてとみると、注意文として文字を赤くするなら、[attention]とか、強調するべき部分なのであれば、[strong]とか。。。
最近はそんな感じでやってますね。

kz 07-03-14 (水) 10:25

単なる強調であればem要素で済みますし、注意文であればコバさんの仰るとおりであると思います。
本当はこんな記事を書かなくても、みなさんがわかっていて口に出さないだけなのはわかっているのですが、そうではない方の記事に「これはすごい」とか「便利」とか思われている方々がいるとするならば、それはどうなんだろうなぁと思ったわけでして。

コバ 07-03-14 (水) 21:22

以外と「こんなこと、見栄えさえあってればどうでもいいよ」と考えている方々が、業界内にはまだまだ多いと思います。
そんな現状から見ればとてもともて意味のあるエントリーな訳で。。。
私もコメントしてみちゃいました。

今後とも有意義なエントリー期待しています！！

kz 07-03-18 (日) 07:21

業界内では特に多いですよね。
コメントありがとうございますー　:-)

とおすが 07-05-01 (火) 03:11

ええと……
>これだと、文章構造としては”白組”なのに”red”って意味がついちゃうよ？
そうなんですか？ class が？？
id ならまだしも class を意味として誰（何）が受け取るのでしょうか。
自分の場合、実際“class=textRed powLv01”や“clearFix”など使ってしまっていますが、マズい理由が判らないので教えていただければと思います。
正解が“div.entry ul.reaction”とかだとしたら差が判らないのですが……。

kz 07-05-01 (火) 13:38

＞とおすがさん
はじめまして＞＜
HTMLくんとCSSちゃんの会話文ですが、そのキャラ性を書きたかっただけなので解説としてはあまり適していないかもしれません。クラス名については、神崎さんの解説が適切だと思います。
XHTMLには多くの要素が存在しますが、それだけでは当てはまらない内容もあり、より細かな意味づけが困難となります。そこで、ユーザがより細かく意味づけするための属性がclass属性となるわけです。そうやって意味づけをすることによって、機械が意味を理解して処理することが出来るわけです。なので、class属性には自由に属性値をつけることができますが、より的確な意味合いを持った値を与えた方が望ましいでしょう。

それを踏まえて考えると、textRedやclearFixはどちらも視覚効果に関連しているネーミングですよね？<span class=”textRed”>hoge</span>は、<font color=”red”>hoge</font>と変わりないと思いますが、いかがでしょう？

とおすが 07-05-02 (水) 00:38

なるほど。
教えていただいた“神崎さんの解説”ページ読みました。

> <span class=”textRed”>hoge</span>は、<font color=”red”>hoge</font>と変わりないと思いますが

ふさわしい要素を選択するという理由から、変わりないということはないと思います。それから、hogeではこの場合の例としては判断つかないかなあ、と……。

> ユーザがより細かく意味づけするための属性がclass属性

ユーザって誰の事ですか？？
サイトまたはコンテンツの目的、それからオーサー、ルール次第では class がCSSによる制御だけの為に扱われる場合ならば、redでも全然問題ないような気がするのですが……。
ルールとして視覚効果に関連しているネーミングで統一されるとしたら、それこそが過ちと思われますか？？

kz 07-05-02 (水) 09:05

＞とおすがさん
コメントありがとうございます:)

ふさわしい要素を選択するという理由から、変わりないということはないと思います。それから、hogeではこの場合の例としては判断つかないかなあ、と……。

僕が2つを比べて変わりがないと思ったのは、どちらもXHTML自体に視覚効果を求めているからなのです。<span class=”textRed”>も<font color=”red”>もそのテキストの色を赤にするためにつけられていますよね？視覚効果を求めてXHTMLを記述するのはよろしくないです。
/* ご存じでしたら読み飛ばしてください */
なぜ視覚効果をXHTMLで求めてはいけないかというと、W3Cは文書構造と修飾を分離するためにCSSという仕様を勧告し、HTMLやXHTMLからfont要素など見た目に関するものを非推奨属性として廃止する方向だからなのです。(XHTML1.1ではすでに廃止されている)
/* — */
なので、視覚効果を求めてXHTMLを書いているのなら、たとえCSSで色をつけていたとしても、昔のfont要素で色を指定したのと同じだよね、と思い「変わりないのではないか」と発言したのです。
もし、<span class=”textRed”>が見た目のためではなく、内容に意味づけするために”textRed”と名付けられたのならば、<font color=”red”>とは違ってくると思います。(とはいえ、おそらく汎用的に使うためにtextRedと名付けられたとは思いますが…)
hogeは例えとして適切ではなかったですね、すみません。

ユーザって誰の事ですか？？

申し訳ありません。XHTMLを書く人、つまり僕たち人間のことをいいたかったのです＞＜

class がCSSによる制御だけの為に扱われる場合ならば

上でも述べたとおり、XHTMLは文書構造を示すための言語です。CSSで制御するためにclassを扱うこと自体が、視覚効果を目的としていないでしょうか？

ルールとして視覚効果に関連しているネーミングで統一されるとしたら、それこそが過ちと思われますか？？

これは問いかけていらっしゃるのでしょうか？XHTMLはそこまで厳格に仕様が定められているわけではなく、ある程度自由にかける言語であると思います。なので、記述する人が視覚効果に関連しているネーミングで統一したとしても、使用の範囲内であれば間違いではありません。好ましくもありませんが。とはいえ、実際にはそうも言っていられない状況も出てくるので、ある程度の妥協も必要だよね、とこのエントリ内で述べております。

いかがでしょうか。文才がなくてすみません＞＜

足からかめはめ波 07-05-02 (水) 10:23

こんにちは。横からお邪魔します。
私にはkzさんの伝えたいことも、”とおりすが”さんの言いたいこともよくわかります。
コメントを読む限りでは、おそらく”とおりすが”さんもkzさんの伝えたいことはわかっているんだと思います。が、部分的に誤解を招いてしまいそうなかき方なので、指摘しておられるんでしょう。勝手な推測ですが。

まず、XHTMLでマークアップすることは、テキストに意味を付けていくというより、意味を明示させるといったほうが近いですね。文書ならばテキストはその意味をすでにもっているので、それをXHTMLで定められた記法・要素を用いて明示させていくという説明が良いようにおもいます。

class属性やid属性は意味を明示するためではないので、用意された要素でのマークアップとは少し違いますね。class=”red”としても、それはただのred(アール・イー・ディー)という名前の１つの値です。
kzさんはユーザーからみた意味付けと仰っているので、誤解を招きそうですが理解しているものだと思います。

それで、このエントリーではHTMLくんとCSSちゃんの会話のとおり、意味を持ったテキストならば、XHTMLでは見栄えで人間の感覚でいうところの強調を値(文字列)で表現するより、XHTMLではもっと相応しい方法があるよ。ということを言いたいのだと思います。
そしてひいては、「もう少し考えてマークアップしようよ!」というメッセージがあるのではないでしょうか。　それらは誰のためでもなくとも、まず直接自分に便利に働くものでしょうし。

とおりすがさんがコメントしたように、class名にredや clearFixとつけても、それが考えの上なら何も問題はありませんね。複数人で作業するときに(知識的に差があって)他の人がわかりやすいようにそうしたほうが効率よく作業でき、なおかつ、文書や見栄えが未来永劫変化ないならば良いですね。でもそういう文書はまれで、他に代替手段があるならば、私はより便利な方法を選びます。
–
.clearFix {
..(clearFixの内容)
}
<div class=”entry clearFix“>…</div>
<div class=”comment clearFix“>…</div>
–
よりも、
.entry,
.comment {
..(clearFixの内容)
}
<div class=”entry”>…</div>
<div class=”comment”>…</div>
のほうがはるかにメンテナンスしやすいでしょう。

長々と書きましたが、私はこの記事はXHTMLやCSSの初心者へと発した文章だとおもいます。そして先に書いたとおり、も少し考えてXHTMLを書けば、もっともっと扱いやすい文書ができるよ。ということが言いたいのだと思います。

kz 07-05-02 (水) 12:07

＞足からかめはめ波さん
こんにちは！コメントありがとうございます＞＜

テキストに意味を付けていくというより、意味を明示させるといったほうが近い

そうですね、足からかめはめ波さんのコメントを読んで、自分が意味を履き違えて理解していたことがわかりました。ありがとうございます:)
エントリを書く際には、きちんと理解したうえで書いていたのですが、改めて勉強不足だなぁと認識しました。とおすがさんが「kz*の言ってることおかしいだろ」と思ってつっこんでいたのなら、とても恥ずかしいことこの上なしですね、なにいってんだ自分＞＜
フォローありがとうございました！