Question 1

CSSブレークポイントとは何ですか？

Accepted Answer

CSSブレークポイントはウェブサイトのレイアウトが変わる特定のビューポート幅です。@media (min-width: 768px)のようなメディアクエリで定義します。

Question 2

Tailwind CSSのブレークポイントは何ですか？

Accepted Answer

Tailwind CSSにはsm(640px)、md(768px)、lg(1024px)、xl(1280px)、2xl(1536px)の6つのデフォルトブレークポイントがあります。

Question 3

Bootstrapのブレークポイントは何ですか？

Accepted Answer

Bootstrap 5はxs(576px未満)、sm(576px以上)、md(768px以上)、lg(992px以上)、xl(1200px以上)、xxl(1400px以上)の6つのブレークポイントを定義しています。

Question 4

モバイルファーストとは何ですか？

Accepted Answer

モバイルファーストデザインは小さい画面のスタイルを先に書き、min-widthメディアクエリで大きい画面のスタイルを追加する方法です。

Question 5

カスタムブレークポイントを定義できますか？

Accepted Answer

はい。Tailwindではtailwind.config.jsでブレークポイントを拡張できます。このツールでもカスタムブレークポイントを追加して比較できます。

ブレークポイントビジュアライザー

よくある質問