#4960

寡黙の丸角


ここずっとWebデザイン系のモチベがどん底だったのですが、
ようやく昨日くらいから復帰していろいろと既存のサイトをいじっていたのですが、
ちょっとしたことでドツボにハマり、最終的に匙を投げるという案件がありました。
そして一日置いて今日、帰宅するなり渋々とリベンジしてみたらいともあっさり解決。
なんでこの発想がなかったんだと久々に頭を抱えましたね……。

いちおう同じ轍を踏まないようにメモしておくと、
どハマりしたのはCSSの{border-radius}を使ってテーブルの各列一番左だけ丸角にした際、
背景色をtransparent以外に指定すると丸角にしたはずの角の背景が、
丸角にする前の部分まではみ出て表示されてしまうという問題。

上の画像は特設サイト『ピクミンチャレンジモード大会』のランキングの一部分なのですが、
よくよく見ると3位の色つき左罫線の角に灰色の背景がはみ出しているのが分かると思います。
これが本当に曲者でした。検索して調べてみると出てくる解決方法は、

 ・親要素に{border-radius}を指定して背景を丸く削る
 ・子要素に{overflow:hidden;}を指定してはみ出た部分を非表示にする
 ・子要素に{background-clip:content-box;}を指定して背景を罫線に被らないようにする
 (子要素=実際に丸角を作るブロック要素、親要素=子要素を包括し、背景を指定する要素)

といった方法を紹介しているサイトが圧倒的でした。特に一番目が圧倒的多数。
ところが、それをどうこねくりまわしても解決できない。
もう本当にどこまでプロパティをいじってもうんともすんとも変わらないので
しまいには本当にこのCSSファイルを読み込んでいるのかと疑う始末。辛かったですね……。
辛いまま昨日はギブアップしてしまったのですが、
今日あっさり見つけた解決方法は、

 ・{background-color}はTR要素でなく各TDに指定する

という拍子抜けな方法でした。
つまり、そもそもTR要素は本来{background-color}のようなものを指定するべきではなかったと。
Webコーダーからしてみれば失笑ものの初歩的ミスなのかもしれませんが、
何しろ独学一筋で基本のキが何なのかも未だによくわかっていない自分にとっては、
思ってもみなかった落とし穴にそれはもう驚かされました。
まさかTDだと適用されるものがTRに指定すると無視されるなんて……。

この界隈の恐いところって、何も知らなくてTRタグに背景を指定しても、
「背景色を変える」程度の簡単な操作なら
一見何の問題もなく思い通りに表示されてしまうところなんですよね。
だから、こういうトラブルに見舞われたり、他人に指摘されない限りは
本当はルール違反であるということに永遠に気付くことができないわけです。

そして今回は、基本のキが抜けていたがためにWebに助けを求めた結果、泥沼に陥ってしまうという、
ネットを使おうとして翻弄されるという失敗経験にもなったわけですが。
それもある意味恐いことですよね。知ったかぶりの落とし穴というべきか。
今回は自分でなんとか気付いて是正することができましたが、
もっと抽象的なことを調べようとして気付かないまま泥沼に陥っていることもあるんだろうな、
と思うとネットも改めて思うとちょっと恐いですね。