スマホの中から、「次へ」だけが消えた。
ページは壊れていない。題名も、夕焼けの説明も読める。リンクの場所を指でなぞると、次の話へ進むこともできた。ただ、文字が見えない。隣のパソコン画面では、同じ「次へ」が白く光っている。
公開実演まで五十秒。直せるのは一か所だけ。
イト
同じページなのに、スマホだけ消えた
ユイ
リンクは残ってる。白い地に、白い字が重なってるみたい
ピコ
色を足す前に、今どのルールが勝っているか見よう
イトの前に、赤い「最重要」の色札が落ちてきた。どんな指定よりも先に使わせる、強い札だ。これを貼れば、たぶん一秒で文字は戻る。ただし、パソコン側も同じ色に変わる。
CSSは「どこへ」「何を」「どんな値で」を書く
さっき組み直した骨組みは、題名、段落、画像、リンクという役割を持っている。それをどんな見た目で示すかは、CSSの札が決める。ページの奥で揺れていた色と余白の布は、一枚ずつがこの札だ。
「次へ」には、札が一枚結んであった。上の段に「物語カードの中の道」。下の段に「文字の色」と「白」。どこへ、何を、どんな値で。札に書いてあるのは、この三つだ。
イト
リンクを選んで、文字を白にした札なんだ
ピコ
うん。でも、同じ色を変える札が一枚とは限らない
一つのリンクに、三つの色が届いていた
検査鏡が、スマホの「次へ」に届く規則を並べた。札は三枚ある。
一枚めは「すべての道を青に」。二枚めは、さっきの「物語カードの中の道を白に」。どちらも同じ文字の色を決めようとしているが、二枚めのほうが、どの道のことかを詳しく書いている。だから、ここでは白が選ばれる。パソコンでは、濃紺のカードに白い文字なので読めた。
問題は、三枚めだった。幅が狭いときにだけ働く、条件つきの札だ。
@media (max-width: 600px) {
.story-card {
background: white;
}
}幅が狭くなると、カードの地だけが白に変わる。文字を白にする二枚めは、その条件の外にあるため、引き続き届く。白い地と、白い文字。
「次へ」は消えたのではなく、同じ色に埋もれていた。
カスケードは、最後の一行だけを見ない
同じ所の同じ色へ札が何枚も届くと、どれを使うかは順番に決まっていく。この決め方には、カスケードという名前がある。最初に、その札が今の画面の条件に合うかを見る。合う札どうしでは、どれのことかを詳しく書いているほうを選ぶ。それも同じなら、あとに置かれた札が勝つ。
ユイ
『下に書いたから勝つ』だけじゃないんだ
イト
最強の札を足す前に、勝っている白の札を見つける
強さは、目的に合うことと同じではない。
残り一か所を、どこへ使う？
残り二十八秒。
修正台に三つの案が現れた。一つめは、赤い最重要札で、ぜんぶの画面のリンクを黒くする。スマホの白い地では見えるが、パソコンの濃紺のカードでも黒くなり、今度はそちらが読みにくい。二つめは、骨組みのリンクへ黒をじかに書く。これも幅の条件を持たないため、二つの画面へ同じ色が届く。見た目の問題を、骨組みへ戻すことにもなる。三つめは、スマホの条件の中だけで、物語カードのリンクの色を直す。地が白に変わるのと同じ場所で、文字の色も切り替えられる。
イトは、赤い最重要札を元の棚へ戻した。スマホの検査鏡で、地を白にした条件を見つける。その中の最後に、二枚めと同じ「物語カードの中の道」を選ぶ札を、一枚だけ置いた。
@media (max-width: 600px) {
.story-card {
background: white;
}
.story-card a {
color: #174a84;
}
}スマホの条件の中では、二枚めの白と同じ詳しさの濃い青があとに来て、こちらが勝つ。イトはその一枚を、スマホの白いカードにだけ結んだ。
スマホだけ直り、パソコンは残った
残り七秒。
最初にスマホの鏡が更新された。白いカードの下に、濃い青の「次へ」が現れる。イトがリンクを選ぶと、次の話の入口まで道がつながった。次にパソコンの鏡を開く。
濃紺のカード。
白い「次へ」。
こちらは一文字も変わっていない。
時計がゼロになった。イトは、二つの幅を両方とも確かめ終えていた。
「どの規則が勝つか分かれば、変わらない理由も説明できるね」と、マコトがゆっくり言った。
見える部品が、動くとは限らない
二つの画面で「次へ」は読めるようになった。色、余白、並び方も、それぞれの幅に合っている。だが、映像プレイヤーの下にもう一つ、青い操作部品が残っていた。字幕を表示するための部品だ。形も色も、押せるように見える。
イトが押す。何も起きない。
見た目の札は、押している間の色などを変えられる。けれど、押されたことを受け取り、字幕を読みこんで、ページのようすを変える仕事は、今ある札のどれにも書かれていない。
棚には、使わなかった最重要札が残っている。強い札を足しても、動かない部品は動かない。
字幕の箱の裏で、何かを待つ小さな受信機だけが点滅した。
次回：押したことを、誰が受け取る？
音を切った端末の中で、アニメの人物が口だけを動かしている。字幕が出なければ、台詞は一文字も届かない。
押せるように見える部品には、何が足りないのだろう。
同じボタンに、ページ全体のルール、ボタン共通のルール、特別なボタンだけのルールが重なることがあります。そのとき最初に押さえる三つは、CSSとはの「CSSで間違いやすいルールの重なり」に並べてあります。