電子漂流のはなし
海図作成室 / 157
157
CSSの砂場
昨夜のつづき、まず広域図パーツのcssboxのしくみを要図同様、全て各列ごとの形式に変更。広域図にはすでに各列にcssboxは充ててあり、その上に全部をまとめて色塗り、全幅を決めるおおざっぱなことがしてあった。ここまで見てくれば誤っているとわかるが、作ったときは「どうにかなれ」と思って投げてみて、どうかなったのでそのままにしたんだろう。
今度はそれではどうにもならないので先の通り修正。したが、修正パーツに合わせて配置のための調節が最後に部分的に上手くいかない。やはりルーブ、おしゃま、ピースのところが崩れる。そのマージンを1足すか引いても上下に余分に膨らむか凹むかする、まるでピクセル以下の小数値が生じているかのようだ。
昨夜も書いたCSSの陥穽で、CSSデザインはこれがいやだ。調子に乗って幾らでも自由に値を決めると、何かわからない理由で何故か1ピクセルずれる。公開のWikiのページ上で試行錯誤する砂場なんかみっともないのでしたくない。今はわたしの砂場同然なので、するが。
通報 ...
1足すか引くかしかしていないのに小数が生じているはずはない。けれど、これはたびたびあることで今度はWikiのではなく、ブラウザの機能による自動整形が見えていると思う。わたしの表示確認に使っているFirefoxとChromeでどっちか崩れる場合も見てしまった。それだ。
ただし、完全にきっちりと揃えて書いてあるならそれでも崩れるときもある・崩れないときもあるような曖昧な崩れ方にならない。気づいたのは、パーツが上にあるか下にあるかで崩れる場合があるのは、パーツの中に指定した上マージンと下マージンがそのつど一致していないからには違いない。
前回作ったときに課題はおおむね、flexboxの自動付与する下余白を抑えることだったから、まずはパーツの下に負のマージンを振ってみることをしているらしい。その後書き足した調整のために上にも値を振っていって上下でバランスを取っている。怪しい。こういうのは一度、初期値をきっかり揃えてみて、上なら上マージンの値だけでもう一度位置を合わせてみるべき。要図パーツはすでに下=0で揃えている。そこまで、あとやってみる。
このようにcssboxは、1ピクセルの崩れも許さないようなアート作品をそれで作ろうとすると、そのつもりを裏切ってあやふやに崩れ、不毛な試行錯誤の迷路に陥る。そもそも、そんな用途のものではないので「そんなところで遊ぶな」という意味で自動余白が設けてある。その運営方針のほうが正しい。
できた。下0で統一したのち改めて値を当てて、それで最終的に1崩れる広域図ページはその行だけ1余分に詰めた。これでいいはず。
あと、複数のブラウザで表示確認する場合は、ここの場合、ブラウザのキャッシュが残っていると直近の更新がすぐに反映されないためすぐに確かめたければ履歴をクリアする。憶えておく。
これで、広域図の再構成まで終了。アスラ・ガラハドの列の統合をしてもいい準備ができた。そこはもう、この上に表示崩れたりしないと思うが、ここまで来たら何か崩れても対処はわかるだろう。