青い「次へ」は、押しても動かなかった。
一秒前まで、ちゃんとボタンに見えていた。
届いた続きの材料を、イトが自分の手でページに組んだ。その最初の一枚だ。大きな白文字の題名。画面いっぱいの夕焼け。その下に、青く光る「次へ」。
ところが構造試験の幕が下り、色と画像が消えた瞬間、三つとも平らな箱になった。検査台に赤い結果が並ぶ。主な見出しは「見つかりません」。画像の代わりになる説明は「ありません」。次のページへのリンクも「見つかりません」。
提出は残り一回。時計は五十秒。
イト
見えていたときは、ちゃんとページだったのに
ピコ
見た目は似せられても、この箱は自分の役割を伝えていないんだ
イト
じゃあ、色が消えても残るものを作るの？
イトの最初の一枚には、同じ形の箱が三つ並んでいた。題名らしい箱。画像らしい箱。リンクらしい箱。「らしい」だけで、HTMLの中には何の役なのか書かれていなかった。
HTMLは、見た目より先に役割を渡す
ユイ
大きく見えるのと、見出しであることは別なんだ
マコト
青い文字に見えても、行き先がなければリンクとは限らない
ピコ
うん。見た目はあとから変えられるけれど、HTMLで何の内容かを選ぶ仕事は残るよ
ピコが、役割を伝えている題名の箱を一つ、開いてみせた。中から、三つの部品が出てくる。
<h1>夕焼けのあとで</h1>題名の文字と、それを前と後ろからはさむ、山かっこの印。この印が、タグだ。
続けて、リンクと画像の箱も開く。こちらの印には、中に書きこみがあった。
<a href="/episodes/next">次へ</a>
<img src="/images/sunset.avif" alt="夕焼けの丘で主人公が振り返る">道の印には、行き先。絵の印には、絵の説明。
残り一回で、どの骨組みにする？
残り三十六秒。
修正台に三つの案が現れた。一つめは、同じ箱に、もっと大きな文字と強い青色を付ける。色付きの画面では、また本物らしく見える。けれど構造試験が見ているのは、文字の大きさではない。二つめは、箱を押したら動くように、仕かけだけを足す。マウスで押したときだけ、次へ進めるかもしれない。しかし、リンクの役割や行き先を、骨組みから読み取れる形にはならない。
三つめは、内容の役割に合う印に組み直す。こちらは、入れ子まで直す必要がある。残り時間内に後ろの印を一つ間違えれば、構造そのものが崩れる。
イトは色付きのプレビューを閉じた。
「これは、ページの題名」と、最初の箱を外し、見出しの印に置き換える。
「これは、場面の説明が必要な画像」と、絵の印に、絵の説明を持たせる。
「これは、次の話へ進む道」と、青いだけの箱を外し、行き先を持つ道の印に組み直す。
最後に、題名、段落、画像、リンクの順序と入れ子を、イト自身が指でたどった。
残り九秒。イトは作り直した骨組みを、最後の提出枠に置いた。
色と画像を消しても、道が残った
時計がゼロになった。構造試験の幕が、もう一度下りる。青い色が消えた。夕焼けの画像も消えた。ページは白地に黒い文字だけになった。
それでも検査台は、今度は緑に変わった。主な見出しは「夕焼けのあとで」。画像の代わりになる説明は「夕焼けの丘で主人公が振り返る」。次のページへのリンクは、行き先が「次の場面」。
イトが「次へ」を選ぶ。色のない文字から、青い道が伸びた。次の話の入口が開く。見た目が消えても、見出しの役割、画像の代わりになる説明、リンクの行き先は、骨組みに残っていた。
正しい要素だけでも、完成ではない
構造試験は通った。だが、ページはまだ白地のままだ。題名は大きく見えるものの、物語に合う色ではない。画像の置き場所も、画面幅いっぱいに広がっている。余白も、並び方も決めていない。色や余白は、別の決まりが受け持つ。
イトの手元には、外した青い色札と大きさ札が残った。さっきまで、それを骨組みだと思っていた。今は、骨組みに重ねる服のように見える。
白いページの奥で、色と余白の布が何枚も揺れた。
どの布も、まだ骨組みのどこへ結ぶか決まっていない。
次回：見た目のルールはどこへ重なる？
イトの前に、赤い札が一枚落ちてくる。ほかのどの色札よりも先に使われる、強い札だという。
見た目のルールが何枚も重なったら、どれが使われるのだろう。
同じ「ピコルートへようこそ」という文字でも、見出しなのか、本文の一部なのか、リンクなのかで役割が変わります。どう見分けるのかは、HTMLとはの「同じ文字でも、役割が違う」で確かめられます。