CSS Nite in OSAKA, Vol.43「Reboot Dreamweaver」フォローアップ(6)チームで使える! ワークフローに効くDreamweaver+Bootstrap

2017年5月13日(土)大阪産業創造館 4Fイベントホールで開催したCSS Nite in OSAKA, Vol.43「Reboot Dreamweaver」のフォローアップとして、松田 直樹さん(まぼろし)の『チームで使える! ワークフローに効くDreamweaver+Bootstrap』セッションのスライドなどを公開します。

メッセージとフォローアップ

Bootstrapセッションを担当しました、株式会社まぼろしの松田です。
ご参加いただきました皆さま、長丁場、大変お疲れ様でした。

Bootstrapを利用してのワイヤフレーム作成の提案、および、DremaweaverのBootstrap機能のデモを行いました。
Bootstrap自体はやはりコードのみの「CSSフレームワーク」ですので、コーダー・エンジニアを本業としてない方には馴染みが薄いかもしれません。
ただ、DreamweaverのBootstrap機能は本当に感覚的操作ができますから、デモでもご紹介したようにコードを書くことなくレスポンシブな複雑レイアウトを素早く実現することができます。ぜひ、ライブビューと挿入パネルから触れてみてください。
現時点では本実装には向かない機能ながらも、ここまで簡単にグリッドレイアウトを行えるのは魅力です。

ディレクター・デザイナーの方はぜひこのワイヤーフレームづくりを試してみてください。コーダー・エンジニアの方は周囲にこの手法を提案してみてください。
ワイヤーフレームの設計時点で「Bootstrapをどう使えばこのレイアウトが実現できるか」が考慮されていることは、デザインや実装への引き渡しをスムースにしてくれることでしょう。

DreamweaverもBootstrapもツールであり、手段です。すべての機能を把握しておく必要はありませんから、触ってみて便利な部分、自分の業務に合う機能だけでも使ってみてはいかがでしょうか。

今回のセッションでデモを行ったファイル一式、また、実際にワイヤーフレームとして作ったHTMLも用意いたしましたの参考にしてみてください。

以上、ありがとうございました!

セッション内で紹介したリンク

アンケート等でいただいた質問への回答

Bootstrapの「jumbotron」などのclassがどのようなクラスなのか、など説明している資料はありますか?

Bootstrapのコンポーネントを調べるには、やはり公式ドキュメントを読むことが一番です。英語サイトではありますが、サンプルコードを追っていくだけでも十分理解できるかと思います。

http://getbootstrap.com/css/

DWでは、Bootstrap Sassは使えないのでしょうか?

Sassセッションでもお伝えしましたが、自前でファイルを設置すれば問題なく使用できますし、Sass版を取り入れてもライブビューでのBootstrapの機能はそのまま使用できます。BootstrapのSassファイルを自前で設置する方法は以下サイトにて詳しく解説されていますので参考にしてみてください。

https://blogs.adobe.com/creativestation/web-dreamweaver-workflow-sass-and-liveview

2016年に開催されたCSS Nite関連の38イベントからベスト・セッションを選出しました。

毎年年末に開催している「Shift」シリーズの第11弾として、2017年のWeb制作シーンを振り返ります。現在、Facebookにて参加表明を受付中