コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
要素に不透明度を与える
このレッスンでは、 要素に不透明度を与えてみます。 要素に「opacity」というプロパティですね。 これを与えてあげると、 不透明度を設定することができます。 値は0から1までの比率で、 0が完全な透明です。 1が完全な不透明ということになります。 では、CSS規則の中の h1 と h3、 このタイトルですね。 この部分に対して不透明度を与えてみます。 今、color: blue が設定されてるだけですけれども、 宣言を加えます。 そして opacity ということで、 0.5 という数字を設定しましょう。 そうすると、要素に対して 不透明度が設定されます。 保存して確かめましょう。 h3 も h1 も半透明になりましたね。 そして、要素に対して設定しましたので、 この h1 のほうは背景色、 それからこのボーダーですね。 枠線のほうも半透明になっています。 そして opacity の設定は、 子供に対しても適用されます。 ということですので、今この body の margin が設定されていますが、 さらに加えて、宣言で opacity: 0.5 とします。 そうすると、子供に対しても半透明 の設定が与えられ、 h1 と h3 はさらに opacity: 0.5 となりますから、 かなり薄い状態になります。 保存をして確かめましょう。 p や li の要素 のテキストも薄くなっていますし、 h3 や h1、これはさらに薄くなりましたね。 このレッスンでは、 要素の不透明度を設定するプロパティ、 opacity を紹介しました。 値は0から1までの比率です。 そして、親の設定が子供にも適用されると いうことも覚えておいてください。
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。