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

Tailwind CSS 練習問題 65:位置指定の基準

Tailwind CSSにおいて、ブラウザのビューポート(表示領域)の特定の位置(例えば画面の右下など)に要素を常に固定して表示したい場合、位置指定の基準として設定する正しいクラスはどれか。

  1. 要素を画面に固定するため `fixed` クラスを使用する
  2. 要素を画面に固定するため `static` クラスを使用する
  3. 要素を画面に固定するため `pinned` クラスを使用する
  4. 要素を画面に固定するため `attach` クラスを使用する
  5. 要素を画面に固定するため `freeze` クラスを使用する
正解と解説を見る
正解:要素を画面に固定するため `fixed` クラスを使用する

正解は、「fixed」というユーティリティクラスを使用する記述です。

【正解の理由】
CSSにおいて、要素をブラウザの表示領域(ビューポート)を基準にして絶対的に固定し、スクロールしても常に同じ場所に留まらせるためには `position: fixed;` を用います。Tailwind CSSでは、これをそのまま `fixed` クラスとして適用できます。

【不正解の理由】
• 「`static`」クラスは、要素を通常のドキュメントフローに沿って配置するデフォルトの挙動であり、画面には固定されない
• 「`pinned`」というクラスは、ピン留めするという意味合いでは分かりやすいがTailwindの標準クラスには存在しない
• 「`attach`」というクラスは、位置固定のためのクラスとして存在しない
• 「`freeze`」というクラスは、スクロールを止めるようなイメージだがTailwindにはそのようなクラスは用意されていない

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