#maxjapan の担当セッションスライドです。 今日は、ご参加ありがとうございます！ 帰阪したら、また差し替える予定ですが、取り急ぎシェアします。連絡は、Twitter @r360studio にて。

1. PSDカンプからBootstrapページを
世界最速コーディング
森和恵
Dreamweaver最新ワークフロー！

3. https://www.youtube.com/r360studio

4. 今日のねらいは、
・Bootstrapありきで制作するワークフロー
・PSDカンプをコーディングに活用
……の２点です。

5. 本日の内容
1. bootstrapとは？
2. Dreamweaverで、今回紹介する機能
3. 今回のワークフロー
4. ラフPSDから、Bootstrapのみで素組みする
5. デザインPSDから、Extractで素材を抜き出し追加する

6. 1. bootstrapとは？ Slide

7. • Bootstrapとは、CSSフレームワーク
「HTML＋CSS ＋ Javascript」で構成。HTMLページの土台
• 公式サイトは、 https://getbootstrap.com/
• バージョンは、 v3.3.7 （beta v4.x）
• MIT Licence で、商用利用もOK
• Dreamweaver CC 2015.1 より対応

8. このセッションでは、
Bootstrapのお作法やルールには
深くツッコミません。
↓「とほほのBootstrap」基礎を学ぶのにオススメ
http://www.tohoho-web.com/ex/bootstrap.html

9. Bootstrapのグリッドレイアウト

10. Bootstrapは、レスポンシブ対応

11. Bootstrap のブレイクポイント

12. Bootstrapは、レスポンシブ対応
レイアウトを
しなければ
１カラムのまま
レイアウトを
作ればそのサイズ
以上は継続
レイアウトを
作ればそのサイズ
以上は継続

13. Bootstrapのグリッドシステム

14. 今回使うBootstrapのパーツ

15. Bootstrapのカラム

16. BootstrapのJumbotron

17. BootstrapのNavbar

18. Bootstrapのデザインをオリジナルに

19. CSSを追加して、上書き
• CSSファイルは、わける（ css/bootstrap.cssは変更しない ）
• 元をまるっと変更する場合は、同じセレクタで上書き
• 一部分を調整する場合は、新たにクラスを作る

21. 2. Dreamweaverで、紹介する機能
Slide

22. 新規ドキュメントのBootstrap

23. コメントを除去するクリーンアップ

24. 挿入パネルのBootstrapコンポーネント

25. DOMパネルとエレメントディスプレイ

26. ビジュアルメディアクエリーバー

27. Extractパネル
CCクラウドサーバーへ
PSDをアップロード
( 共有フォルダ指定もOK )
フォント・カラー
グラデーション
CSSコード・画像
をPSDから取り出せる

28. Typekitフォント

29. IllustratorからのコピペでSVG

30. 3. 今回のワークフロー Slide

31. ・Bootstrapありきで制作する量産型ワークフロー
・PSDカンプをコーディングに活用

32. 今回の制作フロー

33. 4. デザインPSDから、
Bootstrapのみで素組みする Demo

34. 必要なコンポーネントを挿入

35. ラフPSDにあわせて、CSSを追加

36. 5. ラフPSDから、
Extractで素材を抜き出し追加する
Demo

37. デザインPSDにあわせて、CSSや素材を追加

38. まとめ

39. 1. bootstrapとは？
HTML・CSS・Javascript で構成されたCSSフレームワーク
2. Dreamweaverで、今回紹介した機能
新規ドキュメント ／ 挿入パネル／ DOMパネル
ビジュアルメディアクエリーバー／ Extractパネル
3. 今回のワークフロー
Bootstrapありきで進める、量産型フロー
4. ラフPSDから《Bootstrapのみで素組み》する
5. デザインPSDから《 Extractで素材を抜き出し追加》する

40. 「使える！と感じたところ、ありましたか？」

41. 森和恵