「現場のプロが教えるWEBデザイン 新・スタンダードテクニック」発売記念イベント 登壇スライド http://peatix.com/event/114573

1. 「現場のプロが教える
WEBデザイン 新・スタ
ンダードテクニック37」
に載っているテクニック
でLP作ってみた話
倉持友喜

2. 自己紹介

3. 普段はWeb制作会社に勤務しています。
フロントエンド、WordPressが多め。
@mochi_Flappe

4. ペットはヤマトヌマエビ

5. ラズパイで動画配信したり水槽ハックしてます。

6. エビBlog始めました
「えびしゅうまい」
http://mochiflappe.hatenablog.com/

7. 今日のはなし
• ターゲットはビギナーのコーダーさん
• 本のテクニックを利用した簡単なLP
• CSSアニメーションの話
• GoogleMapの話

8. http://git.io/vCuNd
chromeで御覧ください

9. デモ

10. CSSアニメーションって
意外と書くのが大変

11. バウンドする要素

12. 要素をバウンドさせる
keyframesアニメーションの例

13. keyframes部分

14. keyframes部分（拡大）

15. ショートハンドもあるけど
なかなかつらい

16. ちょっとした動きなら
ライブラリを使ってみよう

18. CSSを読み込んで
classを当てるだけなので簡単

19. infiniteを付ければ
アニメーションがループしてくれる

20. hoverしたときだけ
アニメーションさせたい

21. animate.css
Sass版のMixinを使う

22. https://github.com/geoffgraham/animate.scss
Github検索すると沢山出てくるが
上記リポジトリが活発だった

23. $ bower install animate.css-scss
or
Zipで落としてきてディレクトリに入れる

24. ルートにあるanimate.scssをimport
アニメーションmixinとして利用できる

25. mixinに引数を渡せるので
ある程度の調整が可能

26. やったね！簡単にできたよ

27. 大きめなGoogleMapを置くと
スクロールが引っかかってしまう問題

28. Google Maps JavaScript API v3
にはマウススクロールを無効にできる
オプションが有る

29. Mapの細かなスタイルを
手軽にカスタマイズできるサービス
https://snazzymaps.com/Styled Map Wizard

30. まとめ
• 「すぐにできるんでしょ？」って言われが
ちなテクニックがたくさん本に乗ってます
• 定番のテクニックはなるべくサクサク実装
して時間を有効に使おう！

31. ご清聴ありがとうございました。