CSSの仕組みは大まかには理解していますが、基礎的な概念をきちんと整理していなかったので、メモもかねて記します。
#はid属性を指すのに使い、.はclass属性を指すのに使う
例えば、以下のようなHTMLがあるとします。
<div class="exapmle1">
<div id="exapmle2">
本文
. . .
</div>
</div>CSSは以下のように記述します。
/* これはdiv class="example1"に対して適用される */
.example1 {
属性: 属性値;
}
/* これはdiv class="example2にたいして適用される */
#example2 {
属性：属性値;
}example1やexapmle2のことをセレクタ(selector)と呼びます。
属性と属性値の部分は、”color: red;”などと記述。
属性(attribute)と値(value)の間はコロン(:)で区切り、これらを複数記述する場合は間にセミコロン(;)を入れます。
要するに、
color: red;
border-color: blue;
と記述。
セレクタの範囲は{ }で囲む。
#も.も無いものはHTMLタグを指す
セレクタの前に#も.(ドット)もない場合、HTMLのタグを指します。
例えば、
/* これはasideタグを指す */
aside {
padding-right: 10px;
}
/* これはmainタグを指す */
main {
padding-right: 0px;
}
asideタグは、コンテンツの横にあるメニュー領域を指すもの。
mainタグはbodyタグ内のメインとなるコンテンツの部分を表すタグ。
HTMLタグをセレクタとすることも可能。
複数のセレクタを指定する場合はカンマ(,)で区切る
言葉のまま。
複数のセレクタを一度に指定する場合は、カンマ(,)で区切る。
h2, h3 {
color: red;
}セレクタの間の半角スペースは子要素への適用という意味
ある要素の中の子要素について指定する場合、半角スペースで区切りる。
この例の場合、asideタグの中のexampleクラスだけに対して適用される。
aside .exapmle1 {
padding-right: 10px;
}継承(Inheritance)
入れ子構造になっている親要素のCSS属性が子要素にも引き継がれる、というのが「継承」(Inheritance)。
継承される属性と、されない属性があるので、注意が要ります。
具体的には、以下のHTMLに対し、
<div class="example1">
color(文字色)は継承される
<p class="example2">この段落にborderは継承されない</p>
</div>CSSが以下の通りだとすると、
.example1{
color: red;
border: 2px solid black;
}ブラウザには以下のように表示されます。
この段落にborderは継承されない
divのcolor(文字色)を赤に指定し、子要素のp(段落)でも同じ文字色で表示されています。
これが、継承。
継承されない属性もある
属性によっては、子要素に継承されないものがあります。
例えば、上の例ですが、border属性は子要素(p)に継承されていません。
もしborder属性も継承されているならp(段落)も枠線で囲まれるので、2重の枠ができるはずです。
が、されていないので、border属性は継承されていないということになります。
継承されない属性値の一覧は以下の記事でまとめています。
継承を強制する方法
標準では継承しない属性値の継承を強制させることも可能。
その場合、CSSの子要素のの属性値に、明示的に継承を明記する。
具体的には、継承する子要素の属性値としてinheritを記述する。
具体的には、以下。
HTMLは以下のとおり。
<div class="example1">
<p class="example2">この段落にborderは継承されない</p>
<p class="example3">この段落にborderは継承される</p>
</div>CSSは以下のようにします。
.example1{
color: red;
border: 2px solid black;
}
.example3{
border: inherit;
}以下のように表示される。
この段落にborderはされない
この段落にborderはされる
以上です。
おわり。
