knowhow

Bootstrap4

Bootstrap4のブレイクポイント・区間は、Bootstrap3と異なるので要注意!

2017.09.26

Bootstrap3は3つのブレイクポイントが設定されていた

Bootstrap4_3

Web制作で、Bootstrapを使用している方はご存知かと思いますが、Bootstrap3は3つのブレイクポイントが用意されており、4つの区間(grid tier)が存在していました。詳細は下記の通りです。



■Bootstrap3のブレイクポイントと区間
xs:767px以下
sm:768px以上991px以下
md:992px以上1199px以下
lg:1200px以上



このような構成となっていた為、スマホは767px以下という事で、xs区間を使用してデザインしていたかと思います。ところが、Bootstrap4では、このスマホ表示部分のブレイクポイントにおいて、大きな変更がありました。


Bootstrap4は4つのブレイクポイントが用意され、xl区間が新たに追加された

Bootstrap4

Bootstrap4では下記のように5つの区間が用意され、新たに追加された「xl」以外については、それぞれの区間名自体はBoostrap3と同じなのですが、同じ区間名でもそれを指し示す領域が異なっているのがわかります。



■Bootstrap4のブレイクポイントと区間
xs:575px以下
sm:576px以上767px以下
md:768px以上991px以下
lg:992px以上1199px以下
xl:1200px以上



Bootstrap4_2

具体的には、新たに追加された「xl」区間が指し示す領域は1200px以上の範囲で、Bootstrap3では「lg」として扱われていた領域になります。Bootstrap4では「lg」は、992px以上1199px以下の領域が対象となり、ひとつサイズがズレている事に気付くかと思います。同じような流れで、「md」、「sm」も変更になっており、Bootstrap4で新たに追加されたブレイクポイント(576px)が存在する事で、「xs」は、575px以下を指し示す事になります。



つまりBootstrap3の記述に慣れている方は、同じ考えでBootstrap4を使用して区間指定をすると思わぬ表示に戸惑うことがあるかと思います。わざわざ同じ区間名で表示領域をズラすというのは混乱しやすいと思うのですが、決まってしまった事は仕方ないので、Bootstrap4の記述に徐々に慣れていく必要がありますね。



Bootstrap4のブレイクポイントの詳細は下記のページにわかりやすく記載されています。

■参考サイト
http://qiita.com


まとめ

今やWeb制作には欠かせないと言っても過言ではないBootstrap。常に進化していきますので、新しい技術に乗り遅れないようにしっかり対応していきたいものです。