11/24のHTML5minutesでLTしたときに使用したスライドです。

1. 今こそCSS,今こそfor you
2014/11/24

2. 自己紹介
名前：小菅達矢（@keinkosuge）
社会的身分：keinousという屋号で活動
デジタルハリウッドSTUDIO渋谷・新宿トレーナー
今年5月~7月、本日登壇された山崎先生に師事し、
jsなどフロントエンド（＋しゃべり）の基礎を会得。
過去２回セミナー登壇機会有。
いずれもしゃべりすぎて、時間オーバー

3. ・HTML5正式勧告
・ブラウザの実装がどんどん進む
・無視できないどころか、「より重要視される」スマートフォンか
らのWEB（アプリ）利用
CSS3（そしてやがてはCSS４?）の利用機会
はより加速するであろう!!

4. CSSの可能性を追求するため、
こんなものを作ってみた。

5. 「CSS PK」

6. このゲームでよく出るCSS3セレクタ
①
■間接セレクタ（ ~ ）
親要素が同じで、兄弟関係の弟にあたるセレクタを指定。
例）
<div id=”parent”>
<p>ラーメン</p>
<p>たぬき</p>
<p>アボガド</p>
</div>
p ~ p {
color:#f00;
}
結果）
「たぬき」と「アボガド」だけ
文字色が赤くなる。

7. このゲームでよく出るCSS3セレクタ
②
■animation
#parent {
animation:hoge 5s ease-in-out;
}
① ② ③
①animationの種類・内容（別途keyframesで定義）
②animationする時間
③animationの進み具合
※jquery animateと記載する順番は一緒！

8. ゲームでよく使うタグ・セレクタ
■inputタグ（radio、checkbox）
■:before、:afterの疑似要素
苦手な内容の克服や、ニッチで細かい内容を会得するのに
ゲーム作りで覚えるはすごい有効！

9. この半年で変われた唯一のポイント
「自分が何者か？」
「自分が何をしているか？」
を形で人に伝えられるようになったこと。

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