Download to read offline
Uploaded byTakao Sumitomo
1,326 views
今更ながらCSS3を試してみた
関西Firefox OS勉強会 4th GIGの発表資料です。サンプルコード http://goo.gl/6Pt5FSZIP版 http://goo.gl/LtmYBT
Recommended
More Related Content
What's hot
Similar to 今更ながらCSS3を試してみた
More from Takao Sumitomo
今更ながらCSS3を試してみた
- 1.
- 2.自己紹介● 住友 孝郎(すみともたかお)● 株式会社ブリリアントサービス所属● 業務系Webアプリ開発● Androidアプリケーション開発● 研究開発とか– ロボット的な何か– 画像認識的な何か– Tizen IVI的な何か住友 孝郎@cattaka_net
- 3.
- 4.トピック● CSS3とWeb標準● CSSの基本●HTMLとCSSの関係● CSSの表記法● CSS3の新要素
- 5.
- 6.
- 7.
- 8.CSSとは● Cascading StyleSheetsの略● W3Cで標準化されている● HTMLにスタイル(見栄え)を追加する● 仕様全ての完全な実装は事実上無い
- 9.HTMLとCSSの関係● HTMLで文章の論理構造を記述する● CSSでスタイルを記述する●２つを繋ぐのはセレクタ● タグ● ID● クラス● 階層構造
- 10.CSSの表記法● セレクタ● 宣言ブロック●宣言– プロパティ– 値p#id {color : #ff3300;width : 30%;height : 20%;}
- 11.セレクタの例● タグ– セレクタにタグ名をそのまま書くbutton{ ... }● ID– セレクタに”#”＋IDを書く#myButton { ... }● クラス– セレクタに”.”＋クラス名を書く.buttonClass { ... }● 階層構造– セレクタをスペースで区切ると子孫要素が対象となる#myButton .buttonClass { ... }– “>”で区切ると子要素が対象となる#myButton > .buttonClass { ... }
- 12.#myGroup1 > .itemClass{ color: #FF0000; }#myGroup2 > .itemClass { color: #0000FF; }HTMLとCSSの関係<div id=”myGroup1” class=”groupClass”><div id=”myItem1” class=”itemClass”>あいうえお</div></div><div id=”myGroup2” class=”groupClass”><div id=”myItem2” class=”itemClass”>かきくけこ</div></div>あいうえおあいうえおHTMLCSS
- 13.
- 14.CSS3の新要素● Layout :box● FlexBox● MediaQueries● Regions● Transform● Animations サンプルコードhttp://goo.gl/6Pt5FSZIP版http://goo.gl/LtmYBT※ブラウザによって対応状況がことなるのでいくつかのブラウザで試してください
- 15.Layout : box●ブロック要素に並べて詰め込むことができる● 順番の入れ替えが可能● 空き領域に合わせて引き伸ばすことができる● 何が嬉しいか？● 従来は同じ事をするのにJavaScriptをゴリゴリ書かなければならなかった● これならCSSのみで対応できる
- 16.Layout : box<divid="divBox"><div class="item-block first">1st</div><div class="item-block second">2nd</div><div class="item-block third">3rd</div></div>#divBox {display: box;box-sizing: border-box;box-pack: center;box-orient: horizontal;border: 1px solid #ff00ff;}#divBox .item-block {border: 1px solid #ff007f;margin: 1em;}CSSHTMLサンプルコードhttp://goo.gl/6Pt5FS ※ブラウザによって対応状況がことなるのでいくつかのブラウザで試してください
- 17.Layout : box<h2>Liquid</h2><divid="divLiquid"><div class="item-block first">1st</div><div class="item-block second">2nd</div><div class="item-block third">3rd</div></div>#divLiquid {display: box;box-pack: center;border: 1px solid #ff00ff;}#divLiquid .item-block {border: 1px solid #ff007f;margin: 1em;}#divLiquid .first {box-ordinal-group: 3;box-flex: 0.0;}#divLiquid .second {box-ordinal-group: 2;box-flex: 1.0;}#divLiquid .third {box-ordinal-group: 1;box-flex: 2.0;}CSSHTMLサンプルコードhttp://goo.gl/6Pt5FS ※ブラウザによって対応状況がことなるのでいくつかのブラウザで試してください
- 18.FlexBox● 様々な画面サイズにフレキシブルに配置される● 画面がコンテンツよりも大きい時は伸びたり、小さい場合は改行または縮ませることができる●何が嬉しいか？● 従来はパーセント指定で行うしか無く、そのためにJavaScriptでゴリゴリするしかなかった● これならCSSのみで対応できる
- 19.FlexBox<div class="divFlexBox"><div class="item-block">1st</div><divclass="item-block">2nd</div><div class="item-block">3rd</div><div class="item-block">4th</div><div class="item-block">5th</div><div class="item-block">6th</div><div class="item-block">7th</div><div class="item-block">8th</div><div class="item-block">9th</div><div class="item-block">10th</div><div class="item-block">11th</div><div class="item-block">12th</div><div class="item-block">13th</div><div class="item-block">14th</div><div class="item-block">15th</div><div class="item-block">16th</div><div class="item-block">17th</div></div>div.divFlexBox {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-around;align-items: flex-start;align-content: flex-start;border: 1px solid #ff00ff;}div.divFlexBox .item-block {display: inline-block;width: 5em;border: 1px solid #ff007f;flex-flow: column wrap;flex-grow: 1;}CSSHTMLサンプルコードhttp://goo.gl/6Pt5FS ※ブラウザによって対応状況がことなるのでいくつかのブラウザで試してください
- 20.FlexBox● 他にできること● 要素の順番の入れ替え–order 属性で指定する– HTMLの変更が不要● 収まらない場合の改行の指定– 応用するとレイアウトの切り替えもできるhttps://developer.mozilla.org/ja/docs/Web/Guide/CSS/Flexible_boxes より
- 21.MediaQueries● メディア特性の式により、使用されるCSSを切り替えることができる● 何が嬉しいか●従来はonLoad()内でJavaScriptで画面の幅からゴリゴリやる必要があった
- 22.MediaQueries<div id="divFlexBox"><div id="item-1st"class="item-block">1st</div><div id="item-2nd" class="item-block">2nd</div><div id="item-3rd" class="item-block">3rd</div><div id="item-4th" class="item-block">4th</div><div id="item-5th" class="item-block">5th</div></div>/* 画面が広いとき */@media (min-width: 400px) {#item-1st {width: 100%;}#item-2nd { }#item-3rd {width: 50%;flex-grow: 1;}#item-4th { }#item-5th {width: 100%;}}/* 画面が狭い時 */@media (max-width: 400px) {div#divFlexBox .item-block {width: 100%;}}CSSHTMLサンプルコードhttp://goo.gl/6Pt5FS ※ブラウザによって対応状況がことなるのでいくつかのブラウザで試してください
- 23.Regions● 一続きの文章を複数の領域に分割して表示できる● 領域の形を自由に指定できる●何が嬉しいか？● 今までは文字列の分割をJavaScriptで行わなければならなかった。それは激しく泥臭かった。1234
- 24.Regions<div id="source"><p>Androidの1.6、2.0、3.0、4.0は目に見えた変更が多く、発表の度にワクワク（または大きな仕様変更に唖然と）したものだが、4.0以降はそれが薄くなった気がする。しかし同時期を境にiOSからその雰囲気を感じるようになったので今こそiPhoneを買うべきなのかもしれない。</p></div><div class="divFlexBox"><divclass="item-region">1st</div><div class="item-region">2nd</div></div><div class="divFlexBox"><div class="item-region">3rd</div></div>#source {-webkit-flow-into: main-thread;-moz-flow-into: main-thread;flow-into: main-thread;}div.divFlexBox .item-region {-webkit-flow-from: main-thread;-moz-flow-from: main-thread;flow-from: main-thread;}CSSHTML
- 25.Transform● 要素の移動、回転、スケーリング、傾斜ができる● 何が嬉しいか●昔はJavaScriptを用いても困難だった● Canvasに文字を描画して変形しなければならなかった● それはパフォーマンス的にも遅かった
- 26.Transform<div id="outerblock"><div id="mytext"><p>Androidの1.6、2.0、3.0、4.0は目に見えた変更が多く、発表の度にワクワク（または大きな仕様変更に唖然と）したものだが、4.0以降はそれが薄くなった気がする。しかし同時期を境にiOSからその雰囲気を感じるようになったので今こそiPhoneを買うべきなのかもしれない。</p></div></div>#mytext{width: 10em;border: 1px solid #ff007f;transform:translate(150px,-10px)rotate(20deg)skewX(-20deg);}CSSHTMLサンプルコードhttp://goo.gl/6Pt5FS ※ブラウザによって対応状況がことなるのでいくつかのブラウザで試してください
- 27.Animations● Transition● 状態遷移時の変化のアニメーションが行える–例）マウスカーソルを当てた時や押した時● Animation● 繰り返しや複数回のアニメーションが行える
- 28.Animation : transition<divid="resizeBlock" class="outerBox"><div class="animBox">Animation</div></div>#resizeBlock .animBox {width: 10em;height: 2em;transition-property: all;transition-duration: 1s;transition-timing-function: linear;transition-delay: 0s;}#resizeBlock .animBox:hover {width: 20em;height: 4em;transition-property: all;transition-duration: 3s;transition-timing-function: linear;transition-delay: 0s;}CSSHTMLサンプルコードhttp://goo.gl/6Pt5FS ※ブラウザによって対応状況がことなるのでいくつかのブラウザで試してください
- 29.Animation: animation<div id="resizingBlock"class="outerBox"><div class="animBox">Animation</div></div><div id="movingBlock" class="outerBox"><div class="animBox">Animation</div></div>#resizingBlock .animBox {animation-name: resizingKfs;animation-duration: 1s;animation-play-state: running;animation-iteration-count: infinite;}@keyframes resizingKfs {from { width: 10em; }50% { width: 20em; }to { width: 10em; }}#movingBlock .animBox {animation-name: movingKfs;animation-duration: 1s;animation-play-state: running;animation-iteration-count: infinite;}@keyframes movingKfs {from { margin-left: 0em; margin-top: 0em; }25% { margin-left: 15em; margin-top: 10em; }75% { margin-left: 5em; margin-top: 10em; }to { margin-left: 20em; margin-top: 0em; }}CSSHTMLサンプルコードhttp://goo.gl/6Pt5FS ※ブラウザによって対応状況がことなるのでいくつかのブラウザで試してください
- 30.
- 31.まとめ● レイアウトについて● MediaQueriesやFlex、Regionsを使えば、JavaScriptを使わずにスマートに書ける● アニメーションについて● transitionやanimationを使えば、JavaScriptを使わずにスマートに書ける● JavaScriptを使わずにスマートに書ける
- 32.
Editor's Notes
- #5 アプリ側の立場で話す HTMLとCSSは共通言語 →AndroidやiOSは失敗してる