Tailwind CSS 練習問題 43:レイアウト(最大幅と中央揃え)
Tailwind CSSにおいて、要素の最大幅を現在のブレークポイントに合わせつつ、左右のマージンを自動調整して画面の中央に配置したい場合、正しいクラスの組み合わせはどれか。
- `container mx-auto`クラスを使用して、中央に配置する。
- `wrapper mx-auto`クラスを使用して、中央に配置する。
- `box center`クラスを使用して、中央に配置する。
- `content mx-auto`クラスを使用して、中央に配置する。
- `layout auto`クラスを使用して、中央に配置する。
正解と解説を見る
正解:`container mx-auto`クラスを使用して、中央に配置する。
Tailwind CSSで要素の幅を画面サイズに合わせて固定しつつ中央に配置する場合、`container mx-auto`が正解です。
【正解の理由】
`container`クラスは現在のブレークポイントに応じた最大幅(max-width)を設定し、`mx-auto`で左右のマージンを自動(auto)にして中央揃えを実現します。
【不正解の理由】
• 「`wrapper mx-auto`クラスを使用して、中央に配置する」は誤り。`wrapper`という標準クラスは存在しません
• 「`box center`クラスを使用して、中央に配置する」は誤り。そのような標準クラスは存在しません
• 「`content mx-auto`クラスを使用して、中央に配置する」は誤り。`content`という標準クラスは存在しません
• 「`layout auto`クラスを使用して、中央に配置する」は誤り。そのような標準クラスは存在しません