メインコンテンツにスキップ ドキュメントナビゲーションにスキップ
Check

不透明度ユーティリティ(Opacity) v5.1.0新設

要素の不透明度を制御。

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
このページの項目 v5.1.0新設

opacity プロパティは、要素の不透明度レベルを設定。不透明度レベルは透明度レベルを表す。1 はまったく不透明で、0.5 は50%可視で、0 は完全に透明。

.opacity-{value} ユーティリティを使用して要素の opacity を設定。

不透明度の種類

.opacity-100opacity: 1

100%

.opacity-75opacity: .75

75%

.opacity-50opacity: .5

50%

.opacity-25opacity: .25

25%

.opacity-0opacity: 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} を入れる(上記の「不透明度の種類」から選択)を入れる

Sass

ユーティリティAPI(Utilities 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,
  )
),