Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
PSDカンプからBootstrapページを
世界最速コーディング
森和恵
Dreamweaver最新ワークフロー!
https://www.youtube.com/r360studio
今日のねらいは、
・Bootstrapありきで制作するワークフロー
・PSDカンプをコーディングに活用
……の2点です。
本日の内容
1. bootstrapとは?
2. Dreamweaverで、今回紹介する機能
3. 今回のワークフロー
4. ラフPSDから、Bootstrapのみで素組みする
5. デザインPSDから、Extractで素材を抜き出し追加する
1. bootstrapとは? Slide
• Bootstrapとは、CSSフレームワーク
「HTML+CSS + Javascript」で構成。HTMLページの土台
• 公式サイトは、 https://getbootstrap.com/
• バージョンは、 v3.3.7 (beta ...
このセッションでは、
Bootstrapのお作法やルールには
深くツッコミません。
↓「とほほのBootstrap」基礎を学ぶのにオススメ
http://www.tohoho-web.com/ex/bootstrap.html
Bootstrapのグリッドレイアウト
Bootstrapは、レスポンシブ対応
Bootstrap のブレイクポイント
Bootstrapは、レスポンシブ対応
レイアウトを
しなければ
1カラムのまま
レイアウトを
作ればそのサイズ
以上は継続
レイアウトを
作ればそのサイズ
以上は継続
Bootstrapのグリッドシステム
今回使うBootstrapのパーツ
Bootstrapのカラム
BootstrapのJumbotron
BootstrapのNavbar
Bootstrapのデザインをオリジナルに
CSSを追加して、上書き
• CSSファイルは、わける( css/bootstrap.cssは変更しない )
• 元をまるっと変更する場合は、同じセレクタで上書き
• 一部分を調整する場合は、新たにクラスを作る
2. Dreamweaverで、紹介する機能
Slide
新規ドキュメントのBootstrap
コメントを除去するクリーンアップ
挿入パネルのBootstrapコンポーネント
DOMパネルとエレメントディスプレイ
ビジュアルメディアクエリーバー
Extractパネル
CCクラウドサーバーへ
PSDをアップロード
( 共有フォルダ指定もOK )
フォント・カラー
グラデーション
CSSコード・画像
をPSDから取り出せる
Typekitフォント
IllustratorからのコピペでSVG
3. 今回のワークフロー Slide
・Bootstrapありきで制作する量産型ワークフロー
・PSDカンプをコーディングに活用
今回の制作フロー
4. デザインPSDから、
Bootstrapのみで素組みする Demo
必要なコンポーネントを挿入
ラフPSDにあわせて、CSSを追加
5. ラフPSDから、
Extractで素材を抜き出し追加する
Demo
デザインPSDにあわせて、CSSや素材を追加
まとめ
1. bootstrapとは?
HTML・CSS・Javascript で構成されたCSSフレームワーク
2. Dreamweaverで、今回紹介した機能
新規ドキュメント / 挿入パネル/ DOMパネル
ビジュアルメディアクエリーバー/ Ex...
「使える!と感じたところ、ありましたか?」
森和恵
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
Upcoming SlideShare
Loading in …5
×

of

Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 1 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 2 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 3 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 4 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 5 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 6 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 7 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 8 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 9 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 10 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 11 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 12 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 13 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 14 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 15 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 16 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 17 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 18 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 19 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 20 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 21 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 22 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 23 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 24 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 25 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 26 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 27 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 28 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 29 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 30 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 31 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 32 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 33 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 34 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 35 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 36 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 37 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 38 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 39 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 40 Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング Slide 41
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

1 Like

Share

Download to read offline

Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング

  1. 1. PSDカンプからBootstrapページを 世界最速コーディング 森和恵 Dreamweaver最新ワークフロー!
  2. 2. https://www.youtube.com/r360studio
  3. 3. 今日のねらいは、 ・Bootstrapありきで制作するワークフロー ・PSDカンプをコーディングに活用 ……の2点です。
  4. 4. 本日の内容 1. bootstrapとは? 2. Dreamweaverで、今回紹介する機能 3. 今回のワークフロー 4. ラフPSDから、Bootstrapのみで素組みする 5. デザインPSDから、Extractで素材を抜き出し追加する
  5. 5. 1. bootstrapとは? Slide
  6. 6. • Bootstrapとは、CSSフレームワーク 「HTML+CSS + Javascript」で構成。HTMLページの土台 • 公式サイトは、 https://getbootstrap.com/ • バージョンは、 v3.3.7 (beta v4.x) • MIT Licence で、商用利用もOK • Dreamweaver CC 2015.1 より対応
  7. 7. このセッションでは、 Bootstrapのお作法やルールには 深くツッコミません。 ↓「とほほのBootstrap」基礎を学ぶのにオススメ http://www.tohoho-web.com/ex/bootstrap.html
  8. 8. Bootstrapのグリッドレイアウト
  9. 9. Bootstrapは、レスポンシブ対応
  10. 10. Bootstrap のブレイクポイント
  11. 11. Bootstrapは、レスポンシブ対応 レイアウトを しなければ 1カラムのまま レイアウトを 作ればそのサイズ 以上は継続 レイアウトを 作ればそのサイズ 以上は継続
  12. 12. Bootstrapのグリッドシステム
  13. 13. 今回使うBootstrapのパーツ
  14. 14. Bootstrapのカラム
  15. 15. BootstrapのJumbotron
  16. 16. BootstrapのNavbar
  17. 17. Bootstrapのデザインをオリジナルに
  18. 18. CSSを追加して、上書き • CSSファイルは、わける( css/bootstrap.cssは変更しない ) • 元をまるっと変更する場合は、同じセレクタで上書き • 一部分を調整する場合は、新たにクラスを作る
  19. 19. 2. Dreamweaverで、紹介する機能 Slide
  20. 20. 新規ドキュメントのBootstrap
  21. 21. コメントを除去するクリーンアップ
  22. 22. 挿入パネルのBootstrapコンポーネント
  23. 23. DOMパネルとエレメントディスプレイ
  24. 24. ビジュアルメディアクエリーバー
  25. 25. Extractパネル CCクラウドサーバーへ PSDをアップロード ( 共有フォルダ指定もOK ) フォント・カラー グラデーション CSSコード・画像 をPSDから取り出せる
  26. 26. Typekitフォント
  27. 27. IllustratorからのコピペでSVG
  28. 28. 3. 今回のワークフロー Slide
  29. 29. ・Bootstrapありきで制作する量産型ワークフロー ・PSDカンプをコーディングに活用
  30. 30. 今回の制作フロー
  31. 31. 4. デザインPSDから、 Bootstrapのみで素組みする Demo
  32. 32. 必要なコンポーネントを挿入
  33. 33. ラフPSDにあわせて、CSSを追加
  34. 34. 5. ラフPSDから、 Extractで素材を抜き出し追加する Demo
  35. 35. デザインPSDにあわせて、CSSや素材を追加
  36. 36. まとめ
  37. 37. 1. bootstrapとは? HTML・CSS・Javascript で構成されたCSSフレームワーク 2. Dreamweaverで、今回紹介した機能 新規ドキュメント / 挿入パネル/ DOMパネル ビジュアルメディアクエリーバー/ Extractパネル 3. 今回のワークフロー Bootstrapありきで進める、量産型フロー 4. ラフPSDから《Bootstrapのみで素組み》する 5. デザインPSDから《 Extractで素材を抜き出し追加》する
  38. 38. 「使える!と感じたところ、ありましたか?」
  39. 39. 森和恵
  • komachi

    Dec. 14, 2017

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

Views

Total views

2,287

On Slideshare

0

From embeds

0

Number of embeds

958

Actions

Downloads

18

Shares

0

Comments

0

Likes

1

×