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

Tailwind CSS 練習問題 25:Tailwindの文字変換(text-transform)ユーティリティ

Tailwind CSSにおいて、要素の文字を大文字に変換して表示したい(CSSのtext-transform: uppercaseに相当する)場合、正しいクラスはどれか。

  1. uppercase
  2. text-upper
  3. capitalize-all
  4. font-uppercase
  5. text-transform-upper
正解と解説を見る
正解:uppercase

Tailwind CSSではtext-transformプロパティに対応するユーティリティクラスとして、uppercase、lowercase、capitalize、normal-caseが用意されています。

【正解の理由】
「uppercase」はtext-transform: uppercaseに対応する単体のクラス名であり、テキストをすべて大文字に変換して表示します。

【不正解の理由】
• 「text-upper」:Tailwindの実際の命名規則には存在しない架空のクラス名
• 「capitalize-all」:Tailwindには「capitalize」という単語の先頭のみを大文字にするクラスは存在するが、「capitalize-all」というクラスは存在しない
• 「font-uppercase」:fontというプレフィックスはフォントの太さやファミリーに使われ、文字変換には使われない
• 「text-transform-upper」:Tailwindではプロパティ名をそのままクラス名にはせず、意味の分かる単語(uppercaseなど)を直接クラス名として使う

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