私はWEBエンジニアとして仕事を任されることが多く、以前はデザインは全然ノータッチでしたが、ここ２年位はデザインからコーディングまで仕事をする事も増えてきました。
レスポンシブデザインで作る旨を伝えた上で制作のご依頼をいただいた場合は、ほぼCSSフレームワークのBootstrapを使います。
以前はBootstrap3ベースでサイト制作を行っていた人も多いと思いますが、Bootstrap4というのも実はあって、あまり使っている人がいないようでしたが、私は今年（2018年）の初めから完全にBootstrap4に乗り換えました。
Bootstrap3とBootstrap4ではいくつかクラス名が変更されており、乗り換えの最初の方は確かに少し戸惑いましたが、ある程度理解すると断然Bootstrap4の方が使いやすいことに気がつきます。
Bootstrap3からBootstrap4へ乗り換えの練習をするときは、Bootstrap3で作ったサイトを同じ様にBootstrap4で作ってみると、よく使うクラスの変更箇所が分かるので、良い練習になりますよ。
よく使うクラス名の変更と新しいクラス
よく使うクラスで、いくつか変更されているものがあるので、簡単に挙げてみます。
画像のレスポンシブ化
img-responsive → img-fluid
画像（インライン要素）の中央寄せ
center-block → mx-auto
因みにmx-autoのmxはmr（マージン・ライト）とml（マージン・レフト）のどちらもautoにするという意味
カラムの中央寄せ
無し → justify-content-center
Bootstrap4で一番便利と思ったクラスがこれです。
Bootstrap3では、カラムのセンター寄せはなく、例えばどういう状況で使うかというと
col-sm-2とcol-sm-2の要素があって、このcol-sm-2の要素を中央に配置したいと言うとき。
Bootstrap3では、どうするかというと、左に4カラム分のオフセットを入れます。
記述的には
col-sm-offset-4（4カラムの空白） col-sm-2 col-sm-2 col-sm-4（4カラムの空白→記述は要らない）
となります。
これで、２カラム２つの中央寄せができます。
もし、col-sm-3二つの中央寄せの場合は、
col-sm-offset-3（3カラムの空白） col-sm-3 col-sm-3 col-sm-3（3カラムの空白→記述は要らない）
ですね。
ちなみに、レスポンシブで空白が入らないように、本来はオフセット分は画面幅に応じてディスプレイnoneを指定します。
この例を見ると、全然オフセットだけで対応出来るじゃんって思うかも知れませんが、中央寄せにするカラムの数が奇数になる場合オフセットで対応が出来なくなるのです。
例えばこんな場合です。
col-sm-3 col-sm-2の中央寄せ
中央寄せにしたいカラムが５カラムなので、左に仕込むオフセットは3.5カラムという感じになってしまうのです。
当然小数点がつくクラスはありませんので、場合によっては独自に3.5カラムのスタイルを作るか、私がやっていたのはmx-widthとmargin-right:auto,margin-left:autoのクラスを作って中央寄せを試みていました。
しかしながら、Bootstrap4ではこのオフセットによる中央寄せが不要の、justify-content-centerというクラスが新たに出来たお陰でめちゃくちゃ楽になりました。
使い方はrowと同じ所にjustify-content-centerを指定します。
<div class="row justify-content-center"> <div class="col-sm-3">test</div> <div class="col-sm-2">test2</div> </div>
という風に書くと、col-sm-3とcol-sm-2が中央に配置されます。
この justify-content-center以外にも、左右の端にそれぞれ配置するというjustify-content-betweenというのもあります。
詳しくはBootstrap4公式サイトを見ていただけると、配置のパターンが分かるので是非読んでみて下さい。
bootstrap4 Horizontal alignment
これって何故こんなことが出来るようになったかというと、Bootstrap4ではBootstrap3と違って、float:leftで横並びにしているのではなくdisplay:flexで横並びにしているからなんです。
これだけの配置のパターンがクラス一つで設定できるのですから、相当の時間的な節約が出来ますよね。
スマホ画面にしたときのコンテンツの並びの順番
col-xx-push-カラム数 → order-xx-1（順番）
これは例えば、PC画面で左のカラムに説明文章、右のカラムには画像という配置があった場合、はBootstrap3ではpushとpullというクラスを使ってコードは先に書くけど、右配置という風にコーディングします。
しかしながらBootstrap4では、order-1とかorder-2だけで順番をコントロール出来るようになりました。
例えば
<div class="row"> <div class="col-md-6 order-1 order-md-2">test</div> <div class="col-md-6 order-2 order-md-1">test2</div> </div>
という風に書くと、mdサイズの時は、二番目（この場合は右）に配置されますがタブレット以下のサイズ（縦に並んだとき）は一番最初にorder-1の記述があるカラムが来ます。
pushとpullの時はオフセットで対応していたので、たまに混乱してしまうことがあったのですが、このオーダーだとそのまま順番を書けば良いので凄く楽ですね。
以上がBootstrap4になって便利になったクラスを簡単ですがご紹介しました。
この他にもマージンのクラスなどもより直感的に分かりやすくなっているので、もしBootstrap4に二の足を踏んでいるのだとしたら、すぐにBootstrap4に乗り換えた方が作業効率がかなり上がるので、おすすめします。
Bootstrap4を使うときの注意点
Bootstrap4を使うときに注意しなければいけないのが、Internet Explorer9以下がサポートしていない点です。
Internet Explorer 10以上をサポートしており、IE9以下はサポートしていない。一部のCSS3のプロパティとHTML5の要素は、IE10では完全にサポートされていないか、完全な機能のためにプレフィックス付きのプロパティが必要であることに注意すること。CSS3とHTML5の機能のブラウザのサポートの詳細については、Can I use…で確認するように。IE8-9のサポートが必要な場合は、Bootstrap 3を使用すること。
対応の仕方も一応あるんですが、それをやっても崩れるので、もしPCがメインになるサイトの場合はBootstrap3の方が良いかもしれませんね。
GitHub – coliff/bootstrap-ie8: Bootstrap 4 for IE8 and IE9
Bootstrap4の事が分かるサイトと書籍
公式サイト
Bootstrap4の公式サイトです。
トップページを見てしまうと、英語ばかりでしかも始めるやり方しか載っていないのですが、サンプルページを見ると良いかなと思います。
あとよく見るページはこのglidとflexのページで、row justify-content-centerとか、align-items-centerやるときの記述を忘れたときになんかも見に来てます。
Bootstrap4の参考書
Bootstrap4については結構本が販売されていて、かつてHTMLとCSSを教えていた子もBootstrap4のこの本を読んで使えるようになっていました。
まとめ
いきなり業務でBootstrap4を導入するのは大変かと思いますが、良い悪いを確かめる意味でも先ずは何か作ってみるのがおすすめです。
以上、bootstrap3よりbootstrap4の方が断然使い勝手が良い理由でした！
TEDASKでは個人向けに、マンツーマンのホームページ制作レクチャーを行っております。
メールサポートのプランや、対面もしくはSkype、Zoomを使った1時間のセッションなどのサービスを行っておりますので是非ホームページ制作レクチャーの詳細をご覧になってみてください。
こちらの記事もおすすめです☆
コメント