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

今更ながらCSS3を試してみた

1,134 views

Published on

関西Firefox OS勉強会 4th GIGの発表資料です。
サンプルコード
http://goo.gl/6Pt5FS
ZIP版
http://goo.gl/LtmYBT

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,134
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • アプリ側の立場で話す HTMLとCSSは共通言語  →AndroidやiOSは失敗してる
  • 今更ながらCSS3を試してみた

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

    ×