【CSS】枠線の色を透明にする方法

  • 2018年5月1日
  • CSS

使いどころがあるかは正直謎ですが…自分の書いたであろうCSSを見返していたら、気になる記述があったのでまとめ。
CSSで指定したボーダー(枠線)の色を透明にする方法です。
…実質 border: none; の記述と変わらないのでは…?

 

コードはこちら。

<div class="border">枠線を透明に</div>
.border {
    border: 1px solid transparent;
}

透明を指定しているのは、transparent というボーダー色の値です。
通常であれば、ここには #000 などの色コードなどを指定しますが、transparent を指定すると線が透明(非表示)になります。
が、コードを見ると、線自体はあります。

感覚としては、visibility: hidden と似たような感じで使う、と覚えるとわかりやすいかも。
この時は枠線を表示して、この時は非表示に!でも他のスタイルに影響が出るのを防ぐために、表示はしないけど残したい!というときに使うのがよさそうです。
CSS初心者の時は、ボーダーの幅で若干横幅のサイズが合わなくて苦労したことがあるので…それの予防に使えそうです。

 

以上、枠線を透明にする方法でした。
ちなみに、transparent は、「向こう側が見えるほど透き通った、透明な」という意味があるとのこと。
そのまんまの意味ですが、とっさに出てこなさそう…!

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG