ども。WEBおじさんです。
えー、前回まで、合計4記事ですか。
1記事ブレイク挟みましたがｗ
自作PC記事を書かせていただきました。
どうでしたでしょうか？
自作PC作ってみたくなりました？
今まさに同じパーツを使って作っているって人いました？ｗ
そんな方々の参考になればうれしいです。
その後、仕事の合間にちょいちょい立ち上げては色々インストールしたり、ちょっとブラウジングしたり、設定を自分仕様に変更したり、なんやかんや遊んでますｗ
まだ半分くらいしか仕事仕様になっていないのでね、仕事では使っていないんですけどね。
とりあえず、今のPCに入っているデータをネットワークHDDにコピーしたらメインにしようと思ってます。
っつーわけで、今回は元通りWEB制作に関する内容です！
今やあまり使われなくなったんじゃあないでしょうか。
過去の遺物と言うにはまだ早いですが「table」タグ関連のお話です。
ちょっと前は、なんかスマホブラウザがtableに対応していないとか何とかでスマホサイトを作るときにはtableを使用しないように、みたいな感じになってたような気がするんですけどね。。
気のせい？ｗ
まぁ、とにかくtableタグを使わなくても今はflexとかあるし、使われているケースが昔に比べてだいぶ減ったタグの一つです。
私も昔はレイアウトにtableを必ず使ってましたからね。
で、一体なんのバグかというと、まず一つ目はtdのborderが消えてしまう、というものです。
では、どんな時に出てしまう症状なのか？
条件が2つあります。
- tdにposition:relative;を指定。
- tdに背景色を指定。
この2つの条件を満たした場合、そのtdのborderが消えてしまいます。しかも、全部ではなく中途半端にｗ
これを見つけた時、マジでイラっとしてしまいました。
なぜなら私がコーディングしたものではなかったからｗ
よくその状態で放っておけるな、と。
そんな苛つきをよそにそのページは存在し続けるのです。
しかも、そのまま納品されようとしていました。
マジで頭おかしいと思いました。
そしてそのイラついた顔でコーディングを担当したヤツの目をまっすぐ見てそらさずに「ちょっと表示がおかしいとこがあったから直すので納品ちょっと待って」と言ってやりました。
で、早速CSSとHTMLを見てみたんですが、特におかしな部分は見当たらず。原因を探ると上に挙げたものが発覚。
改善策として浮かんだのは「背景色を使わない」「td内に背景用のブロック要素を追加する」の2つ。borderを使わないわけにもいかないしね。
でも、どちらもできない。背景色はデザイン上使えっていうし、tdに背景用の用をもめんどくさい。
で、Google（神）にお祈りしました。
すると、出てきましたよ～。
回答はこちら。
background-clip: padding-box;
これを該当のtdに指定するとあら不思議。ちゃんとborderが表示されましたとさ。めでたしめでたし。
2つ目は、こちらもちょっとややこしめ。
症状は、td内の要素を縦にピタピタにしたいが、heightを100%にしてもなぜかならない。ちっ。簡単そうなのになぁ。
で、今回もGoogle（神）降臨。
こちらはすぐに出てきました。
tableとtdにheight:100%;を指定してあげれば解決します。
あっさりですね。
おまけですが、この症状の場合、tdにpaddingをセットしている場合でその中の要素をheightを100%にした場合、tdをはみ出すことがあるかもしれません。理由は、「paddingは要素の内側につくものだから」です。
要するに、paddingを含めた高さ100%が反映されている、という理由です。
これを、paddingの部分は含まずにheight100%にしたいというときは、tdに以下のものを追加してあげると解決します。
box-sizing:border-box;
これで、padding部分は含まない高さが100%として指定されます。素晴らしい！
以上の2つです。
今回は結構初心者向けのお話でしたかね。
でも、1つ目の問題は知らなかったし、一概に初心者向けとは言えないのかもですね。
ということで、WEBおじさんでした！また！