不透明度ユーティリティ（Opacity） v5.1.0新設
要素の不透明度を制御。
※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
このページの項目 v5.1.0新設
opacity プロパティは、要素の不透明度レベルを設定。不透明度レベルは透明度レベルを表す。1 はまったく不透明で、0.5 は50％可視で、0 は完全に透明。
.opacity-{value} ユーティリティを使用して要素の opacity を設定。
不透明度の種類
.opacity-100（opacity: 1）
100%
.opacity-75（opacity: .75）
75%
.opacity-50（opacity: .5）
50%
.opacity-25（opacity: .25）
25%
.opacity-0（opacity: 0）
0%
設定例
100%の不透明度（完全に不透明）<div class="opacity-100">...</div>
75%の不透明度<div class="opacity-75">...</div>
50%の不透明度<div class="opacity-50">...</div>
25%の不透明度<div class="opacity-25">...</div>
0%の不透明度（透明）<div class="opacity-0">...</div>
【設定】
- 使用したい要素に
.opacity-{value}（上記の「不透明度の種類」から選択）を入れる{value}は、0,25,50,75,100のいずれかを選択
CSS
SassユーティリティAPI（Sass utilities API）v5.3.0ユーティリティAPIより名称変更
不透明度ユーティリティは、scss/_utilities.scss のユーティリティAPIで宣言されている。ユーティリティAPIの使用方法はこちらに掲載。
デフォルトの設定
scss/_utilities.scss 内 utils-opacity の設定"opacity": (
property: opacity,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
),