花の歌奏

みなさま、こんにちはー(*´ω｀*)ﾉ
花です(*´ω｀*)


唐突ですが、みなさんにとって「冬といえばこれ！」と言われるものを3つ挙げるとするなら、何になるでしょうか？

題名をつけるなら「私の冬の三種の神器」といったところでしょうか(笑)

私にとっての冬の三種の神器は、

1.ファンヒーター
2.電気毛布
3.タバスコ

です。

私が冬に主に使う暖房器具は、石油ファンヒーターです(*´ω｀*)

ほんと温かいですよねー(*´ω｀*)

小さい頃はヤケドしない程度に、ファンヒーターの前に座っていて、よく母にみんなも寒いんだからどきなさいって怒られてました(笑)

そして、寝る時はファンヒーターをつけっぱなしなんて怖すぎるので電気毛布です(*´ω｀*)

しかも、これのいいところは、ハクと違い滅多に記事には出てきませんが、私の愛娘のくっきーが暖を取れるところです(*´ω｀*)

くっきーはなぜか、猫用の暖房カーペットは嫌いなくせに寒がるのでこれが一番です！

そして、最後のタバスコですが、私昔からあまり暖房器具に頼ることが好きじゃなくて、お布団にくるまってることが多かったんです。

そんなとき、家にあまり使われずに余っていたタバスコを辛いもの好きってだけの理由で瓶から全部コップに移しちびちび飲んでみたんです。

そしたら、

(ノ・ω・)ノオオオォォォ-
体が温まるー(*´ω｀*)
これはいい！

ということで、冬になると私はタバスコを飲みます(笑)

我ながらあほだなーとは思うのですが、タバスコおいしくてやめられなくなってしまって(笑)

ということで、私の冬の三種の神器でした(*´ω｀*)




さて、今回は、CSSの詳細度というお話になります。

前半部分が長すぎてしまったので、今回はさわりだけにしたいと思います。



さて、今回は質問ありです(笑)

今回も、私の大好きなラジオ番組「モーニングジャム」の問題ですのコーナーからお借りしました。

では、問題です！


開発メンバーが、ヒントを得たものは「自転車」でした。
今も、「その機械を使う」という意味でその言葉が使われています。

この言葉、何でしょう？


ヒントは、この機械がない家は日本でかなり少数だと思います。


正解は、最後に(*´ω｀*)


それでは、本題です。

CSSの詳細度というお話。

に入る前に大事なお話を一つします。

ちょっと意地悪な質問ですが、


h1 {
background-color: #aaaaaa;
color: #ff0000;
}
h2 {
color: #00ff00;
}
h1 {
color: #0000ff;
}


上記の様な記述をcss内でしてしまったとします。

h1で背景色をグレー指定と文字色を赤指定
h2で文字色を緑指定
h1で文字色を青指定

お気づきだと思いますが、h1が2つあります。

では、この場合、

実際にホームページ作成した場合どう表示されるでしょうか？

正解は、


h1に関してのみにしますが、背景色はグレーで文字色は青となります。


軽く解説をすると、同じセレクタ（h1）に別々のプロパティ(background-colorやcolorなど)を書いた場合は、セレクタが複数あっても被っていなければ全てちゃんと反映してくれます。

ただ、同じプロパティを書いた場合（被っている場合）は、あとに書かれた方が優先して読み込まれます。

まずこれが、一つの大事なお話。

CSSを書くときに気を付けてくださいね(´∀｀*)


そして、CSSの詳細度という話です。

例えば、次のようなhtmlとCSSのコードがあったとします。


html

<div>
<p class="abc">あいうえお</p>
</div>


css

div .abc {
color: #ff0000;
}
.abc {
color: #0000ff;
}

示している箇所は同じpタグの部分です。

上は青で、下は赤にするというcssですが、よく見ると同じ個所を示しているのに記述が違うと思います。

さて、この場合、何色になるでしょうか？

正解は、赤のほうが優先されます。

この場合、上の方に書いた後から書いた方が優先されて読み込まれるよりも、CSSの詳細度によって先に書いた方が優先されたわけです。

じゃあ、その優先順位みたいなのってどうなってるの？というのは、また次回のお話になります(*´ω｀*)

ということで、今回も長くなってしまってごめんなさい(´・ω・｀)



それでは、今回はこの辺でー(*´ω｀*)ﾉ

問題ですの答えは、「電子レンジ」の「チン」でした(*´ω｀*)

電子レンジ使うという意味で「チン」といいますが、あれは元々自転車のベルから来たそうです！

では、~~~ヾ(*'▽'*)o マタネー♪