スマホの中から、「次へ」だけが消えた。
ページは壊れていない。
題名も、夕焼けの説明も読める。
リンクの場所を指でなぞると、次の話へ進むこともできた。
ただ、文字が見えない。
隣のパソコン画面では、同じ「次へ」が白く光っている。
公開実演まで五十秒。修正できるCSSは一か所だけ。
イト
同じHTMLなのに、スマホだけ消えた
ユイ
リンク自体は残っています。白い背景に、白い文字が重なっているみたいです
ピコ
色を足す前に、いまどのルールが勝っているか見よう
イトの前に、赤い「最重要」の色札が落ちてきた。
どんな指定よりも先に使わせる、強い札だ。
これを貼れば、たぶん一秒で文字は戻る。
ただし、パソコン側も同じ色へ変わる。
CSSは「どこへ」「何を」「どんな値で」を書く
第8話で作ったHTMLは、題名、段落、画像、リンクという役割を持っている。
CSSは、その要素をどんな見た目で示すかを指定する。
.story-card a {
color: white;
}.story-card aは、どの要素を選ぶかを示す セレクタ。
color: white;は、選んだ要素へ適用する 宣言。
colorが何を変えるかを示す プロパティ、whiteが設定する 値 だ。
CSS Syntax Level 3はCSSの規則や宣言の構文を定め、Selectors Level 4は要素を選ぶパターンと詳細度を定めている。
イト
HTMLのリンクを選んで、文字色を白にした札なんだ
マコト
セレクタが対象、宣言のプロパティと値が変更内容だね
ピコ
うん。でも、同じプロパティを変える札が一枚とは限らない
一つのリンクに、三つの色が届いていた
検査鏡が、スマホの「次へ」へ届く規則を並べた。
a {
color: #2f7cff;
}
.story-card {
background: #10213f;
}
.story-card a {
color: white;
}最初の規則は、すべてのリンクを青にする。
三つ目は、物語カードの中にあるリンクを白にする。
同じ通常の作成者スタイルの中では、.story-card aの方がaより詳しく対象を絞っている。二つが同じcolorで競合すると、今回は白が選ばれる。
パソコンでは、濃紺のカードに白い文字なので読めた。
問題は、スマホ用の条件だった。
@media (max-width: 600px) {
.story-card {
background: white;
}
}幅が600px以下になると、カードの背景だけが白へ変わる。
リンクを白にする規則は、その外にあるため引き続き適用される。
白い背景と白い文字。
「次へ」は消えたのではなく、同じ色に埋もれていた。
カスケードは、最後の一行だけを見ない
複数の宣言が同じ要素の同じプロパティへ届くと、CSSの カスケード が使う値を選ぶ。
最初に、その規則が今の条件へ関係するかを見る。
次に、出どころ、重要指定、カスケードレイヤーなどの優先関係がある。
同じ段階に残った宣言では、セレクタの詳細度を比べる。
それも同じなら、より後にある宣言が勝つ場面がある。
CSS Cascading and Inheritance Level 6は、出どころと重要度、文脈、レイヤー、詳細度、スコープの近さ、順序などを含む並べ替えを定めている。
ユイ
『下に書いたから勝つ』だけではないんですね
ピコ
そう。今回の練習では出どころと重要度をそろえてあるから、条件、詳細度、同率なら順序を追える
イト
最強の札を足す前に、勝っている白の札を見つける
!importantは、通常の宣言とは異なる重要度で扱わせる印だ。
必要な用途はあるが、困るたびに追加すると、あとで通常の規則から直しにくくなる。
強さは、目的に合うことと同じではない。
残り一か所を、どこへ使う？
残り二十八秒。
修正台に三つの案が現れた。
- 全画面のリンクへ、黒い文字色を
!importantで指定する - HTMLのリンクへ、黒い文字色を直接書く
- スマホ条件の中だけで、物語カードのリンク色を直す
一つ目ならスマホの白い背景では見える。
しかしパソコンの濃紺カードでも黒くなり、今度はそちらが読みにくい。
二つ目も幅の条件を持たないため、二画面へ同じ色が届く。さらに、見た目の問題をHTMLへ戻すことになる。
三つ目なら、白い背景へ変わる条件と同じ場所で文字色も切り替えられる。
イトは、赤い最重要札を元の棚へ戻した。
スマホの検査鏡で、背景を白にした条件を見つける。
その中の最後へ、同じセレクタを一つだけ置いた。
@media (max-width: 600px) {
.story-card {
background: white;
}
.story-card a {
color: #174a84;
}
}スマホ条件の中では、外側の白指定と同じ詳細度を持つ青い指定が後に来る。
イトはその一枚を、白い背景へ続く糸だけに結んだ。
スマホだけ直り、パソコンは残った
残り七秒。
最初にスマホの鏡が更新された。
白いカードの下に、濃い青の「次へ」が現れる。
イトがリンクを選ぶと、次の話の入口まで道がつながった。
次にパソコンの鏡を開く。
濃紺のカード。
白い「次へ」。
こちらは一文字も変わっていない。
時計がゼロになった。
イト
一番強い札じゃなくて、必要な画面にだけ届く札を選んだ
ピコ
そして二つの幅を両方確かめた。それが今回の修正の結果だよ
マコト
どの規則が勝つか分かれば、変わらない理由も説明できるね
Media Queries Level 5は、表示領域の幅など、利用環境の条件に応じてスタイルを適用する仕組みを定めている。600pxはこの練習ページの設計値であり、すべてのサイトに共通する境界ではない。
見える部品が、動くとは限らない
二つの画面で「次へ」は読めるようになった。
色、余白、並び方も、それぞれの幅に合っている。
だが、映像プレイヤーの下にもう一つ、青い操作部品が残っていた。
字幕を表示するための部品だ。
形も色も、押せるように見える。
イトが押す。
何も起きない。
CSSは、押している間の色などを変えられる。
けれど、利用者の操作を受けて字幕データを読み、ページの状態を変える処理は、今回のCSS規則には書かれていない。
イトの手元には、使わなかった最重要札が残った。
強い札を足しても、動かない部品は動かない。
字幕の箱の裏で、何かを待つ小さな受信機だけが点滅した。
次回：押したことを、誰が受け取る？
CSSでは、セレクタで対象を選び、プロパティと値を持つ宣言で見た目を指定する。
規則が重なったら、適用条件とカスケードをたどり、どの宣言が勝ったかを確かめる。
強い指定を足す前に、直す条件と、変えてはいけない画面を分ける。
次回、ピコルート第10話。
押したことを、誰が受け取る？
CSSの基本を図でも整理するなら、CSSとはへ進めます。