LIFE is 日々一歩(68)[ウェブ]Bootstrap4を始めよう!(1)/森 和恵

投稿:  著者:  読了時間:5分(本文:約2,300文字)



こんにちは! 森和恵です。

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/