CSS Nite in Osaka, vol.46 開催レポート
2018年8月7日（火）に、
CSS Nite in Osaka, vol.46「Bootstrap meets XD / Bootstrap 4 ライブコーディング」を開催いたしました！
増席となるほど、大変多くの皆様にご参加いただくことができました。
ご参加くださった皆様ありがとうございました。
さて、早速セミナー当日の様子をレポートしていきます！
今回の会場は、大阪市中央区の本町駅すぐの「中央会計セミナールーム」さん。
開放感溢れる高い天井に、雰囲気ある木目調のテーブルが素敵なセミナールームで皆様も驚きの声。
オープニング
司会進行は、CSS Nite in Osaka実行委員長の松下 絵梨（ツキアカリ）さんです。
今回も、twitterにてハッシュタグ「#cssnite」をつけて、 参加者の皆様にも随時感想やご質問など、気軽にツイートいただきながら進めていきます！
プレゼントタイム！
KDDIウェブコミュニケーションのレンタルサーバーCPIのロゴ入り、ノートと小物入れ。
プレゼント獲得された方おめでとうございます♩
会場の場も温まったところで、メインプログラムのスタートです！
Bootstrap 4 ライブコーディング
世界で最も使われているフロントエンドフレームワークである「Bootstrap 4」と、
ますます盛り上がりを見せてきているUI/UXデザインツールの「Adobe XD」。
今回はそれらの組み合わせということで、
Adobe XDで制作されたデザインから、Bootstrap 4を用いてWebサイトを制作していく過程をライブコーディングしながらご紹介していきます。
阿部さんはWeb制作に関するさまざまなイベントに登壇されています。
さて、予め用意されたXDのデザインデータと、Bootstrap 4のソースコードをインストールしたら、 早速ライブコーディングスタートです！
Bootstrapの構築方法は3通り方法があるそうですが、
今回はコンパイル済みのCSSとJavaScriptをダウンロードしていきます。
（カスタマイズをしたい場合は、ソースファイル版の利用がおすすめ。ご興味ある方は試してみてくださいね。）
さて、こちらが今回元となるXDで作られたデザイン（松下 絵梨さん作成）。
スマホ版とPC版が用意されています。
ということでレスポンシブで作っていきますよ！
デザインされた各要素の配置を確認していきますが、
XDのデザインスペックでは該当の要素を選択すると、位置やサイズ、カラーコードなどコーディングに必要な様々な情報が取得できるので便利ですね。
Bootstrap 4では、レスポンシブではお馴染みのハンバーガーメニューやWebアイコンも使用できるので、
今回デザインに登場しているハンバーガーメニューも、サクッと実装できちゃいます。
また、ハンバーガーメニューはSVG形式でできているので、色や形状の調整も可能。
このように要所要所で工夫していくことで、「いかにもBootstrapで作りました！」のような 見え方を防ぐことができますね。
さて、ライブコーディングも進んできましたが、ここで一旦休憩を挟みます。
集中されていた皆様に、お菓子で糖分補給していただきます♩
お菓子を食べながら、周りの方々と楽しく団欒タイム。
技術知識の習得だけでなく、色々な人と繋がれるというのも勉強会に参加するメリットの一つですね。
さて、後半戦のスタートです！
各要素の中央寄せって、なかなか面倒に感じませんか？
そこで朗報！Bootstrap 4から、Flexboxのユーティリティが追加されました。
これで要素のレイアウトもサクサク捗りますね。
さて、90分のライブコーディングもいよいよ終了です。
Bootstrapを使って、トップページが完成しました！
エンディング
さぁ、最後にもう一度プレゼントタイム！
プレゼントは……こちら！
『世界一わかりやすい Adobe XD UIデザインとプロトタイプ制作の教科書』
（北村 崇さん著）
本日司会の松下 絵梨さんも執筆協力されており、
XDの基礎から実践的なプロトタイプ制作まで、わかりやすく記載されています。
この書籍を手にするのは…!?再度じゃんけんで争奪戦です。
女性の方がプレゼントを勝ち取りました♩ご当選おめでとうございます！
ぜひ、この本でXDをどんどん使ってみてくださいね。
さて、2時間にわたるセミナーもあっという間に終わりの時間です。
皆様お忙しい中ご参加いただき、ありがとうございました。
これをきっかけにXDとBootstrapを皆様の制作業務に活用していってくださいね。
photo by 神田 功一
report by 逢坂 美和子
