Tailwind CSS 練習問題 16:Tailwindの透明度(opacity)ユーティリティ
Tailwind CSSにおいて、要素の透明度(opacity)を50%に設定したい場合、正しいクラスはどれか。
- opacity-50
- opacity-0.5
- transparent-50
- alpha-50
- opacity-half
正解と解説を見る
正解:opacity-50
Tailwind CSSでは「opacity-50」クラスを使うことで要素の透明度を50%に設定できます。
【正解の理由】
Tailwindのopacityユーティリティは「opacity-{数値}」という形式で、数値は0から100までの間で指定します(例:opacity-0, opacity-25, opacity-50, opacity-75, opacity-100)。「opacity-50」はopacity: 0.5に対応し、50%の透明度を表します。
【不正解の理由】
• 「opacity-0.5」:Tailwindのクラス名には小数点を含む数値表記は使われず、0〜100のパーセンテージ相当の整数を使用する
• 「transparent-50」:「transparent」はTailwindでは色を透明にするためのキーワード(background-color: transparentなど)であり、透明度の割合指定には使われない
• 「alpha-50」:Tailwindの標準クラスには存在しない名称
• 「opacity-half」:Tailwindのクラス名は数値で指定するため、「half」のような単語は使用されない