Tailwind CSS 練習問題 65:位置指定の基準
Tailwind CSSにおいて、ブラウザのビューポート(表示領域)の特定の位置(例えば画面の右下など)に要素を常に固定して表示したい場合、位置指定の基準として設定する正しいクラスはどれか。
- 要素を画面に固定するため `fixed` クラスを使用する
- 要素を画面に固定するため `static` クラスを使用する
- 要素を画面に固定するため `pinned` クラスを使用する
- 要素を画面に固定するため `attach` クラスを使用する
- 要素を画面に固定するため `freeze` クラスを使用する
正解と解説を見る
正解:要素を画面に固定するため `fixed` クラスを使用する
正解は、「fixed」というユーティリティクラスを使用する記述です。
【正解の理由】
CSSにおいて、要素をブラウザの表示領域(ビューポート)を基準にして絶対的に固定し、スクロールしても常に同じ場所に留まらせるためには `position: fixed;` を用います。Tailwind CSSでは、これをそのまま `fixed` クラスとして適用できます。
【不正解の理由】
• 「`static`」クラスは、要素を通常のドキュメントフローに沿って配置するデフォルトの挙動であり、画面には固定されない
• 「`pinned`」というクラスは、ピン留めするという意味合いでは分かりやすいがTailwindの標準クラスには存在しない
• 「`attach`」というクラスは、位置固定のためのクラスとして存在しない
• 「`freeze`」というクラスは、スクロールを止めるようなイメージだがTailwindにはそのようなクラスは用意されていない