花の歌奏

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


クリスマスまで、あと10日を切りましたね(*´ω｀*)

みなさんは、クリスマスの思い出ってありますか？

私は、クリスマスってあまり思い出らしい思い出がありません。


例えば、学生時代に、恋人と遊びに行ったなんて記憶もないです(;^ω^)

大人になってからも、そんな甘い記憶はないです(笑)

しいてあげるとするなら、学生時代に当時仲の良かった私含め3人でクリスマスパーティーをしたことくらいです(*´ω｀*)

もう連絡先もわからないけど、元気にしてるのかな？



また、連絡が取れるならとってみたいものです(´・ω・｀)



さて、本日は、前回の続きとして「ホームページの作り方 〜知ってないと大損編06〜」となります。

ということで、今回はCSSの詳細度を少し詳しく話したいと思います。


では、質問です。

今回は、なぞなぞです。

福岡、大阪、東京

いつも眠いのはどこの人でしょう？

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



さて、本題です。

CSSの詳細度とは何か。

わかりやすーく言えば、CSSの優先度ということになります。

例えば同じ個所を示したCSSの記述でも優先度によって、そのCSSの内容が効いたり効かなかったりするんです。


さて、この優先度、基本的な考え方はポイント制で、いろんなサイトで紹介されています。

ただ、そもそもホームページを作る事に慣れていなければ優先度の違いって分からないと思います。

なのに、絶対ぶつかってしまいます。

そこで、私のブログでは簡単な優先度の上げ方を2つ紹介したいと思います。

まず1つ目。

以前、名前（印)の付け方として、classを紹介しました。

例えば、

<p class="abc"></p>

みたいな使い方でした。

これと同じようなもので、

idというものがあります。

使い方はまるっきり一緒で、

<p id="abc"></p>

となります。

classとidの違いは、基本的に名前（印）をつけるという意味で一緒なのですが、idのほうはclassよりも優先度が高く、さらにそのidを付けた個所はhtmlとしても印になるため、その部分へ直接飛ぶ（リンク）なんてこともできます。

それは、またおいおいとして、CSS上では、classと同じように文字色を変えたり等できます。

ただ記述がちょっと違います。

classの場合は頭に「.（ドット）」をつけていましたが、idの場合は「#（シャープ）」をつけます。

具体的に上記の記述を例に書いてみると、

#abc {
color: #00ff00;
}

このようになります。

じゃあ意地悪な質問です(*´ω｀*)


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


ホームページを作る上でこんな書き方を実際にすることがあるのですが、見てのとおりidとclassが指定されています。

では、


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

見てのとおりどっちも同じ個所を示していますが、idとclassで指定されている値が違います。

idの方は文字色赤
classの方は文字色青

では、どんな表示になるでしょう？


ここまでの内容を読んでくれていたら、きっとわかりますよね(*´ω｀*)

文字は赤になります(*´ω｀*)

さて、ということで、同じ個所をidとclassで書かれていたらidのほうが優先度が高いということがわかりました。

では、次回は、CSSの詳細度でもう一つ覚えておいた方がいいことです。

CSSの詳細度は遅かれ早かれぶつかるところなので、しっかり読んでくださいね(*´ω｀*)

ということで、今回はこの辺でー(*´ω｀*)ﾉ

なぞなぞの答えは、大阪でした(*´ω｀*)

「福岡県民」「大阪府民」「東京都民」

おおさか不眠


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