Embed Size (px)
DESCRIPTION
関西Firefox OS勉強会 4th GIGの発表資料です。 サンプルコード http://goo.gl/6Pt5FS ZIP版 http://goo.gl/LtmYBT
Citation preview
今更ながらCSS3を試してみた
住友 孝郎@cattaka_net
自己紹介● 住友 孝郎(すみとも たかお)
● 株式会社ブリリアントサービス所属
● 業務系Webアプリ開発
● Androidアプリケーション開発
● 研究開発とか
– ロボット的な何か
– 画像認識的な何か
– Tizen IVI的な何か
住友 孝郎@cattaka_net
雑多にやってます
トピック● CSS3とWeb標準● CSSの基本
● HTMLとCSSの関係● CSSの表記法
● CSS3の新要素
CSS3とWeb標準
Web標準
Mozilla Japan 浅井智也氏の資料より
CSSの基本
CSSとは● Cascading Style Sheetsの略● W3Cで標準化されている● HTMLにスタイル(見栄え)を追加する● 仕様全ての完全な実装は事実上無い
HTMLとCSSの関係● HTMLで文章の論理構造を記述する● CSSでスタイルを記述する● ２つを繋ぐのはセレクタ
● タグ● ID● クラス● 階層構造
CSSの表記法● セレクタ● 宣言ブロック
● 宣言– プロパティ– 値
p#id { color : #ff3300; width : 30%; height : 20%;}
セレクタの例● タグ
– セレクタにタグ名をそのまま書く
button { ... }
● ID– セレクタに”#”＋IDを書く
#myButton { ... }
● クラス– セレクタに”.”＋クラス名を書く
.buttonClass { ... }
● 階層構造– セレクタをスペースで区切ると子孫要素が対象となる
#myButton .buttonClass { ... }– “>”で区切ると子要素が対象となる
#myButton > .buttonClass { ... }
#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>
あいうえお
あいうえお
HTML
CSS
CSS3の新要素
CSS3の新要素● Layout : box● FlexBox● MediaQueries● Regions● Transform● Animations サンプルコード
http://goo.gl/6Pt5FSZIP版
http://goo.gl/LtmYBT
※ブラウザによって対応状況がことなるのでいくつかのブラウザで試してください
Layout : box● ブロック要素に並べて詰め込むことができる● 順番の入れ替えが可能● 空き領域に合わせて引き伸ばすことができる● 何が嬉しいか？
● 従来は同じ事をするのにJavaScriptをゴリゴリ書かなければならなかった
● これならCSSのみで対応できる
Layout : box
<div id="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
※ブラウザによって対応状況がことなるのでいくつかのブラウザで試してください
Layout : box
<h2>Liquid</h2><div id="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
※ブラウザによって対応状況がことなるのでいくつかのブラウザで試してください
FlexBox● 様々な画面サイズにフレキシブルに配置される● 画面がコンテンツよりも大きい時は伸びたり、
小さい場合は改行または縮ませることができる● 何が嬉しいか？
● 従来はパーセント指定で行うしか無く、そのためにJavaScriptでゴリゴリするしかなかった
● これならCSSのみで対応できる
FlexBox
<div class="divFlexBox"> <div class="item-block">1st</div> <div class="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
※ブラウザによって対応状況がことなるのでいくつかのブラウザで試してください
FlexBox● 他にできること
● 要素の順番の入れ替え– order 属性で指定する– HTMLの変更が不要
● 収まらない場合の改行の指定– 応用するとレイアウトの切り替えもできる
https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Flexible_boxes より
MediaQueries● メディア特性の式により、使用されるCSSを切り替え
ることができる● 何が嬉しいか
● 従来はonLoad()内でJavaScriptで画面の幅からゴリゴリやる必要があった
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
※ブラウザによって対応状況がことなるのでいくつかのブラウザで試してください
Regions● 一続きの文章を複数の領域に分割して表示できる● 領域の形を自由に指定できる● 何が嬉しいか？
● 今までは文字列の分割をJavaScriptで行わなければならなかった。それは激しく泥臭かった。
1
2
3
4
Regions
<div id="source"> <p>Androidの1.6、2.0、3.0、4.0は 目に見えた変更が多く、発表の度にワクワク （または大きな仕様変更に唖然と）したものだが、 4.0以降はそれが薄くなった気がする。 しかし同時期を境にiOSからその雰囲気を感じるように なったので今こそiPhoneを買うべきなのかもしれない。 </p></div><div class="divFlexBox"> <div class="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
Transform● 要素の移動、回転、スケーリング、傾斜ができる● 何が嬉しいか
● 昔はJavaScriptを用いても困難だった● Canvasに文字を描画して変形しなければならなかった● それはパフォーマンス的にも遅かった
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
※ブラウザによって対応状況がことなるのでいくつかのブラウザで試してください
Animations● Transition
● 状態遷移時の変化のアニメーションが行える– 例）マウスカーソルを当てた時や押した時
● Animation● 繰り返しや複数回のアニメーションが行える
Animation : transition
<div id="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
※ブラウザによって対応状況がことなるのでいくつかのブラウザで試してください
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
※ブラウザによって対応状況がことなるのでいくつかのブラウザで試してください
まとめ
まとめ● レイアウトについて
● Media QueriesやFlex、Regionsを使えば、JavaScriptを使わずにスマートに書ける
● アニメーションについて● transitionやanimationを使えば、JavaScriptを使わず
にスマートに書ける
● JavaScriptを使わずにスマートに書ける
ご清聴ありがとうございました
住友 孝郎@cattaka_net
