こんにちは！ 森和恵です。新年度に入りましたね。
バタバタと年度をまたいだので、なんだか実感がありません（汗）
今回は、69回に引き続いて「Bootstrap4」。グリッドレイアウトを紹介します。
https://bn.dgcr.com/archives/20180220110100.html
まずは近況から。セミナーで東京遠征してきました。
昨年の「Adobe MAX Japan 2017」で、Dreamweaverセッションを担当した方々と登壇しました。
当日にツイートしたのが↓こちらです。
https://togetter.com/li/1212916
いまテーマにしている、「Bootstrap4＋CCライブラリ＋XD＋Dreamweaver」をお話してきました。
静的ページの構築を、複数人（クライアント側のメンテナンスも含めた）で担当するケースでは、この方法で構築するのがデータ管理上ベストだと思っています。
もう少し深掘りして、今年はこのテーマを色々なところで話したいと思います。
●DreamweaverのBootstrap4対応
Dreamweaverは、3月12日にBootstarp4に対応しました。Bootstrapのリリースが1月18日で、2か月後にDreamweaverがそれに対応したのです。
昔のパッケージ販売の時代では、こう速くは進みませんね。アップデートが即時反映される、クラウドソフトならではだと実感できます。
東京遠征の直前で、Bootstrap4対応のスライドに変更するための時間があるのか？ と正直焦りましたけれども（無事にスライドを書き換えて、Bootstrap4で話ができました！）。
Dreamweaverへの機能追加履歴は、“新機能”ページで確認ができます。自分が使っているバージョンから、新しいバージョンになったときの差異の確認ができて便利です。
https://www.adobe.com/jp/products/dreamweaver/features.html
DreamweaverのBootstrap4対応で、知っておくべきポイントは3つです。
・Ver3とVer4をサイト単位で切り替えて使えます
・既存サイトは、サイト内のBootstrap関連ファイルを自動で判別します
・新規サイトのデフォルトはVer4ですが、［サイト設定］→［Bootstrap］→
［Bootstrapバージョン］でVer3へ切替できます。
サイトをVer4対応にして、Bootstrapの新規ファイルを作成すると、Ver4対応のHTMLコードが生成されます。
また、動作に必要ファイル“JS”・“CSS”フォルダもVer4対応になります。
※Ver4 から、Glyphiconsがなくなったので、“fonts”フォルダはありません。
●Bootstrap4 レイアウト
Ver4になって、わりと大きな変化があったのがレイアウトです。公式サイトのマニュアルで、大事なポイントを確認しましょう。
まずは、レイアウトの外枠に使われる“Container（コンテナ）”の話から。
https://getbootstrap.com/docs/4.0/layout/overview/
Bootstrapには、二種類の“Container”があります。
<div class="container-fluid">
</div>
container-fluidクラスは、画面幅全体に広がる外枠（width:100%）です。
<div class="container">
</div>
containerクラスは、ブレイクポイント毎に決められたサイズの固定幅な外枠です。
ブレイクポイントは、グリッドレイアウトと共に説明されています。
https://getbootstrap.com/docs/4.0/layout/grid/
Bootstrapでは、5つのブレイクポイントが準備されています。
ブレイクポイント毎の添え字（なし/xs/md/lg/xl）を用いたクラスを、カラムの<div>につけることで、画面幅に応じてレイアウトを切り替えるレスポンシブ対応を実現しています。
Ver4 と Ver3 のブレイクポイントの比較図はこちらです。
変わった部分をまとめると……
・画面が小さいスマホを「添え字なし(576px以下)／sm（576以上）」の二つにわけた
・添え字 xs の廃止
・添え字なし(576px以下)の追加
・添え字 xl（一番大きい画面 1200px以上）の追加
・添え字xsは、smに変更
・添え字smは、mdに変更
・添え字mdは、lgに変更
・添え字lgは、xlに変更
とまぁ、わりと厄介な変更です。
よかったのは、スマホの縦・横のレイアウト切替ができるようになったこと。注意したいのは、添え字がひとつづつ大きなランクに変更したこと。
Ver3で作ったファイルをそのまま移行すると、ブレイクポイントが大きくなるので、レイアウトの再調整が必要になると思われます。
container-fluidクラスも、ブレイクポイント毎に変化します。この表の“Max container width”で確認しておきましょう。
container-fluidクラスの変更で、注意しておきたいのが、sm（スマホ横・576px〜767以下）の時に「540px」の固定幅になることです。以前は、固定なしの全幅でした。
「col-sm-」を指定したカラムでは、最大幅767pxの画面でも「540px」の幅が最大になってしまい、かなり余白が空くことになります。
スマホの縦・横のレイアウトをわける必要がなければ、smは使わずにレイアウトした方がよいかもしれませんね。
ということで、今回はここまで。
この内容をじっくりと聞きたいなという方は、明後日4月4日22時30分より、Youtubeライブ配信を行いますので、ぜひ。
【Bootstrap4 を始めよう！With Dreamweaver（3） - YouTube】
ではまた、次回お目にかかりましょう！
(^^)
【森和恵 r360studio ウェブ系インストラクター】
mail: r360studio@gmail.com
講座受付中： http://r360studio.com/seminar/
《告知》技術書典4、出ます。
Adobeソフトのマニアックなトコを集めた「Dreamweaver × Bootstrapで構築するウェブサイト」｢XD×Photoshop & Illustratorでサイトデザイン」新刊予定です。
【技術書典4 | r360study】
https://techbookfest.org/event/tbf04/circle/12980005