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

Tailwind CSS 練習問題 13:Tailwindの高さ指定(height)ユーティリティ

Tailwind CSSにおいて、要素に高さ200pxの固定の高さを設定したい場合、正しいクラスはどれか。

  1. h-[200px]
  2. height-200
  3. h-200px
  4. size-200
  5. max-h-200
正解と解説を見る
正解:h-[200px]

Tailwind CSSでは任意の値を角括弧で囲む「アービトラリバリュー(arbitrary value)」記法を使うことで、デフォルトのスケールにない具体的な値を指定できる。「h-[200px]」はこの記法を用いて高さを正確に200pxに設定できるため正解。「height-200」はTailwindに存在しないクラス名であり誤り。「h-200px」は単位を含む値をそのまま連結する記法であり、Tailwindでは無効な書き方のため誤り。「size-200」はTailwindのデフォルトスケール(remベースの数値)を用いた幅と高さ同時指定のクラスだが、200という値はデフォルトスケールに存在せず200pxにはならないため誤り。「max-h-200」は最大高さを制限するクラスであり、固定の高さを直接設定するものではないため誤り。

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