WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

CSSでborderを透明にする

先日ふと、TABLE(罫線付き)を2つ重ね合わせて
上のTABLEのTDのみ罫線を消したいが、ボーダーの1pxの間隔は残したい、どうすればいいか?
といった質問を受け、通常backgroundの指定でよく使う
————————————
transparent:初期値設定=透明
————————————
がborderにも適用されるものなのか調べてみたところ、あっさり使用可能なことが判明。
borderに対してcolorをtransparentにすることで透明のボーダーが引けるようです。

実際書くとこんな感じ。(透明1px実線)
————————————
border: transparent 1px solid;
————————————

今まではborderにtransparentを使用することはあまり想定してませんでいたが
これが使えるとなるとちょっと便利になるかも。

たまにあるmarginの相殺なんかに悩むHTML構成があった場合、
それを回避するにはmarginではなくborderをtransparentにして
太さを5pxなり10pxなりにすればそれで間隔を保つことができたり。

borderにtransparent(透明)にすることで
borderを余白代わりに使うことが出来ますね。

きちんとしたCSS構成を考えると反則技ですが、
どうしようもない時に裏技的に使えそうに思います。

ご参考までに。。。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です