SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

CSSのopacityの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:34動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、オパシティです。
  4. 0:06不透明度、つまりどれくらい透けさせるかを決めるプロパティです。
  5. 0:10薄いフィルムを一枚かぶせたように、要素全体が透けて、後ろにある内容がうっすら見えるようになります。
  6. 0:18大切なのは、薄くなるのが背景だけではないことです。
  7. 0:21枠線も、中の文字も、画像も、箱全体がまとめて薄くなります。
  8. 0:26この動画では、ゼロてんごと、いちを比べながら、値の読み方や、背景だけを薄くする方法との違い、
  9. 0:31効かないときの確認まで、順番に見ていきます。
  10. 0:36写真やカード、ボタンなど、身の回りの多くの場所で使われている、とても身近なプロパティです。
  11. 0:43まず基本の書き方です。
  12. 0:45スライドのように、対象のクラスにオパシティと数値を書くだけです。
  13. 0:49プロパティ名の後ろにコロン、値の最後にセミコロンを置く、通常の宣言と同じ形です。
  14. 0:56クラスの名前は、エイチティーエムエルのクラス属性と一致させてください。
  15. 1:01仕様上の初期値は、いちです。
  16. 1:03これはまったく透けていない、通常の表示という意味です。
  17. 1:07通常は親から子へ継承しません。
  18. 1:09ただし継承しないことと、見た目に影響がないことは別です。
  19. 1:14親に指定すると、子も含めた全体がひとまとまりとして薄く見えます。
  20. 1:18その点は後のセクションで改めて確認します。
  21. 1:22値の読み方を整理します。
  22. 1:23指定できるのは、ゼロからいちまでの数値、または割合です。
  23. 1:28いちは不透明で、通常どおりくっきり見える状態です。
  24. 1:32ゼロてんごは半分だけ透けた状態で、要素と後ろの内容が重なって見えます。
  25. 1:37ゼロは完全な透明で、目には見えなくなります。
  26. 1:41割合で書くこともできて、ごじゅっぱーせんとはゼロてんごと、ひゃくぱーせんとはいちと同じ意味です。
  27. 1:48範囲を超えた数値を書くと、端の値に丸められて扱われます。
  28. 1:52迷ったら、まずゼロてんごを基準にして、そこから少しずつ数値を動かすと、変化の加減がつかみやすくなります。
  29. 2:00慣れてきたら、ゼロてん二五や、ゼロてん七五のような細かい値も試して、好みの透け具合を探してみましょう。
  30. 2:08オパシティで初心者がつまずきやすいのが、子要素への影響です。
  31. 2:13親の要素にゼロてんごを指定すると、その中にある文字や画像などの子要素も、
  32. 2:18すべて一緒に半分だけ透けた状態になります。
  33. 2:22しかも、子要素側でいちを指定し直しても、親より濃く表示することはできません。
  34. 2:28親と子は一つのグループとしてまとめて透ける、と考えるのが分かりやすいでしょう。
  35. 2:34前のセクションで触れた、継承はしない、という話との違いに注意してください。
  36. 2:40プロパティの値自体は引き継がれませんが、見た目の結果としては、グループ全体に透明度が掛かるのです。
  37. 2:48やりたいことが、背景だけを薄くすることなら、オパシティは向きません。
  38. 2:53オパシティでは文字まで一緒に薄くなって、文章が読みにくくなってしまうからです。
  39. 2:59そんなときは、背景色そのものに透明度を持たせます。
  40. 3:03アールジービーエーのように、色の指定にアルファ値、つまり透明度を一緒に書く方法です。
  41. 3:09こうすれば、半透明になるのは背景色だけで、文字や枠線は濃いまま保てます。
  42. 3:15要素全体を透けさせたいのか、背景だけなのか。
  43. 3:18目的をはっきりさせてから、二つの方法を使い分けるのが、このプロパティを使いこなすコツです。
  44. 3:25枠線だけを薄くしたい場合も考え方は同じで、ボーダーカラーにアルファ値付きの色を指定します。
  45. 3:32ここからは実例です。
  46. 3:34エイチティーエムエルでは、ステージという親の中に、デモという箱を一つ置きます。
  47. 3:40中には、折り返しが確認できる程度の文章を入れます。
  48. 3:43シーエスエスでは、デモに内側の余白と、濃い緑色の太い枠線、薄い黄緑色の背景を付けておきます。
  49. 3:50この土台の状態では、オパシティはまだ指定していないので、初期値のいち、つまりまったく透けていない表示です。
  50. 3:58土台はそのままにして、最後に加えるオパシティの一行だけを切り替えて、ゼロてんごと、
  51. 4:03いちの違いを比べていきます。
  52. 4:07ブラウザーで開いたときに、土台の色とデモの箱の境目がはっきり見える状態が、
  53. 4:10比較の出発点になります。
  54. 4:14土台ができたら、今回変更する一行を加えます。
  55. 4:18デモに、オパシティ、ゼロてんごを指定します。
  56. 4:21すると、薄い黄緑だった背景も、濃い緑だった枠線も、中の文字も、すべて半分だけ透けて、
  57. 4:27後ろの土台の色がうっすら重なって見えるようになります。
  58. 4:32一方で、箱の大きさ、余白、枠線の太さ、文章の折り返しといったレイアウトは、
  59. 4:36まったく変わりません。
  60. 4:40オパシティは配置には手を付けず、見た目の透け具合だけを変える仕組みだということが、
  61. 4:45この一例でよく分かります。
  62. 4:49重なりの表現や、ホバー時の演出の土台にもなる指定です。
  63. 4:53では、最後の一行の値だけを、いちに変えてみましょう。
  64. 4:57他の指定はすべて同じです。
  65. 5:00今度は透け具合がなくなり、背景の黄緑も、枠線の緑も、文字も、元のくっきりした状態にすぐ戻ります。
  66. 5:07いちは初期値でもあり、不透明に戻すための値として覚えておくと便利です。
  67. 5:13たとえば、普段は少し薄く見せておき、マウスを乗せたときだけ、いちにしてはっきり見せる。
  68. 5:20そんな切り替え表現が、この一行の書き換えだけで実現できます。
  69. 5:25ゼロてんごと、いち。
  70. 5:26この二つを往復できれば、基本操作は押さえたと言えます。
  71. 5:30使いどころと注意点です。
  72. 5:32オパシティは、画像やカードを少し控えめに見せたり、ホバーでくっきりさせたり、
  73. 5:36背景の上に文字を重ねる演出でよく使われます。
  74. 5:40トランジションと組み合わせれば、ふわりと現れる動きも作れます。
  75. 5:44注意したいのは、まず読みやすさです。
  76. 5:46薄くしすぎると文字のコントラストが下がり、内容が読みにくくなります。
  77. 5:51もう一つ、ゼロにしても要素の場所は残り、クリックなどの操作を受け付ける場合があります。
  78. 5:57完全に操作できないように隠したいときは、ビジビリティやディスプレイなど、
  79. 6:00目的に合う別の方法を選んでください。
  80. 6:04アニメーションで使う場合は、変化が速すぎると読み取りにくいので、短すぎない時間を付けるのもコツです。
  81. 6:10効かないと感じたときの確認です。
  82. 6:13まず、スタイルシートが読み込めているか、セレクターとクラスの名前が一致しているかを確かめます。
  83. 6:20次に開発者ツールを開き、スタイルズで宣言が無効になっていないか、別の宣言に上書きされていないかを見て、
  84. 6:25コンピューテッドで最終的な値を確認します。
  85. 6:31見落としやすいのが親要素の影響です。
  86. 6:34親にすでに小さい値が掛かっていると、子側でいちにしても、それ以上濃くはなりません。
  87. 6:40また、背景だけを変えたいのに文字まで薄くなる場合は、指定する場所が違うサインです。
  88. 6:46順番に切り分けて調べましょう。
  89. 6:48最後に互換性とまとめです。
  90. 6:50オパシティは、クロームいち以降、エッジじゅうに以降、ファイアフォックスいち以降、
  91. 6:56サファリに以降と、非常に古いブラウザーから対応している、安心して使えるプロパティです。
  92. 7:03まとめます。
  93. 7:03オパシティは、ゼロからいちまでの数値で、背景も文字も含めた要素全体の不透明度を決めるもので、
  94. 7:08初期値はいち、継承はしませんでした。
  95. 7:13背景だけを薄くしたいときは、色のアルファ値を使うのでしたね。
  96. 7:17練習として、実例でゼロてんごと、いちの違いを言葉で説明し、次にゼロてん二五など別の値でも比べてみてください。
  97. 7:25お疲れさまでした。
  98. 7:27一つの値だけでなく、親子関係と背景だけの方法まで言えるようになれば、このプロパティは卒業です。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

opacityの役割と主な指定値を解説。背景だけでなく文字を含む箱全体が薄くなります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのopacityの使い方：指定値・実例・効かない原因とブラウザー互換性 →