作品一覧に、拡大して見る窓を付けた。練習で作った架空の作品にだけ、「見本・架空」という赤い印を出すようにした。見直すと、本物の実績の上にも、その印が出ていた。
この研究を一言でいうと──隠す仕組みは、出ない側を確かめるまで信じない。
プログラムは正しかった
印は hidden 属性で出し入れしていた。hidden は「表示しない（display:none）」を当てるだけの、いちばん弱い指定だ。同じ印に、見た目を整えるために CSS で display:inline-block を書いていた。CSS の方が強いので、hidden を付けても見えたままになる。外す方向（出す）は正しく動くので、出る所だけを見て確かめると通ってしまう。
片方向だけ壊れる
| 操作 | 期待 | 実際 |
|---|---|---|
| hidden を外す（見本） | 出る | 出る |
| hidden を付ける（実績） | 消える | 出たまま |
| [hidden]{display:none} を足した後 | 消える | 消える |
実績と架空を取り違えて見せるのは、作品集でいちばんやってはいけない形だ。同じ形は、別の道具でも出た。スマホで最初だけ出す「ここに書く」の案内が、隠したあとも盤の上に残った。原因は同じ1行だった。
決めたこと
- hidden を使う要素に CSS で display を書いたら、[hidden]{display:none} の打ち消しも書く。
- 迷うときは hidden 属性を使わず、クラスの付け外しで出し入れする。
- 確かめるときは、出る側だけでなく、出ない側も必ず通す。
あなたのページで、隠したはずのものは本当に消えていますか。
— 他の研究を読む