TEDASKは埼玉県川口市のフリーランスWEBエンジニアが運営するホームページです。WordPressによるウェブサイト制作からWEB制作に関するお悩み解決をお手伝いしています!

TEDASK(テダスク)

HTML+CSS エンジニア向け

Bootstrap3よりBootstrap4の方が断然使い勝手が良い理由(CSSフレームワーク)

更新日:

私はWEBエンジニアとして仕事を任されることが多く、以前はデザインは全然ノータッチでしたが、ここ2年位はデザインからコーディングまで仕事をする事も増えてきました。

レスポンシブデザインで作る旨を伝えた上で制作のご依頼をいただいた場合は、ほぼ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カラムの空白→記述は要らない)

となります。

 

これで、2カラム2つの中央寄せができます。

もし、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の中央寄せ

中央寄せにしたいカラムが5カラムなので、左に仕込むオフセットは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を使用すること。

》ブラウザとデバイス(Browsers and devices) :https://cccabinet.jpn.org/bootstrap4/getting-started/browsers-devices

 

対応の仕方も一応あるんですが、それをやっても崩れるので、もしPCがメインになるサイトの場合はBootstrap3の方が良いかもしれませんね。

GitHub - coliff/bootstrap-ie8: Bootstrap 4 for IE8 and IE9

https://github.com/coliff/bootstrap-ie8

 

Bootstrap4の事が分かるサイトと書籍

公式サイト

Bootstrap4の公式サイトです。

https://getbootstrap.com/

 

トップページを見てしまうと、英語ばかりでしかも始めるやり方しか載っていないのですが、サンプルページを見ると良いかなと思います。

https://getbootstrap.com/docs/4.2/examples/

 

あとよく見るページはこのglidとflexのページで、row justify-content-centerとか、align-items-centerやるときの記述を忘れたときになんかも見に来てます。

https://getbootstrap.com/docs/4.0/layout/grid/

https://getbootstrap.com/docs/4.0/utilities/flex/

 

Bootstrap4の参考書

Bootstrap 4 フロントエンド開発の教科書

Bootstrap 4 フロントエンド開発の教科書

宮本 麻矢, 朝平 文彦
3,542円(11/20 16:20時点)
発売日: 2018/08/25
Amazonの情報を掲載しています

Bootstrap4については結構本が販売されていて、かつてHTMLとCSSを教えていた子もBootstrap4のこの本を読んで使えるようになっていました。

 

まとめ

いきなり業務でBootstrap4を導入するのは大変かと思いますが、良い悪いを確かめる意味でも先ずは何か作ってみるのがおすすめです。

 

以上、bootstrap3よりbootstrap4の方が断然使い勝手が良い理由でした!

 

 

Bootstrapの基本を学びたい方

TEDASKでは個人向けに、マンツーマンのホームページ制作レクチャーを行っております。

メールサポートのプランや、対面もしくはSkype、Zoomを使った1時間のセッションなどのサービスを行っておりますので是非ホームページ制作レクチャーの詳細をご覧になってみてください。

 

こちらの記事もおすすめです☆

notosansjp

HTML+CSS WordPress 初心者向け 運用者向け

WordPressで日本語Googleフォント(Noto Sans JP)を使う簡単な方法

こんにちは。 埼玉のフリーランスエンジニアとしです! この記事では、今使っているテーマのフォントがいまいち読みにくいなぁと思っている人の為に、google fontで無料で提供されている”Noto S ...

リンクを新しいタブで開く

HTML+CSS WordPress 初心者向け 運用者向け

WordPressの「リンクを新しいタブで開く」の意味

WordPressで記事を書いている中でリンクを貼る時や、メニューでリンクを設定する際に「リンクを新しいタブで開く」というチェックボックスがあるのをお気づきでしょうか? 赤で囲んだ部分です。 これって ...

bootstrap4

HTML+CSS エンジニア向け

Bootstrap3よりBootstrap4の方が断然使い勝手が良い理由(CSSフレームワーク)

私はWEBエンジニアとして仕事を任されることが多く、以前はデザインは全然ノータッチでしたが、ここ2年位はデザインからコーディングまで仕事をする事も増えてきました。 レスポンシブデザインで作る旨を伝えた ...

WP social bookmarking light

HTML+CSS WordPress プラグイン 初心者向け

WP social bookmarking lightでずれるのを直す方法

こんにちは。埼玉在住のフリーランスエンジニアのとしです! WP social bookmarking lightはWordPressではソーシャルボタンを簡単に入れられるポピュラーなプラグインで いい ...

HTML+CSS WordPress エンジニア向け カスタマイズ プラグイン 初心者向け

WordPressで気軽に・簡単にCSSを書くならSimple CSSがお勧め!

こんにちは。Toshiです。 WordPressの使い方やカスタマイズの仕方をレクチャーする上で よくCSSで文字の大きさを変えたい、とか色を変えたい等 やること自体は簡単なことでも、WordPres ...

 

 

この記事が気に入ったら
いいね ! しよう

-HTML+CSS, エンジニア向け
-,