プロパティ

HTML と CSS のプロパティ

師匠

colorbackgroundだけやと飽きてきたから、そろそろ新しいプロパティをやるか。

弟子

プロパティ?

師匠

なに?

弟子

プロパティっていうのは、HTMLの要素に付け加える、例えば class とか、<a>要素の href とか、<img>要素の src とか、ですよね?
colorbackgroundは、CSSのものですよね?

師匠

HTMLのプロパティ と、 CSSのプロパティ があるんや

弟子

へ?

師匠

お前が言うたのは、 HTMLのプロパティ やな。
class とか、<a>要素の href とか、<img>要素の src とか、っちゅうのは。

師匠

CSSにもプロパティ がある。
既に使っているcolorとかbackgroundや。

師匠

なお、ワイはHTMLの場合、「属性」と呼んでいる。
ま、属性を英語にすると property(プロパティ) なんやけどな。

弟子

そうですね。要素の 属性 と言ってますね。

師匠

ま、ええ機会やから、まとめとく。

用語のまとめ

  • 要素、タグ : HTMLコード : <html><head><body><p><a> など。
  • 属性 : HTMLコード : classhrefsrclang など。
  • プロパティ : CSSコード : colorbackground など
師匠

ついでに、書き方の復習や。

師匠

まず、HTMLコード。

師匠

次に、CSSコード。

師匠

大体 分かるな。

セレクタ

弟子

CSSの セレクタ と言う言葉は、初めて聞きました。

師匠

セレクト(選択)するためのものやから、セレクタや。
なお、一般常識的には、セレクターやけど、ワイは工学部出身やから 最後の「ー」は伸ばさないで、セレクタ

弟子

工学部??

師匠

まー、そのうち話してやるわ。
あんまり、無駄話をしてると 読者が去るからな。

弟子

師匠

最初、<p>とか<h3>の要素で、選択しとったな。
でも、要素ごとやと融通が利かなんから、 class 属性で、種類ごとラベルを付けてたな。(哺乳類とか)
それは、CSSの適用先を選択するために書いていたわけや。
そういうのを、セレクタと呼ぶ。

弟子

なるほど。

師匠

なお、このセレクタ、極めて奥が深い!
スッゴイ選択の仕方があんねん。
ただし、お前には未だ難しいやろな。
そこまで付いてこれたら教えてやる。

弟子

意味深な。。。

師匠

で、何の話やったっけ?

弟子

colorbackgroundだけやと飽きてきたから、そろそろ新しいプロパティをやるか 」と仰っていました。

師匠

おー、そうやな。
ほな、なにやろ。
borderプロパティにするか。