こんにちは！ 森和恵です。
2月に入りましたね。あっという間の1月でしたね。時の流れに逆らわず、めげずに頑張っていきたいです。
今回は、正式リリースされたばかりの“Bootstrap4”についてのお話です。
まずはお知らせから。いま、ガッツリと取り組んでるイベントがふたつあります。
【ウェブかける × Dreamweaver (XDもあるよ！) - connpass】
https://r360study.connpass.com/event/76854/
「好きなAdobeは、Dreamweaver」をテーマに、イマドキのウェブ制作フローを語ります。Adobe XD、Bootstrap、Sass、Gitに着目しました。残席7つ。これ以上の増席は、たぶんないかと思います。
【これまでのウェブとこれからのウェブを語ろう《ウェブ制作のトレンド》】
https://www.sansokan.jp/events/eve_detail.san?H_A_NO=25253
15年ほど続けてきた、大阪iMedioさんでのおそらくラストセミナー。これまでのご愛顧に、感謝の気持ちを込めて、無料で参加いただけます。
企業のウェブ担当の方、これからウェブ制作の業界に来たい方、勉強中の方に向けてお話しします。まだ、媒体で正式告知の前なのですが、30席なのですぐ埋まるかも。
●Bootstrap4、ようやくリリース
さてさて。ここから本題です。Bootstrap4でしたね。
α版からβ版と開発が長引いたようですが、先日（1月18日）に正式リリースされました。
最初の登場が2015年8月でしたので、正式リリースまでに約1年半かかったのですね。β版とはいえ十分に動いていたので、既に導入しているケースも多かったのではと思われます。
バージョン3からの主な変更点は、以下ような感じ。
・IE10以降、Androidブラウザ 5.0以降のサポート（旧ブラウザはサポート外）
https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/
・Flexboxを使ったグリットシステムとコンポーネントの導入
・グリットのサイズ（ブレイクポイント）の変更。576以下のデバイスの対応と「.col-xs-」の廃止、「.col-xl-」の追加
【Bootstrap4のグリッドシステム】
https://getbootstrap.com/docs/4.0/layout/grid/
【Bootstrap3のグリッドシステム】
https://getbootstrap.com/docs/3.3/css/
・リセットCSSをNormalize.cssから、独自のReboot.cssに
https://raw.githubusercontent.com/twbs/bootstrap/v4-dev/dist/css/bootstrap-reboot.css
・基本の単位をpxからemに変更（レスポンシブ対応のためと思われます）
・基本のフォントサイズを大きく（14pxから16pxへ）
・Glyphicons（アイコンフォント）の廃止
・コンポーネントの大幅変更
https://getbootstrap.com/docs/4.0/examples/
ざっくりとBootstrap4のドキュメントを読んで思ったことは、「えっ？ これ、めちゃめちゃ変わってませんか？？」でした。
基本的な考え方は変わらないんですけどね。細かなところや、手法（例えば、グリッドシステムやカスタマイズの方法）が変わってきてる。
せっかく、調べて覚えたのにー！！ と泣きそうになりましたが、でも、肥大化してたコードがシンプルに、使い勝手よくなってそうな印象もあります。
えーい！ とがんばって、バージョンアップにチャレンジすることにしました。
とりあえず基本を比べてみようと、CDNバーションでBootstrap3と4を組み込んだファイルをアップしてみました。
【Bootstrap3】
http://r360studio.com/dgcr/dgcr-Lifeis68/Bootstap3.html
【Bootstrap4】
http://r360studio.com/dgcr/dgcr-Lifeis68/Bootstap4.html
ソースを見るとわかりますが、Bootstrap4では、「popper.min.js」というJSファイルが追加になっています。
これは、プルダウンなど動きをつけるための、既存のJSが組み込まれているようです。Bootstrapが自前でコードを書くより、効率がよいと判断したのかもしれませんね。
【Popper】
https://popper.js.org/
また、既存の文字サイズが大きくなったこと、リセットCSSを見なおしたことなどからみて、文字サイズが大きく、見出しは太くなって、デフォルトのままでも文字が見やすくなっています。
……ということで、今回はここまで。
今回の記事の内容を実際に動かしつつ見てもらうために、Youtubeでライブ配信をすることにしました。
第一回目は、明日の夜（2月7日22:30〜）に下記URLで配信予定です。
【Bootstrap4 を始めよう！With Dreamweaver（1） - YouTube】
チャンネル登録しといていただくと、お知らせが入りますよー。
ではまた、次回お目にかかりましょう！
(^^)
【 森和恵 r360studio ウェブ系インストラクター 】
mail: r360studio@gmail.com
講座受付中： http://r360studio.com/seminar/