コンテンツへスキップ

Just ask and you'll get the best answer

メインメニュー
  • AI
    • Gemini
    • Antigravity
    • Firebase Studio
    • Google AI Studio
  • IT&AI
    • パイソン
      • 習得
      • 暗号通貨
      • 小ネタ
    • エクセル VBA 超入門
    • WEB インターネット デバイス
      • WEB制作全般
        • wordpress
  • 投資
    • ビットコイン
      • Bitcoin Bot 「招き猫.py」 目次
        • BOT運用取引所 BitFlyer
      • ビットコインFX
    • 株データ
  • うちの猫たち
    • レオココリン写真集
  • Blog
  • Home
  • Contact
  • ホーム
  • IT&AI
  • WEB制作全般
  • CSSに於けるidとclass 性質の違いと使い方の違い
  • WEB制作全般

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

chokugeki 2013年3月25日 1 分読み取り

巷の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の内部的仕様に基づいて説明していただければ、ヘンな例えより解りやすいと思うので、どなたか助けてください。

著者について

chokugeki

Administrator

すべての投稿を表示

投稿ナビゲーション

前: ホームページ診断(引用)
次へ: カリスマ主婦アフィリエイター小林智子さん

関連記事

2018-09-24_12h43_43
1 分読み取り
  • WEB制作全般

Google先生 御乱心 広告の画面占有率を計算しろよ、バカ!

chokugeki 2018年10月6日 0
2018-09-22_19h20_52
1 分読み取り
  • WEB制作全般

【Ad Inserterの使い方】WordPressなんだから広告もプラグインで自動挿入

chokugeki 2018年9月24日 0
2018-09-23_08h02_24
1 分読み取り
  • WEB制作全般

ValueCommerce ただのリンクをアフィリエイトに自動変換『LinkSwitch』これは良すぎるしかも簡単

chokugeki 2018年9月23日 0
amazon 本日のタイムセール Time Sale
楽天モバイル、妻がiphone SE2、息子がiphone11で使ってます。一番安くて通信品質イマイチ
現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 動画290本28.5時間 \24,000 (毎月月初数日間は 1800円)

Recent Posts

  • Daycare Manager 操作マニュアル
  • 現代的なWebサービス開発のロードマップ
  • googlecloud runとfirebaseとsupabaseの機能の違いとデータ量と料金の比較表
  • Googleの新AI開発ツール「Antigravity / Firebase Studio」から見えた、コーディングの未来を塗り替える5つの衝撃
  • Google AI StudioとFirebaseを活用したフルスタックWebアプリケーション開発に関する技術レポート
  • https://speakerdeck.com スライドライブラリーの山
  • my sql でsql
  • python pandas & pandas.DataFrame メソッド
  • ビットコイン3年予想 2020年には、1ビットコイン 700万円/1億円予想も
  • 保護中: wanna_be_freeさんのMarketMakerBOTのソースコード(by magito氏)読解メモ1

  • Google先生 御乱心 広告の画面占有率を計算しろよ、バカ!
  • 【Ad Inserterの使い方】WordPressなんだから広告もプラグインで自動挿入
  • ValueCommerce ただのリンクをアフィリエイトに自動変換『LinkSwitch』これは良すぎるしかも簡単
  • Rakuten LinkShare
  • アフィリエイト access trade ローテーションPCバナー

Recent Comments

  1. Why Car Subscription Services Are Rapidly Gaining Popularity に Nick より
  2. ママベロ CR207改 ドロハンSTI化 に 通りすがりの207ファン より
  3. ママベロ CR207改 ドロハンSTI化 に chokugeki より
  4. ママベロ CR207改 ドロハンSTI化 に 通りすがりの207ファン より
  5. [□_□] bitcoin BOT for 「BitFlyer,GMO,Liquid & etc」 by 「python &etc」 ボットで寝てる間に億り人 に bot | 沖縄新報 より

見逃したかもしれません

スクリーンショット 2026-01-02 113657
1 分読み取り
  • 社会全般

Daycare Manager 操作マニュアル

chokugeki 2026年1月2日 0
image
1 分読み取り
  • IT&AI

現代的なWebサービス開発のロードマップ

chokugeki 2026年1月2日 0
image
1 分読み取り
  • 社会全般

googlecloud runとfirebaseとsupabaseの機能の違いとデータ量と料金の比較表

chokugeki 2026年1月2日 0
image-2400x1340.png
1 分読み取り
  • Antigravity

Googleの新AI開発ツール「Antigravity / Firebase Studio」から見えた、コーディングの未来を塗り替える5つの衝撃

chokugeki 2026年1月2日 0
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima incidunt voluptates nemo, dolor optio quia architecto quis delectus perspiciatis.

Nobis atque id hic neque possimus voluptatum voluptatibus tenetur, perspiciatis consequuntur.

Email: sample@gmail.com
Call Us: +987 95 95 64 82
  • AI
    • Gemini
    • Antigravity
    • Firebase Studio
    • Google AI Studio
  • IT&AI
    • パイソン
      • 習得
      • 暗号通貨
      • 小ネタ
    • エクセル VBA 超入門
    • WEB インターネット デバイス
      • WEB制作全般
        • wordpress
  • 投資
    • ビットコイン
      • Bitcoin Bot 「招き猫.py」 目次
        • BOT運用取引所 BitFlyer
      • ビットコインFX
    • 株データ
  • うちの猫たち
    • レオココリン写真集
  • Blog
  • Home
  • Contact
Copyright © All rights reserved. | MoreNews by AF themes。