CSSを上書きで背景色なしにする方法をご紹介!

CSSを上書きで背景色なしにする方法をサンプルコード付きでご紹介します。こちら例えばPC画面とスマホ画面で見た目を変えたいといった時に役立ちます。とても簡単なのでここで習得しておきましょう。

コンテンツ [表示]

  1. 1CSSを上書きで背景色なしにしたい
  2. 2CSSを上書きで背景色なしにする方法
  3. 2.1background-color: rgba(0,0,0,0);を用いる
  4. 2.2background-color: transparent;を用いる
  5. 3まとめ

CSSを上書きで背景色なしにしたい

CSSを上書きで背景色なしにする方法を身に付けることで、例えばPC画面とスマホ画面で見た目を変えたいといった時や、別のライブラリで強制的についている背景色を消したいといった時に役立ちます。

ここでは以下の背景色を「CSSを上書きで背景色なしにする方法」を用いて実現させてみたいと思います。

CSSを上書きで背景色なしにする方法

ではCSSを上書きで背景色なしにする方法について2通り紹介します。

どちらも行っていることは、CSSを上書きでbackground-colorを透明にしているだけですが、後者の方が簡単なので個人的にオススメです。

background-color: rgba(0,0,0,0);を用いる

background-color: rgba(0,0,0,0);は背景色を透明にするための記述です。

このようにCSSを上書きで背景色なしという状態になったため、何も表示されなくなりました。

background-color: transparent;を用いる

先程のbackground-color: rgba(0,0,0,0);と行っていることは同じなのですが、background-color: transparent;の方がぱっと見て何をしているのか分かりやすいですし、記述としてもこちらの方が簡単なのでオススメです。

このように背景色がなくなったため何も表示されなくなりました。

まとめ

いかがでしたでしょうか?

ぜひここで紹介した方法を身に付けて、WEBサイト制作の時などに役立ててください。

今だけ
無料

【5月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

西村卓也
ライター

西村卓也

HTML/CSS/JSに関する記事を執筆しています。よろしくお願いします。