Front night vol1

4,651 views
4,633 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,651
On SlideShare
0
From Embeds
0
Number of Embeds
3,397
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Front night vol1

  1. 1. CSS3で実現する 表現と演出 @mattari_panda
  2. 2. 今日はフロントエンド(マークアップエンジニア)の中級者向けということで、概念というより実践的な内容を話します。もっといい方法を知ってる人がいらっしゃれば、あとでぜひ教えて下さい。
  3. 3. 自己紹介  :@mattari_panda所属:株式会社コロプラ    3月入社    前職はWebの受託制作    PC・スマートフォン    サイト作ってました書籍:CSS3デザインブック     仕事で絶対に使うプロのテクニック     (ちょこっと)
  4. 4. もくじ✤ WebアプリとWebサイトの違い✤ CSS3での表現✤ CSS3での演出
  5. 5. WebアプリとWebサイトの 違い
  6. 6. 弊社のWebアプリ 秘宝探偵キャリー プロ野球PRIDE
  7. 7. 弊社Webアプリの特徴✤ 俗にいう「ハイブリッド型」✤ Android2.1~ iOS4.2~対応✤ iTunes Store Google Playともに 売上上位でございます
  8. 8. WebアプリとWebサイトの違い ✤ ブラウザの種類があんまりない ✤ 傾きを気にしないでよい ✤ デザインが「アプリ」のもの ✤ なによりユーザーは違い(ネイティ ブアプリとの)を意識しない
  9. 9. HTML+CSS+JSでどこまで ネイティブアプリに近い 「表現&演出」 ができるか
  10. 10. CSSへの期待度は高い ✤ HTMLは文書構造。適切なタグを適切 な量マークアップできるか結構重要 ✤ JavaScriptはあくまで「ひかえめ」 に。PCほどパワフルに動かない ✤ 「表現&演出」はCSSでがんばれると ころまで、がんばろう
  11. 11. CSSのポイントは 仕様の理解と今までにない発想か?
  12. 12. CSS3での表現
  13. 13. backgroundおさらい ✤ グラデーションはbackground-image ✤ つまり複数配置OK ✤ 色指定もrgba()使えます ✤ background-sizeでサイズ調整 ✤ insetも頑張ればなんとか
  14. 14. Multipul Backgroundでいろいろhttp://jsdo.it/mattari_panda/zsas
  15. 15. 詳しくは昨日のCodeGridで。
  16. 16. 擬似要素::afterで「すごろく」を表現するhttp://jsdo.it/mattari_panda/y3nj
  17. 17. 擬似要素::afterで「すごろく」を表現する/* CSS --*/li{ z-index:1;}li>span::after{ position:absolute; z-index:-1;}
  18. 18. ポイントは重ね順「::after」要素は通常、要素の上にくるので子要素の擬似要素にし、z-index:-1;を設定。
  19. 19. グラデーションの袋文字http://jsdo.it/mattari_panda/y3nj
  20. 20. グラデーションの袋文字/* CSS --*/#hoge>span{ -webkit-background-clip: text; -webkit-text-fill-color:transparent; background-image: linear-gradient(); -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #f5e768;}
  21. 21. 注意点いくつかWebkit独自実装です、使用は自己責任で。落とし穴もあるよ。
  22. 22. Web Fontとの併用でiOSにバグがあり、文字が二重に表示されます。iOSの場合はtext-shadowで。
  23. 23. ここまでのまとめ★ CSS3の可能性はまだまだある★ 柔軟な発想ができるかどうか★ 仕様を理解して使う
  24. 24. CSS3での演出
  25. 25. CSSアニメーションつかってますか?
  26. 26. Animationおさらい ✤ transitionとanimationがある ✤ transitionは単純なアニメ ✤ animationは複雑なアニメ ✤ スマホではとにかく軽量 ✤ でも落とし穴いっぱい
  27. 27. Keyframe Animationの落とし穴連続したアニメーション ✤ Androidでの巻き戻り ✤ animation-fill-mode ✤ ディレイさせたい時 http://jsdo.it/mattari_panda/oPCb
  28. 28. Androidでの巻き戻り Androidで最後のコマが 終わった時に、元に戻ってしまう
  29. 29. animation-fill-mode最初と最後のコマの状態を制御/* CSS --*/#hoge{ animation-fill-mode:none;/*default*/ animation-fill-mode:fowards; animation-fill-mode:backwards; animation-fill-mode:both;}http://dev.w3.org/csswg/css3-animations/#animation-fill-mode-property
  30. 30. このアナログな手法 結構つかえます。今のところコレで頑張る
  31. 31. まとめ★ CSS3はこれからだけど、もう始まっ てる。発想の柔軟さを持とう。★ アニメーションも使えるけど大変★ まだいろいろあるけど、、、次回?
  32. 32. ご清聴ありがとうございました

×