このページは、外部サイト
CSS Nite公式サイト の情報をRSSフィード経由で取得して表示しているため、記事の一部分しか表示されていなかったり、画像などが正しく表示されなかったり、オリジナル記事が意図したデザインと異なっていたりする場合があります。
完全な状態のオリジナル記事は 「
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
Facebookいいね!の多い記事
Twitterで言及の多い記事
はてなブックマーク人気記事
