【CSS】「opacity」について解説！【要素の不透明度の設定】
この記事はこのような方へ向けて書いています。
この記事で得られる知識！
- 「opacity」で何ができるのか？
- 「opacity」の使い方！
- 「opacity」を使う上での注意点。
この記事を読むことで、これらの知識が得られます。
この記事でサクッと「opacity」について学習しちゃって下さい！
「opacity」では、何ができるのか？
CSSの「opacity」プロパティを使うと、「要素の不透明度の設定」ができます。
要素を透かせて、背景が見えるような感じにできますね。
「opacity」を使ってみると、どんな感じか？
この様に要素を配置しました。
そこで、下記の様なコードを書きます。
.skyblue {
opacity: 0.5;
}「スカイブルー色」の要素に「opacity」を使ってみました。
すると上の様に、要素が薄くなり、背景が見えるようになります。
「opacity」の使い方とは？
「opacity」には、「０～１」の範囲の数値を指定します。
「１」だと、要素は完全に不透明で、「０」だと要素は完全に透明です。
不透明度が数値によってどのように変化するか。
上の様に、「opacity」の値が１に近づくほど、不透明度が上がっているのが確認できるかと思います。
公式定義。
「opacity」の公式定義についてです。
「opacity」の公式定義
- 初期値は、「１」
- 継承は、なし
これらも知っておいてくださいね。
「opacity」は子孫要素すべてに影響する
「opacity」の設定をすると、その要素だけじゃなくて、すべての子孫要素に影響します。
この様に、一番外側の「スカイブルー色」の要素にだけ「opacity」の設定をしたのですが、全ての子孫要素に影響を与えています。
この様な仕様であることを覚えておいてください。
「opacity」を使う上での注意点。
「opacity」を使う上での注意点と、その解決策について書きます。
「opacity」を使うと、テキストも薄くなってしまう。
この様に「opacity」を使うと、テキストごと薄くなってしまいます。
実は、解決策があります！
その方法について解説しますね。
【解決策】「rgba」を使う。
背景色だけを薄くして、テキストはそのままにしたければ、「rgba」を使って背景色の設定をすればＯＫです。
.skyblue {
background-color: rgba(134, 206, 235, 0.5);
}コードはこんな感じですね。
すると下の様になります。
テキストが薄くなっていないのが確認できるかと思います。
分かりやすいように、背景に画像を入れてみました。
すると、下の様に、要素が透けているのが確認できると思います。
でも、テキストはクッキリです。
省略した書き方もできる。
.skyblue {
opacity: 0.6;
opacity: .6;
}この2行は同じ意味を表しています。
CSSでは、「0.1」や「0.6」など、整数部分が「０」ならそれを省略して書くことができます。
この様な書き方ができることも知っておいてね！
まとめ。
「opacity」を使うと、「要素の不透明度の設定」ができる。
値には、「０～１」の数値を書く。
「１」だと、不透明度が最大なので、要素はクッキリ見える。
「０」だと、不透明度が最小なので、要素は全く見えない。
また、「opacity」の影響は、全ての子孫要素に影響する。
要素の背景色だけじゃなく、テキストも薄くなる。
背景色だけ薄くしたい場合は、「rgba」を使って背景色の指定をすればOK。
それではこんな感じでこの記事を終わります！
ではまた！