Tailwind CSS 練習問題 13:Tailwindの高さ指定(height)ユーティリティ
Tailwind CSSにおいて、要素に高さ200pxの固定の高さを設定したい場合、正しいクラスはどれか。
- h-[200px]
- height-200
- h-200px
- size-200
- 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」は最大高さを制限するクラスであり、固定の高さを直接設定するものではないため誤り。