最近依頼された仕事をしていて、トンだミスをした。しかもその原因に気付くのに随分時間がかかってしまった。
内容はどうでもいいと思うが、自分の記録のため。
Webページを作っていて、 スタイルシート（css）で PC用とスマホ用の表示の切り替えをしているんだが、どうしても スマホの表示が PCの表示に影響してしまう。メディアクエリーと言う切り替えの指定をしており、スマホ用にだけ表示指定をしているつもりのパラメータが PCで表示させた時も効いてしまう。
結論から言えば簡単な話だが、@media screen and (max-width: 479px){・・・スマホ用セレクタ} としているところで、途中に ”｝”が一つ多く入ってしまっていたので、その後ろのセレクタは全体のセレクタと見なされて PC用の表示の時にも効いてしまったと言うオチ。
今までの短い スタイルシートならすぐ気付いただろうけど、結構長いファイルになってしまったので「眼を皿のようにして」眺めても老眼では見つけられなかった。
結局 障害の切り分け方法として、.test{ font-size: 20px; color: red;} などというセレクタをスマホ用の後端と思っている ”｝”の前から順に前に向かって移動させていき、HTML中の対象文字がどこで　全体＞スマホだけ　に効くようになるか切り分ける方法で見つけた。
途中 コメントアウト記号の＜ /*　*/ ＞の　＜/*＞を消してしまい、大幅に表示が崩れて大慌てと言うドタバタもあったりして、疲れた。
～～ン、メディアクエリなど親要素の括り括弧とセレクタ等の子要素の括り括弧を変えてくれれば気づきやすいのに・・・・と、素人プログラマのボヤキ。

---

今日の写真はハナショウブ。いつもカキツバタ、ハナショウブ、アヤメの違いに惑わされるが、ハナショウブって意外と乾いた土でも元気で花を咲かせているからややこしい。