Qraft(クラフト) 資格・学習クイズアプリ

Tailwind CSS 練習問題 16:Tailwindの透明度(opacity)ユーティリティ

Tailwind CSSにおいて、要素の透明度(opacity)を50%に設定したい場合、正しいクラスはどれか。

  1. opacity-50
  2. opacity-0.5
  3. transparent-50
  4. alpha-50
  5. 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」のような単語は使用されない

← 前の問題問題一覧次の問題 →
アプリで解いてレーティングを上げる(無料・登録不要)