メインコンテンツへスキップ

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

要素の不透明度を制御。

opacity プロパティは、要素の不透明度レベルを設定。不透明度レベルは透明度レベルを表す。1 はまったく不透明で、.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} を入れる(上記の「不透明度の種類」から選択)を入れる

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,
      )
    ),