腑抜けども、悲しみの愛を見せろ
映画「腑抜けども、悲しみの愛を見せろ」を観て大感動。これは大変な傑作でした。佐藤江梨子がすごく輝いてみえます。
原作は本谷有希子の小説。他にもいくつかトゲのありそうな話を書いているので注目しています。しかも美人さんなんですねー、この人。
クラスは束になってもIDに勝てない
CSSの詳細度について僕がしていた勘違い。それは、「クラスも10個以上になればIDに勝てる」という思いこみです。ほかにもそういう風に思っている方がいらっしゃるかもしれません。
CSS2の仕様書の詳細度の算出例をみると次のように書かれています。
* {} /* a=0 b=0 c=0 -> specificity = 0 */
LI {} /* a=0 b=0 c=1 -> specificity = 1 */
UL LI {} /* a=0 b=0 c=2 -> specificity = 2 */
UL OL+LI {} /* a=0 b=0 c=3 -> specificity = 3 */
H1 + *[REL=up]{} /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red {} /* a=0 b=1 c=3 -> specificity = 13 */
LI.red.level {} /* a=0 b=2 c=1 -> specificity = 21 */
#x34y {} /* a=1 b=0 c=0 -> specificity = 100 */
導き出されたspecificityの値をみると、21や100といったようになっているので、IDはひとつ100点、それ以外の属性や擬似クラスはひとつ10点、要素名はひとつ1点という具合に考えてしまって、単純にそれらの値を足し算すれば良いものかと思っていました。
ただこれですと、「クラスが10個集まったら10*10=100だからIDひとつと並ぶのか」、「11個のクラスならひとつのIDに勝てるのか」といったように考えてしまいがちです。
実際には、クラスは所詮クラスということで、いくら束になったところでIDひとつに勝てません。同様に、いくら要素名を書き連ねたところで、それはクラスひとつに勝てません。
よく使われる「詳細度=a*100+b*10+c*1」といった計算式が成り立つのは、あくまでそれぞれの数が10未満の場合というわけです。
CSS2.1では詳細度の算出例が次のように変わっていました。
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
aの部分をstyle属性が使っているので、アルファベットが合計4つになったほか、算出された詳細度が「0,1,0,0」といったように、なにやら「,（カンマ）」で区切られています。もしかすると先のような誤解を生まないよう配慮しているのかもしれません。ただ、こうして数字を区切ってしまうと、そもそも四つを連結して並べる必要性がよくわからないし、その値もちょっと意味不明な感じになってしまっています。
詳細度は、点数にして覚えるよりも、優先順位をつける流れをしっかり頭にたたき込んでおくほうがわかりやすい気がします。例えばCSS2.1ならば次のような具合です。
- まずstyle属性が最優先
- 次にセレクタ内のIDセレクタの合計が多い方を優先
- IDセレクタの数が同じなら、クラスセレクタ、属性セレクタ、擬似クラスの合計が多い方を優先
- それも数が同じならば、要素セレクタ、擬似要素の合計が多い方を優先
- さらにそれも数が同じならば、詳細度による順位付けはあきらめて、宣言の位置によって優先するほうを決定
これならば「クラスが10個集まったら・・・」なんて発想をそもそもしなくて済みます。
それからCSSの仕様書で、アルファベットをa-b-cといったように横に並べて十進数に見立てる意図は一体何なのでしょうか。そのせいで随分とややこしくなっている気がします。
社内勉強会
定期的に行っている社内勉強会。今日は「CSSのカスケード処理」と題して3回目の発表をさせてもらいました。
プレゼンはおおむね無事に済んで安心していたのですが、気づくとなにやら胃が痛い。
どうやら緊張のために胃酸がたくさん放出され、自分の胃壁を溶かしてしまったようなのです。でも発表したことで自分が勘違いしていた間違いにも気づけたので、その代償ということで納得しています。
禁泳
東京体育館のプールが大会で使用され、そのあと補修工事もあるため、今週から来週前半まで泳げません。すでに水泳が習慣となっているのでこれはきつい・・・。
もはや生きる目標を失ったといえる。
特訓の日々
3月に水泳を始めてから、来る日も来る日もがむしゃらに泳ぎまくった結果、平泳ぎで300m（25mプールを休憩なしで12回）をこなせるようにまでなりました。ゆったりと長い距離を泳ぐという理想に、少しずつ近づけてきた気がします。
あいかわらずクロールのほうは距離があまり伸びていないのですが、それでも25mであっぷあっぷしていた頃に比べると、泳ぎにだいぶ余裕が出てきたのは確かです。呼吸のリズムさえもう少し掴めれば、しだいに距離も伸びそうではあります。
また、肩や腕に筋肉がつきはじめ、肩こりも前より楽になってきています。これも猛特訓の成果といえます。
