Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
今こそCSS,今こそfor you 
2014/11/24
自己紹介 
名前:小菅達矢(@keinkosuge) 
社会的身分:keinousという屋号で活動 
デジタルハリウッドSTUDIO渋谷・新宿トレーナー 
今年5月~7月、本日登壇された山崎先生に師事し、 
jsなどフロントエンド(+しゃべり)...
・HTML5正式勧告 
・ブラウザの実装がどんどん進む 
・無視できないどころか、「より重要視される」スマートフォンか 
らのWEB(アプリ)利用 
CSS3(そしてやがてはCSS4?)の利用機会 
はより加速するであろう!!
CSSの可能性を追求するため、 
こんなものを作ってみた。
「CSS PK」
このゲームでよく出るCSS3セレクタ 
① 
■間接セレクタ( ~ ) 
親要素が同じで、兄弟関係の弟にあたるセレクタを指定。 
例) 
<div id=”parent”> 
<p>ラーメン</p> 
<p>たぬき</p> 
<p>アボガド</...
このゲームでよく出るCSS3セレクタ 
② 
■animation 
#parent { 
animation:hoge 5s ease-in-out; 
} 
① ② ③ 
①animationの種類・内容(別途keyframesで定義) 
...
ゲームでよく使うタグ・セレクタ 
■inputタグ(radio、checkbox) 
■:before、:afterの疑似要素 
苦手な内容の克服や、ニッチで細かい内容を会得するのに 
ゲーム作りで覚えるはすごい有効!
この半年で変われた唯一のポイント 
「自分が何者か?」 
「自分が何をしているか?」 
を形で人に伝えられるようになったこと。
ご清聴ありがとうございました。
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
How to make something go viral?
Next
Download to read offline and view in fullscreen.

3

Share

Download to read offline

今こそCSS 今こそfor you

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

今こそCSS 今こそfor you

  1. 1. 今こそCSS,今こそfor you 2014/11/24
  2. 2. 自己紹介 名前:小菅達矢(@keinkosuge) 社会的身分:keinousという屋号で活動 デジタルハリウッドSTUDIO渋谷・新宿トレーナー 今年5月~7月、本日登壇された山崎先生に師事し、 jsなどフロントエンド(+しゃべり)の基礎を会得。 過去2回セミナー登壇機会有。 いずれもしゃべりすぎて、時間オーバー
  3. 3. ・HTML5正式勧告 ・ブラウザの実装がどんどん進む ・無視できないどころか、「より重要視される」スマートフォンか らのWEB(アプリ)利用 CSS3(そしてやがてはCSS4?)の利用機会 はより加速するであろう!!
  4. 4. CSSの可能性を追求するため、 こんなものを作ってみた。
  5. 5. 「CSS PK」
  6. 6. このゲームでよく出るCSS3セレクタ ① ■間接セレクタ( ~ ) 親要素が同じで、兄弟関係の弟にあたるセレクタを指定。 例) <div id=”parent”> <p>ラーメン</p> <p>たぬき</p> <p>アボガド</p> </div> p ~ p { color:#f00; } 結果) 「たぬき」と「アボガド」だけ 文字色が赤くなる。
  7. 7. このゲームでよく出るCSS3セレクタ ② ■animation #parent { animation:hoge 5s ease-in-out; } ① ② ③ ①animationの種類・内容(別途keyframesで定義) ②animationする時間 ③animationの進み具合 ※jquery animateと記載する順番は一緒!
  8. 8. ゲームでよく使うタグ・セレクタ ■inputタグ(radio、checkbox) ■:before、:afterの疑似要素 苦手な内容の克服や、ニッチで細かい内容を会得するのに ゲーム作りで覚えるはすごい有効!
  9. 9. この半年で変われた唯一のポイント 「自分が何者か?」 「自分が何をしているか?」 を形で人に伝えられるようになったこと。
  10. 10. ご清聴ありがとうございました。
  • RyoutaMasuko

    Nov. 28, 2014
  • takahirouemura142

    Nov. 27, 2014
  • kentaomorimfg

    Nov. 27, 2014

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

Views

Total views

1,109

On Slideshare

0

From embeds

0

Number of embeds

243

Actions

Downloads

3

Shares

0

Comments

0

Likes

3

×