デザインノウハウ

地味に便利なCSSでの透明色指定

当サイトはアフェリエイト広告を利用しています
カッパ子
カッパ子

サイトで一部分の背景を消すにはどうすれば良いの?

ユウ
ユウ

テーマとかで元々ついている色は透明で上書きすれば良いよ!

Webサイトをデザインしている時、このパーツの背景色を消したいな、と思う時があると思います。

本記事では、元から色が指定してある要素を消すのに便利なCSSでの透明色の指定について解説します。

CSSでの透明色指定について

CSSで色を指定する場合、RGBやカラーコードといった方法がありますが、それらは色の指定なので透明には出来ません。

CSSで背景色を透明にしたい時は下記のように色を指定しましょう。

background-color: transparent;

一番よく使うので「background-color」で書きましたが、「color」など色関係のものであれば機能します。(文字であれば「display:none」の方が良いと思いますが)

文字色として使うと、選択しないと見えない文字みたいなことも可能です。
(下の枠内を選択してみてね)

透明な文字を隠すこともできるよ!

これ以外に背景色と同じ色を指定して透明のように見せる方法もありますが、背景色を変えたら一緒に変えなくてはいけなかったり、ブラウザ上のダークモードなどで背景色が変わる可能性を考えると透明にしておくのが確実でしょう。

あまり多用すべきではありませんが、「!Important」で指定しておけばさらに安心です。

一部分の色を消すのに役立つCSSの透明色指定、参考になれば幸いです。