暑い日が続いていますが皆様いかがお過ごしでしょうか。
最近の会長は、外出時には熱中症対策として帽子をかぶります。
※正確にはあたまに何かを乗っけられています。。。
まだまだ厳しい暑さが続きますので、
みなさんも熱中症には気をつけて夏を楽しみましょう!
ここでははじめまして。よしかわです。
初ブログ担当で何を書いていいやらさっぱりわかりません。
ひとつタイムリーなネタとして、今日は祇園祭の山鉾巡行ですね!
朝の御池通りにはずらりと並んだ観客席に、ちらほら人が座っておられました。
これだけの席数もすっかり埋まってしまうんでしょうね。
昨年は就業時間が今より一時間遅かったため、出勤が一苦労だったとか…。
山鉾は夜に神様が神輿に乗って通る前に、街中の邪気を集めて祓い清めるものだそうで、
巡行が終わればさっさと解体されるらしいです。帰る頃には鉾はすっかり片づけられて、
人だかりもなくなってますから、それはそれで寂しいですね。
話は変わりますが、先日の連休はそんなお祭りで賑わう京都を離れ、徳島の祖母のもとに行って参りました。若干天気の心配もありましたが、特段荒れることもなく、姉と車でのんびり向かいました。祖母に会えるのはもちろん嬉しいのですが、もう一つの楽しみは愛猫に会えることです!長毛種で毛玉もよくできていたので、聞くところによれば、お医者さんでサマーカットをしてもらったとか。以前もペットサロンでカットしてもらっていたので、以前のような風貌だろうと、大体の想像をしながら祖母宅へ。
……と、思っておりましたが、
「この生き物は一体・・・・・・?」
\バーーーーン/
本来の姿↓
通常時と比較してみると別人(猫)です。
思わず大爆笑したら、拗ねて暫く相手にしてもらえませんでした…。
それでなくとも恥ずかしがって二階に籠っているとか。
また祖母曰く、これでもまだマシになったようで、カット時は地肌が見えてピンク色だったらしいです。
そう言えば先日の会長のサマーカットも…。
うーん、全国でサマーカット事件が相次いでいるようですねwww
とは言え、梅雨も明け、気温も益々高くなる今日この頃ですので、少しでも暑さを凌いでくれたら、と思います◎そして秋頃までには伸びてきますように。
皆さんも熱中症などにはお気を付けください。小まめの水分補給と塩分摂取を~!
7月も半分が終わり、私の運転初心者マークも卒業まで秒読み開始です!!
つたない文章ですが、最後まで読んでいただいてありがとうございます。
ではまた◎
どっからどこが梅雨かわからへんなあと思ってたら、急に日差しが強くて火傷しそうなぐらいですね。
熱中症には気を付けましょう。
あ、なしろです。
週末とかにたまに勉強会開いて、HTMLとかCSSとかJavaScriptとかPHPとかとか、人に教えたりしてます。
勉強会と言っても最近主流の反転授業なんで、授業の準備みたいなのは要らなくて楽ですw
で、先日、CSSの詳細度について話す機会がありました。
意外ときっちり理解できてへん人もおるみたいです。
そこで今回は基本に立ち返り、CSSの詳細度についてまとめときます。
ちょっと長なるけど興味のある人はお付き合いください。
(びっくり真面目なお話ですw)
発端はある人の「このスタイル適用されへん。上書きされんちゃうの?」と言う言葉でした。
その人は単純に「idを使えば優先される」「あとから書いたスタイルが優先される」と思っていたそうです。
間違いじゃないですね。
それに対して他の人が「classも大事やで」とか「ようさん書いた方が強いねんで」と発言しました。
これも間違いじゃないですね。
では、例えば次のHTMLに
<div id="contents"> <div class="article"> <div><ul> <li><input type="text" value="aaa" /></li> <li><input type="text" value="bbb" /></li> </ul></div> </div> </div>CSSで次の指定をしました。
(問題のためややこしく書いてますw)
#contents ul li:hover [type="text"] {color:#ff0000;} /* マウスオーバーで赤 */ #contents div > div ul li:first-child input {color:#0000ff;} /* 1つ目だけ青 */ #contents div.article [type="text"] {color:#000000;} /* 黒 */さて、”aaa”と”bbb”の文字色はどうなるでしょうか。
最初に書いた「マウスオーバーで赤」は適用されないのでしょうか。
いっぱい書いて長い「1つ目だけ青」でしょうか。
classを指定して最後に書いた「黒」でしょうか。
答えはWebで!
はい、ここがWebなので答えですw
「両方黒でマウスオーバーで赤」です。
いっぱい書いて長い「1つ目だけ青」は適用されません。
何が違うんでしょうか。
ここで出てくるのが「詳細度」です。
超簡単に言うと各セレクタが持つ点数です。
「idやclassが強い」とか「長いのが強い」とかはここから来てます。
では「詳細度」について。
セレクタの1つ1つに点数を付けます。
点数の付け方が独特で、1点とか10点とか100点ではなく、0.0.0.1点とか0.0.1.0点とかです。
“.”で区切られた数値を桁と考えてもらえればいいです。
セレクタそれぞれの点数は
- インラインスタイル(style=””)
- 1.0.0.0
- id
- 0.1.0.0
- class、疑似クラス(:hover、:first-childなど)、属性セレクタ([type=”text”]など)
- 0.0.1.0
- タグ、疑似要素(:afterなど)
- 0.0.0.1
classと属性セレクタが同じ点数なのは意外かもしれませんね。
点数は”.”で桁ごとを合計し、桁上げはしません。
例えばclassが100個、タグが200個指定されても0.0.100.200となって、id1個の0.1.0.0には負けます。
では先ほどの問題の点数を出してみましょう。
#contents ul li:hover [type="text"] {color:#ff0000;} /* マウスオーバーで赤 */ #contents div > div ul li:first-child input {color:#0000ff;} /* 1つ目だけ青 */ #contents div.article [type="text"] {color:#000000;} /* 黒 */マウスオーバーで赤
→ 0.1.2.2
1つ目だけ青
→ 0.1.1.5
黒
→ 0.1.2.1
はい「マウスオーバーで赤」>「1つ目だけ青」>「黒」の順番ですね。
このため、「1つ目だけ青」は適用されず黒となり、マウスオーバーで赤くなりました。
では、「マウスオーバーで赤」から”ul”を取るとどうなるでしょうか。
#contents li:hover [type="text"] {color:#ff0000;}点数は0.1.2.1となり「黒」と同じになります。
答えはマウスオーバーしても黒のままです。
ここで「あとから書いたスタイルが優先される」が出てくるのです。
詳細度の点数が同じ場合はあとから書いた方を優先します。
まとめると
まずはセレクタごとの点数を計算し、点数が高い物を適用
点数が同じならあとから書かれた物が適用される
です。
長かったw
ではまた。