1. CSS3で実現する
表現と演出
@mattari_panda

2. 今日はフロントエンド（マークアッ
プエンジニア）の中級者向けという
ことで、概念というより実践的な内
容を話します。
もっといい方法を知ってる人がい
らっしゃれば、あとでぜひ教えて下
さい。

3. 自己紹介
：@mattari_panda
所属：株式会社コロプラ
3月入社
前職はWebの受託制作
PC・スマートフォン
サイト作ってました
書籍：CSS3デザインブック
仕事で絶対に使うプロのテクニック
（ちょこっと）

4. もくじ
✤ WebアプリとWebサイトの違い
✤ CSS3での表現
✤ CSS3での演出

5. WebアプリとWebサイトの
違い

6. 弊社のWebアプリ
秘宝探偵キャリー プロ野球PRIDE

7. 弊社Webアプリの特徴
✤ 俗にいう「ハイブリッド型」
✤ Android2.1~ iOS4.2~対応
✤ iTunes Store Google Playともに
売上上位でございます

8. WebアプリとWebサイトの違い
✤ ブラウザの種類があんまりない
✤ 傾きを気にしないでよい
✤ デザインが「アプリ」のもの
✤ なによりユーザーは違い（ネイティ
ブアプリとの）を意識しない

9. HTML+CSS+JSでどこまで
ネイティブアプリに近い
「表現＆演出」
ができるか

10. CSSへの期待度は高い
✤ HTMLは文書構造。適切なタグを適切
な量マークアップできるか結構重要
✤ JavaScriptはあくまで「ひかえめ」
に。PCほどパワフルに動かない
✤ 「表現＆演出」はCSSでがんばれると
ころまで、がんばろう

11. CSSのポイントは
仕様の理解と
今までにない発想か？

12. CSS3での表現

13. backgroundおさらい
✤ グラデーションはbackground-image
✤ つまり複数配置OK
✤ 色指定もrgba()使えます
✤ background-sizeでサイズ調整
✤ insetも頑張ればなんとか

14. Multipul Backgroundでいろいろ
http://jsdo.it/mattari_panda/zsas

15. 詳しくは昨日のCodeGridで。

16. 擬似要素::afterで「すごろく」を
表現する
http://jsdo.it/mattari_panda/y3nj

17. 擬似要素::afterで「すごろく」を
表現する
/* CSS --*/
li{
z-index:1;
}
li>span::after{
position:absolute;
z-index:-1;
}

18. ポイントは重ね順
「::after」要素は通常、
要素の上にくるので子要素の
擬似要素にし、z-index:-1;を
設定。

19. グラデーションの袋文字
http://jsdo.it/mattari_panda/y3nj

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. 注意点いくつか
Webkit独自実装です、使用は
自己責任で。
落とし穴もあるよ。

22. Web Fontとの併用でiOSにバグ
があり、文字が二重に表示され
ます。
iOSの場合はtext-shadowで。

23. ここまでのまとめ
★ CSS3の可能性はまだまだある
★ 柔軟な発想ができるかどうか
★ 仕様を理解して使う

24. CSS3での演出

25. CSSアニメーション
つかってますか？

26. Animationおさらい
✤ transitionとanimationがある
✤ transitionは単純なアニメ
✤ animationは複雑なアニメ
✤ スマホではとにかく軽量
✤ でも落とし穴いっぱい

27. Keyframe Animationの落とし穴
連続したアニメーション
✤ Androidでの巻き戻り
✤ animation-fill-mode
✤ ディレイさせたい時
http://jsdo.it/mattari_panda/oPCb

28. Androidでの巻き戻り
Androidで最後のコマが
終わった時に、元に戻ってしまう

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. このアナログな手法
結構つかえます。
今のところコレで頑張る

31. まとめ
★ CSS3はこれからだけど、もう始まっ
てる。発想の柔軟さを持とう。
★ アニメーションも使えるけど大変
★ まだいろいろあるけど、、、次回？

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