主要なCSSフレームワークでデフォルト設定されているブレイクポイントまとめ

HTML/CSS

今回は、主要なCSSフレームワークでデフォルト設定されているブレイクポイントについて調べたのでまとめてみました。
今回紹介するCSSフレームワークは、下記の通りです。
また、最後には各フレームワークごとにデフォルト設定されているブレイクポイントをまとめてありますので、CSSフレームワークの比較などを行いたい方はそちらをご覧ください。

Tailwind CSS

Tailwind CSSのページのスクリーンショット

https://tailwindcss.com/

Tailwind CSSのブレイクポイント

Tailwind CSSでデフォルト設定されているブレイクポイントは、以下のようになっています。

sm md lg xl 2xl
640px 768px 1024px 1280px 1536px

・参考ページ:
https://tailwindcss.com/docs/responsive-design

Tailwind CSSでデフォルト設定されているブレイクポイント

Bulma

Bulmaのページのスクリーンショット

https://bulma.io/

Bulmaのブレイクポイント

Bulmaでデフォルト設定されているブレイクポイントは、以下のようになっています。

Mobile Tablet Desktop Widescreen FullHD
Up to 768px Between 769px and 1023px Between 1024px and 1215px Between 1216px and 1407px 1408px and above

・参考ページ:
https://bulma.io/documentation/overview/responsiveness/#breakpoints

Bulmaでデフォルト設定されているブレイクポイント

Pure CSS

Pure CSSのページのスクリーンショット

https://purecss.io/

Pure CSSのブレイクポイント

Pure CSSでデフォルト設定されているブレイクポイントは、以下のようになっています。

sm md lg xl xxl
≥ 568px ≥ 768px ≥ 1024px ≥ 1280px ≥ 1920px

・参考ページ: https://purecss.io/grids/

Pure CSSでデフォルト設定されているブレイクポイント

Skeleton

Skeletonのページのスクリーンショット

http://getskeleton.com/

Skeletonのブレイクポイント

Skeletonでデフォルト設定されているブレイクポイントは、以下のようになっています。

Mobile Phablet Tablet Desktop Desktop HD
400px 550px 750px 1000px 1200px

・参考ページ: http://getskeleton.com/ 

Skeletonでデフォルト設定されているブレイクポイント

Bootstrap

Bootstrapのページのスクリーンショット

https://getbootstrap.jp/

Bootstrapのブレイクポイント

Bootstrapでデフォルト設定されているブレイクポイントは、以下のようになっています。

Small Medium Large Extra large Extra extra large
≥ 576px ≥ 768px ≥ 992px ≥ 1200px ≥ 1400px

・参考ページ:
https://getbootstrap.jp/docs/5.0/layout/breakpoints/#available-breakpoints

Bootstrapでデフォルト設定されているブレイクポイント

Semantic UI

Semantic UIのページのスクリーンショット

https://semantic-ui.com/

Semantic UIのブレイクポイント

Semantic UIでデフォルト設定されているブレイクポイントは、以下のようになっています。

Mobile Tablet Small Monitor Large Monitor
below 768px 768px – 991px 992px – 1200px above 1200px

・参考ページ:
https://semantic-ui.com/elements/container.html

Semantic UIでデフォルト設定されているブレイクポイント

Materialize

Materializeのページのスクリーンショット

https://materializecss.com/

Materializeのブレイクポイント

Materializeでデフォルト設定されているブレイクポイントは、以下のようになっています。

Mobile Devices Tablet Devices Desktop Devices Large Desktop Devices
<= 600px > 600px > 992px > 1200px

・参考ページ:
https://materializecss.com/grid.html#grid-responsive

Materializeでデフォルト設定されているブレイクポイント

UIkit

UIkitのページのスクリーンショット

https://getuikit.com/

UIkitのブレイクポイント

UIkitでデフォルト設定されているブレイクポイントは、以下のようになっています。

s m l xl
640px 960px 1200px 1600px

・参考ページ:
https://getuikit.com/docs/width#responsive-width

UIkitでデフォルト設定されているブレイクポイント

Foundation

Foundationのページのスクリーンショット

https://get.foundation/

Foundationのブレイクポイント

Foundationでデフォルト設定されているブレイクポイントは、以下のようになっています。

Small Medium Large
any screen 640 pixels or larger 1024 pixels or larger

・参考ページ:
https://get.foundation/sites/docs/media-queries.html#default-media-queries

Foundationでデフォルト設定されているブレイクポイント

まとめ

ここでは、各CSSフレームワークでデフォルト設定されているブレイクポイントだけをまとめて紹介していきます。

CSSフレームワーク ブレイクポイント
Tailwind CSS 640px, 768px, 1024px, 1280px, 1536px
Bulma 768px, 1024px, 1216px, 1408px
Pure CSS 568px, 768px, 1024px, 1280px, 1920px
Skeleton 400px, 550px, 750px, 1000px, 1200px
Bootstrap 576px, 768px, 992px, 1200px, 1400px
Semantic UI 768px, 992px, 1200px
Materialize 600px, 992px, 1200px
UIkit 640px, 960px, 1200px, 1600px
Foundation 640px, 1024px

以上、主要なCSSフレームワークでデフォルト設定されているブレイクポイントについて紹介してきました。

関連記事

コメントを残す





このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください