花の歌奏

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


昨日、整骨院ではなく、整形外科に行ってきました。

レントゲンなどしっかり撮ってもらったうえで、極度の酷い肩こりと確定しました。

もう本当に痛いんですよ……(´・ω・｀)

痛みで手が震えるなんて、それも肩こりでなんて情けないというかなんというか……。

しかも、仕事がまともに出来ないレベルって、某美容家さんの言葉を借りるなら


「どんだけ〜！」


です(´・ω・｀)

ちなみに、実家知ってます(´・ω・｀)


ということで、今朝も痛み止めを飲んでのお仕事です！

がんばるぞー(^^)/



ということで、今回は少しお休みしていましたが、CSSの詳細度のお話に戻りたいと思います。

ですので、「ホームページの作り方 〜知ってないと大損編07〜」となります！



質問は、今回もなしで！


さて、CSSの詳細度ですが、前回は

classよりもidの方が優先される

というお話でした。

でも、idってclassと違って、必要な時以外は使わないことが原則です。

じゃあ、どういうときに使うの？って話になりますが、かんたーんに言えば、特定のページ内のリンクやjavascript（ジャヴァスクリプト）と言われる特殊なプログラミングをホームページ上で使う際に使用するという感じです。

ここではあくまで、「感じ」なのでお許しください＞＜

というのも、idを使うときは他にもあるんですけど、これって長年の経験からくるセンスみたいなところがあるので、こういうときは絶対使う！こういうときは絶対使わない！みたいなものがはっきりしないんです＞＜

ということは、使わないことが前提となるのですが、それだと上手く詳細度が示せない場合があるので、ここからは、私なりのコツで説明したいと思います。

それが今回のお話です(*´ω｀*)


やり方はとっても簡単。

例えば、以下の様なhtmlコードがあったとします。


<div class="ghi">
<p>あかさたな</p>
<p class="jkl">はまやらわ</p>
</div>


やりたいことは、jklとclass名をつけたほうだけ変化をさせたいのです。

この場合、cssで以下のように書くと、


.ghi p {
color: #ff0000;
}
.jkl {
color: #0000ff;
}

ちなみに1行目の「.ghi p」の部分は、.ghiの中のpタグという記述を示しています。

さて、上記の場合、あかさたなの部分は赤に、はまやらわの部分を青にしたいわけですが、これだとCSSの詳細度的にあかさたなのほうがポイントが高いので.ghiの中にあるすべてのpタグが赤になってしまいます。

じゃあどうすればいいかというお話になりますが、こう書きます。


.ghi p {
color: #ff0000;
}
.ghi .jkl {
color: #0000ff;
}

何を修正したかわかるでしょうか？

「.jkl」の部分を「どこに入ってる.jklなのか」と詳細度を増やしたわけです。

そう、詳細度とは、どこに入ってるなんていうclassとかタグって詳細にかけば書くほど、簡単に言えば優先度が上がるんです。

なので、もし仮に、上記の場合、これでも詳細度のポイントが足らずに変化を起こさなければ、例えば

body .ghi .jkl {
color: #0000ff;
}

などとしてあげたら優先度は一気に上がります。

要は、詳細度を増やして優先度を上げればいいのです。

他の説明を書いたサイト等ではポイント制でわかりやすく説明しているところも多いのですが、あえて私は、詳細にしてあげることが大事という話をしたかったので、ポイント制はあえてお話しませんでした(;^ω^)

あっちのほうが分かりやすいんですけど、問題も一つあったりするので＞＜



ということです、すごくわかりにくい話でしたが、これもおいおい作っていけばわかることになるので、いい意味で楽しみにしていてくださいね(*´ω｀*)


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

次回は、今回ちらっとお話した、セレクタのお話をしたいなーって思っています。

大事な話が続いてるとはいえ、文字だらけで分かりにくいと思いますが、頑張りましょう！

私も肩の痛みと戦います！


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