「なんか変」の正体は、余った波括弧1個だった

料金のページの表紙を見て、「なんかださい」と感じた。色を変えるか、余白を足すかを考える前に、CSS を1行目から数えた。96行目に、閉じる相手のいない } が1個あった。

この研究を一言でいうと──違和感が出たら、デザインを足す前に括弧を数える。

エラーは出なかった

スマホ用の指定を閉じたあとに、同じ宣言と閉じ括弧が1つ取り残されていた。ブラウザは読めない所を黙って捨てて、その先を読み直す。どこで捨てたかは、画面にもエラーにも出ない。結果として、そこから下に書いたルールが効いていなかった。

目で探さず、数える

括弧は目で追うと見落とす。1文字ずつ読み、{ で1つ深く、} で1つ浅くする。深さがマイナスになった行に、余った } がある。最後の深さが0でなければ、どこかに閉じ忘れがある。この数え方を、小さな台本にして手元に置いた。

決めたこと

• 見た目に違和感が出たら、デザインを足す前に CSS の括弧を数える。
• 深さがマイナスになる行と、最後の深さを出す台本を手元に置く。
• 直したら、効いていなかった指定（斜体・折り返し）が効いたかを画面で見る。

あなたの「なんか変」は、デザインのせいですか。

消したはずの印が、実績の上に出ていた、の研究を読む →