WCAN Winter 2013のライトニングトークで使用したスライドです。

1. CSS3を使って
いろいろ表現しようと試みた！
WEB歴約9ヶ月のド素人が無理矢理
HTMLとCSS3だけで再現してみようと試みてみた。
トライデントコンピュータ専門学校
Webデザイン学科 1年生 高橋雅人

2. プロフィール
トライデントコンピュータ専門学校
Webデザイン学科 1年生
高橋 雅人
（ @b95oss ）
CSSばっかり触っています。
デザインセンスは皆無です。
@b95oss
| http://trident-com.net/~2013w011/blog/

3. IE8のシェア率は下がっています！
IE8は10.09% (2013/12/05現在)
Source : Stat Counter Global Stats
@b95oss
| http://trident-com.net/~2013w011/blog/

4. @b95oss
| http://trident-com.net/~2013w011/blog/

5. @b95oss
| http://trident-com.net/~2013w011/blog/

6. @b95oss
| http://trident-com.net/~2013w011/blog/

7. CSS3で表現できるようになったこと
•
角丸 ( border-radius )
•
影 ( box-shadow , text-shadow )
•
アニメーション ( transition , animation )
•
変形 ( transform )
など！
@b95oss
| http://trident-com.net/~2013w011/blog/

8. @b95oss
| http://trident-com.net/~2013w011/blog/

9. 一般兄弟セレクタ（間接セレクタ）
#要素A:擬似クラス~#要素B
#要素Aが擬似クラスの状態のときに
#要素Bにスタイルを適用する。
@b95oss
| http://trident-com.net/~2013w011/blog/

10. @b95oss
| http://trident-com.net/~2013w011/blog/

11. クリックイベントをCSSだけで！
HTML
<input type=”radio” id=”button”>
<label for =“button”></label>
<div id=“element”></div>
CSS
[type=”radio”]{
display:none;
}
#button:checked~#element{
クリック時に適用させたいスタイル
}
@b95oss
| http://trident-com.net/~2013w011/blog/

12. @b95oss
| http://trident-com.net/~2013w011/blog/

13. borderで三角形を作る
•
CSS
#Element{
border: 25px #f60 solid;
border-color:transparent;
border-top-color:#f60;
}
要素の幅・高さが0。
四方を色付けするとまるで三角
三角形
http://trident-com.net/~2013w011/border/
@b95oss
| http://trident-com.net/~2013w011/blog/

14. カメラアイコンを作ってみました
borderを使い、
台形を作成しました。
@b95oss
| http://trident-com.net/~2013w011/blog/

15. HTML / CSSだけで作ってみました
•
iOS7風
http://idolnfo.com/created/ios7/
@b95oss
| http://trident-com.net/~2013w011/blog/

16. @b95oss
| http://trident-com.net/~2013w011/blog/

17. @b95oss
| http://trident-com.net/~2013w011/blog/

18. @b95oss
| http://trident-com.net/~2013w011/blog/