ブログやホームページ作成していると
「id」
「class」
を頻繁に耳（目）にすると思います。
セレクタ属性？と言われてる物？みたいで、CSSで作った答え（命令）をHTMLで実行させるための、exeファイルみたいなものだと考えてます。
その問題の名前を付けるわけですが、両方とも同じ様な使い方になると思います。
でも、決定的な違いは
id名（CSSで#を付けて作った答え）は使い回しは厳禁。
class名は（CSSで . を付けて作った答え）は使い回しＯＫ！！
です。
なぜか？
そう処理するようにプログラムされてるから。
実際は、同じid名を使っても問題なく画面上では表示されることもあると思いますが、重要度の違い。と考えたらいいと思います。
id名は「世界（自分のブログ）に一つだけの花」なんです・・・。
あくまでもCSSで作る「id」の名前が、です。
名前が違っていれば大丈夫です。
HTMLで入力する「id」
その後ろにCSSで作った名前を入力する。
<p id="CSSで作った答えの名前">
idは苗字です、
CSSで作る名前は子供の名前です。
二人いる子供の名前を同じにすることはないですよね？
長男は太郎くん。次男も太郎くん。
会話の中で「太郎くんが・・・」と言われても、長男か次男のどちらの事を話しているかわからないですよね？
サイト上でも同じみたいです。
重要度が高いと指定している全く同じ物が、同じページで何度も出てくると、どこの位置にある物が重要としてるのか判断できずにスルーされるみたいです。違う名前だったら、それぞれが別物で重要度が高いと判断してくれるので大丈夫みたいです。
サイト上でウォーリーを探せ状態はダメって事です。まぁ、本物のウォーリーは一人しか出てこないですけどね・・・。
なので、使い回しをしたいデザインを作る時は、class属性を使います。
clsaaは着ぐるみと思いましょう。
見た目(デザイン)は同じ、中身は違う人(違う内容)。
見た目は子供、頭脳は大人(高校生は子供だろ)な着ぐるみを作りましょう。
でもわかりにくいです。
「セレクタ」って言葉。
「セレクタ属性」
と書かれている時も有れば
「セレクタ」
とだけ書かれているものもあります。
同じ物なのか違う物なのか？
自分の中では(あくまでもワタクシの中での話です)
HTML上でのセレクタとCSS上でのセレクタは違う意味・・・だと思う
と位置付けました。
HTML上でのセレクタとは上記のような「id」や「class」などで、CSSで作って名前を付けたデザインを名指しして、サイト上で表示させる為(実行させる為)の命令コマンド。
CSS上でのセレクタとは、
{ } 内
のデザインを何に紐付けするかを選んだ物。
例えば
{font-size: 30px;}
と、フォントサイズを30pxに指定しました。では、何に対してその指示を出しますか？
その選んだ物がCSS上でのセレクタ。
CSS上
p{font-size:30px}
h1{font-size:30px}
.size{font-size:30px}
#size{font-size:30px}
上記の例で言うと、セレクタ(紐付け先を選んだ物)は「p」「h1」「.size」「#size」全てがCSS上でセレクタとなるっぽいですね。
ここが分かりにくい。
セレクタって言ってる「id」や「class」は属性と言われてる。なのにセレクタとして選んだはずの「p」や「h1」は要素と呼ばれてる。
ではセレクタと調べると、属性の方が出てきて「p」や「h1」は載ってない。
でも「p」をセレクタとして…みたいなこと書いてるし・・・。
うぉー
オイラの頭では分からん！！
って思ってましたね。
でも、
HTMLとCSSは似ているけど、全く違う会社
と考えるようにしました。
今後はこの考えでHTMLとCSSを考えていこうと思います。
（これ以下は戯言です）
同じ言葉でも、会社が違えば意味が違ってくるのです。
思えば、追加メーターやブーコンやセキュリティーなど（いわゆる「改造パーツ？」）車のパーツを色々と自分で取り付けしていた古き良き時代は
赤線→常時電源
黄線→イグニッション
白線→スモール
緑線→カーテシ
黒線→アース
代表的なのは上記ですね。自分はこれは共通事項だと思ってたのです。
ですが、同じ車でもカーオーディオでは
赤線→アクセ（イグニッションでいいと思います。国産車のアクセサリー電源（シガーソケットの電源など）はエンジンをかけないと（ACC位置にカギを回したら付きますがバッテリー上がりの懸念があるので、エンジンをかけずにACCの状態で長時間使用するのは控えた方がいいかと思います。輸入車のアクセ電源は、常に１２Vが流れている車両が多かったです（バッテリー上がりの原因→シガーソケットに電流が常に流れるアクセサリーをさしたままの状態）。自分でいう当時なので今は不明です）
黄線→常時電源
橙色→スモール
白線→スピーカー
緑線→スピーカー
黒線→アース
だったのです！！
衝撃でした。
はっきり言ってオーディオ（音質など）は二の次で（いわゆる改造で「いい音」でしたので・・・。）全く無知。
ナビやオーディオ（CDですね。時代です）を取り付けする際は「取り付け配線キット（NITTOさん）」でカプラーオンだったので。
取り付け説明書は大事です。
関係のない話が長かったですが、
CSSやHTMLの「取り扱い説明書」みたいな書籍を読んでいないワタクシなので、手探り状態のネット知識人。
知りたい・理解したい知識は、ネットでは自分で取捨選択しないとダメなのです。
「トライアンドエラー」（正確にはトライアルアンドエラーみたいです」
そこに「サクセス」（頭はスッキリ爽快・・・）を足すのです。
って事で、
「CSSのid属性とclass属性の違いを簡単に考えた」
に、ほど遠い最後になりましたが、そういうこと（どういうこと？）です。
ではでは
