今こそCSS,今こそfor you

2014/11/24

自己紹介

名前：小菅達矢（@keinkosuge）社会的身分：keinousという屋号で活動デジタルハリウッドSTUDIO渋谷・新宿トレーナー

今年5月~7月、本日登壇された山崎先生に師事し、jsなどフロントエンド（＋しゃべり）の基礎を会得。

過去２回セミナー登壇機会有。いずれもしゃべりすぎて、時間オーバー

・HTML5正式勧告

・ブラウザの実装がどんどん進む

・無視できないどころか、「より重要視される」スマートフォンか

らのWEB（アプリ）利用

CSS3（そしてやがてはCSS４?）の利用機会はより加速するであろう!!

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

「CSS PK」

このゲームでよく出るCSS3セレクタ①

■間接セレクタ（ ~ ）親要素が同じで、兄弟関係の弟にあたるセレクタを指定。

例）<div id=”parent”>

<p>ラーメン</p>

<p>たぬき</p>

<p>アボガド</p>

</div>

p ~ p {

color:#f00;

}

結果）「たぬき」と「アボガド」だけ文字色が赤くなる。

このゲームでよく出るCSS3セレクタ②

■animation

#parent {

animation:hoge 5s ease-in-out;

}

①animationの種類・内容（別途keyframesで定義）②animationする時間③animationの進み具合※jquery animateと記載する順番は一緒！

② ③①

ゲームでよく使うタグ・セレクタ

■inputタグ（radio、checkbox）

■:before、:afterの疑似要素

苦手な内容の克服や、ニッチで細かい内容を会得するのにゲーム作りで覚えるはすごい有効！

この半年で変われた唯一のポイント

「自分が何者か？」「自分が何をしているか？」

を形で人に伝えられるようになったこと。

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