CSSに於けるidとclass 性質の違いと使い方の違い

巷のIDとクラスの解説

CSSを使いこなそうと本やWEBで勉強してみたのだが、IDとクラスの違い、使い方が良く理解できませんでした。色々な解説を見たが、「idは同一ページで同じ名前で1回しか使えないが、classは使える」という解説が圧倒的に多い。

しかし、それは現象としてそうなっていると言うことで、どちらを使うべきか、そもそもどういう定義なのか、どう違うのかという疑問に答えていない。

おそらく書いている人も「習うより慣れた」状態で、良く解っていないと思われる。

クラス

.変数名(クラス名)という形は異様であり、CSSを使い始めて最初に目にした人は、カルチャーショックのような、拒絶感を覚えるのではないでしょうか。私もHTMLの延長上にCSSが登場してきて始めてあの表記を見たときはそうでした。

実は、かつて私は今時のオブジェクティブなC(C++)でない、MS-DOS上のCを独学したことがある。一通り理解し、小さいプログラムは作れるようになって満足してやめてしまったのだが、そのとき学んだものに”構造体”(下記参照)という変数の集合体のようなものがあった。classの書き方は.クラスとドットが前に来ている。たしか構造体のメンバ変数を扱うときもそうだったような気がする。

調べなおさないでおぼろげな記憶に基づいた勘で言わせて貰うなら、CSSとはタグ全部が構造体(のようなオブジェクト?)として定義されていて、CSSファイルでメンバ変数の値をセットしているような状態かと想像する。

IDは生活上良くあるID

一方”ID”とは世間一般で当たり前に使われる、文字通りの”IDentification”の事だろう。IDカードのID。IDとパスワードのID。識別し特定するためのもので、テキストのデザインのためのCSSにおいては、ある部分を特定するための”名前”だろうか。

IDは #mainareaのように宣言しますが、#は番号の宣言のときに使いますね。#1、#2のようにIDをつけるのが本来のイメージかもしれません。

元々は id と classは併用すべきものだった

idは

・・

で指定した部分を指定するもので、そこにクラスを設定すればいいということだが、クラスは元々複数箇所で使う書式をまとめるものなので、「一回しか使わないと複数回使用する」そもそもの前提に矛盾が生じてしまう。ならば一回しか使わないid はそこに書式を記述するのが自然という事になる。というかかつて使っていたページ内アンカーにクラス的な機能を追加したのがidと考えればしっくり来る様な気がする。

違ってますかね?こういった方向からの定義の解説を探しているのだが、見つけられないでいるのです。

どなたか、このような解説のあるWEBをご存知の方は教えてください。でも自分で書くために考えをまとめていたら大分分かってきた。

*参考

構造体とは

構造体とは、あるものを表現・実行する時に、指定する必要があるものをあらかじめ一まとまりにして定義しておいて、呼び出すときは、その定義された変数名で呼び出す、とでも表現するかな。

例えば、スケジュールのようなものを扱っているとする。(以下変数や文法はイメージで、Cのお作法とは違います。)

日付=2013/04/01 と絶対値で扱ってはプログラム化できない。それでは日付+1(翌日)、日付+7(1週間後)という風に計算が出来ない。

そこで、日付の要素に分解して、変数で管理すると便利だ。
年=2013
月=4
日=1
として、毎回 今日なら[年・月・日] 明日なら[年・月・日+1]と指定すると、だいぶ管理しやすい。
でも、まだなんかめんどくさい。

そこで構造体の登場。
日付{
年=2013
月=4
=1

と定義しておいて、使うときに、今日=日付、明日=日付.+1

とすると、簡単で、把握しやすいではないですか。

上記は日付の例ではたいしたありがたみは感じませんが、では文字だったら。

表示文字{
フォント名=ゴシック
大きさ=14PX
色=黒
背景色=白
強調=なし
斜体=なし
下線=なし}

変数 タイトル=表示文字型、とすると上記の要素が引き継がれた変数が宣言されます。
タイトル.下線=あり .斜体=あり と要素を変更すると。

タイトル変数宣言後の文字表記は変更されました。

これはCSSにおけるクラスの宣言と使用に似てきました。

以上、これを正確にCSSの内部的仕様に基づいて説明していただければ、ヘンな例えより解りやすいと思うので、どなたか助けてください。

タイトルとURLをコピーしました