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.
さらに一歩踏み込んだCSS3の使い方!   コツとポイントを理解して    楽しくサイトを彩る方法     Photo	 and	 Design	 sonsun           鍋坂	 理恵
鍋坂理恵Rie Nabesaka香川県生まれのWebデザイナー制作会社で各種制作を経て独立カメラマンの夫・5歳の息子育児・家事・仕事に奮闘中
CSS3について
CSS3で実装するメリット・画像を使わなくても実装できることが増えた・従来では難しかった表現が可能に・ファイルサイズの軽減・アニメーションが軽い・高解像度ディスプレイでもキレイ!
http://www.findmebyip.com/litmus/
主なCSS3プロパティbox-shadow             CSS Animations      FlexBoxtext-shadow            CSS Gradients       CSS Columnsborder-...
主なCSS3プロパティbox-shadow             CSS Animations      FlexBoxtext-shadow            CSS Gradients       CSS Columnsborder-...
主なCSS3プロパティbox-shadow             CSS Animations      FlexBoxtext-shadow            CSS Gradients       CSS Columnsborder-...
Transforms, Transitions, Animationsアニメーション実装ができるプロパティ
Transforms, Transitions, Animationsアニメーション実装ができるプロパティ
http://www.findmebyip.com/litmus/
記述方法を理解しよう
Transforms
Transforms   ・・・拡大縮小、変形、回転、ゆがみ などの表現      2D Transform       3D Transform    translate 移動       translate   移動    rotate  ...
Transforms                               記述方法   .box1 { transform: rotate(20deg); }                      関数      値
2D transform                          記述方法               <div class="box1">SAMPLE</div>               CSS                 ...
2D transform                        記述方法               <div class="box1">SAMPLE</div>               CSS                 .b...
2D transform の基準点       記述方法         デフォルトでは要素の中央
2D transform の基準点                         記述方法               基準点を設定する         transform-originプロパティ   .box1 { transform-or...
2D transform の基準点                                  記述方法.box1 {                        .box1 {   transform: rotate(20deg); ...
3D transform         記述方法X軸、Y軸に加え、Z軸の指定が可能に
3D transform                記述方法X軸、Y軸に加え、Z軸の指定が可能に        perspective(遠近効果)
3D transform                                                            記述方法                  奥行きを表現する、perspective関数.box3 ...
3D transform                                                    記述方法                       perspectiveプロパティ#container {   ...
3D transform の基準点                                               記述方法               X軸、Y軸、Z軸の基準点が設定できる          デフォルトではX軸Y軸...
要素の裏返し                                                記述方法                                  transform: rotateY(180deg);裏面を...
CSS3でアニメーション表現を行う、        Transitions と Animationstransition 始点                                     終点                   ア...
Transitions
アニメ      ションの            ーショ アニメー               長さを                          ンの      点の設定              設定 始点と終          Tr...
Transitions 4つのプロパティ          記述方法  transition-property transition-duration transition-timing-function transition-delay
Transitions 4つのプロパティ                記述方法  transition-property: all; transitionを適用させるプロパティを設定する ・プロパティ名 (background-colorなど...
Transitions 4つのプロパティ                      記述方法  transition-timing-function: ease-out; アニメーションの加速や減速などを調節する ・ease       ・ea...
Transitions 4つのプロパティ                      記述方法ショートハンドで記述することも可能(半角スペースで区切る)transition: background-color 2s linear;        ...
Transitions 4つのプロパティ                      記述方法ショートハンドで記述することも可能(半角スペースで区切る)transition: background-color 2s linear;        ...
Animations
アニメ      ムによる              ーショキ ーフレー             途中か      ンを                       ら変化   細 かい指定                  できる      ...
Animations                             記述方法     @keyframes アニメーション名 {     } @keyframesでアニメーション名を定義して、 フレームごとの設定を行う0%      ...
Animations                          記述方法   @keyframes animation {     0% {       background-color: #ff0b00;     }     50% ...
Animations 基本プロパティ                  記述方法 animation-name @keyframesで実行させたいアニメーションの名前を指定する animation-duration @keyframesで実行さ...
Animations 主な関連プロパティ                       記述方法 animation-timing-function: ease-out; アニメーションの加速や減速などを調節する ・ease       ・eas...
Animations 主な関連プロパティ animation-iteration-count: infinite; 再生する回数を設定する ・infinite (無限ループ) ・数字   (再生回数) animation-direction: r...
Animations 主な関連プロパティ                    記述方法 animation-timing-function: ease-out; アニメーションの加速や原則などを調節する ・ease       ・ease-i...
プロパティを組み合わせた    制作例
transitionでSample 1   ナビゲーションに動きをつける                      demo
transitionとtransformでSample 2   実装するナビゲーション                            demo
Sample 2   animationを使った装飾例                         demo
CSS3 お役立ちツール
ど     ブラウ 分か ってるけ      確認す                   ザ対応        変         るのが  書くのが大               手間CSS3の実装は時間がかかる・・・            ...
アニメーション作成ツールAdobe Edgehttp://www.adobe.com/jp/products/edge.htmlSencha Animatorhttp://www.sencha.com/products/animator/Fla...
CSS3 作成ツールAnimate.CSShttp://daneden.me/animate/Styliehttp://jeremyckahn.github.com/stylie/CSS3.0 MAKERhttp://www.css3maker...
CSS3 作成ツールGrad3http://grad3.ecoloniq.jp/cssarrowpleasehttp://cssarrowplease.com/CSS3 Multi Column Layout Generatorhttp://w...
CSS3 作成ツールborder-image-generatorhttp://border-image.com/                              CSS3                           PROPE...
まとめ
・案件の要件に応じて取り入れる・プロパティの理解を深める・効率化できるものは活用しよう
ありがと ございます    う     ! Photo	 and	 Design	 sonsun       鍋坂理恵      info@sonsun33.com       Twitter : @sonsun      Facebook :...
Upcoming SlideShare
Loading in …5
×

さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

CSS Nite OSAKA Vol.32より

  • Be the first to comment

さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

  1. 1. さらに一歩踏み込んだCSS3の使い方! コツとポイントを理解して 楽しくサイトを彩る方法 Photo and Design sonsun 鍋坂 理恵
  2. 2. 鍋坂理恵Rie Nabesaka香川県生まれのWebデザイナー制作会社で各種制作を経て独立カメラマンの夫・5歳の息子育児・家事・仕事に奮闘中
  3. 3. CSS3について
  4. 4. CSS3で実装するメリット・画像を使わなくても実装できることが増えた・従来では難しかった表現が可能に・ファイルサイズの軽減・アニメーションが軽い・高解像度ディスプレイでもキレイ!
  5. 5. http://www.findmebyip.com/litmus/
  6. 6. 主なCSS3プロパティbox-shadow CSS Animations FlexBoxtext-shadow CSS Gradients CSS Columnsborder-radius CSS Reflections Media Queriesopacity CSS 2D Transformsrgba() hsla() CSS 3D Transformsbox-sizing CSS TransitionsBackground SizeMultiple backgroundsborder-image
  7. 7. 主なCSS3プロパティbox-shadow CSS Animations FlexBoxtext-shadow CSS Gradients CSS Columnsborder-radius CSS Reflections Media Queriesopacity CSS 2D Transformsrgba() hsla() CSS 3D Transformsbox-sizing CSS TransitionsBackground SizeMultiple backgroundsborder-image 比較的使いやすいプロパティ
  8. 8. 主なCSS3プロパティbox-shadow CSS Animations FlexBoxtext-shadow CSS Gradients CSS Columnsborder-radius CSS Reflections Media Queriesopacity CSS 2D Transformsrgba() hsla() CSS 3D Transformsbox-sizing CSS TransitionsBackground SizeMultiple backgroundsborder-image 今日はこのプロパティに注目!
  9. 9. Transforms, Transitions, Animationsアニメーション実装ができるプロパティ
  10. 10. Transforms, Transitions, Animationsアニメーション実装ができるプロパティ
  11. 11. http://www.findmebyip.com/litmus/
  12. 12. 記述方法を理解しよう
  13. 13. Transforms
  14. 14. Transforms ・・・拡大縮小、変形、回転、ゆがみ などの表現 2D Transform 3D Transform translate 移動 translate 移動 rotate 回転 rotate 回転 scale 拡大縮小 scale 拡大縮小 skew ゆがみ(傾斜) skew ゆがみ matrix 変形指定 matrix 変形指定 perspective 遠近効果
  15. 15. Transforms 記述方法 .box1 { transform: rotate(20deg); } 関数 値
  16. 16. 2D transform 記述方法 <div class="box1">SAMPLE</div> CSS .box1 { transform: rotate(20deg); } 右回 に り 20度回転さ る せ
  17. 17. 2D transform 記述方法 <div class="box1">SAMPLE</div> CSS .box1 { transform: skewX(15deg); } X軸に15度 傾斜させる
  18. 18. 2D transform の基準点 記述方法 デフォルトでは要素の中央
  19. 19. 2D transform の基準点 記述方法 基準点を設定する transform-originプロパティ .box1 { transform-origin: 100% 100%; } X軸 Y軸 left, right, top, bottomの指定も可能
  20. 20. 2D transform の基準点 記述方法.box1 { .box1 { transform: rotate(20deg); transform: rotate(20deg);} transform-origin: 100% 100%; }
  21. 21. 3D transform 記述方法X軸、Y軸に加え、Z軸の指定が可能に
  22. 22. 3D transform 記述方法X軸、Y軸に加え、Z軸の指定が可能に perspective(遠近効果)
  23. 23. 3D transform 記述方法 奥行きを表現する、perspective関数.box3 { .box3 {transform: perspective(200) rotateY(20deg); transform: perspective(80) rotateY(20deg);} }
  24. 24. 3D transform 記述方法 perspectiveプロパティ#container { .box1 { .box2 { perspective: 200; transform: rotateY(50deg); transform: rotateY(-50deg); } } }
  25. 25. 3D transform の基準点 記述方法 X軸、Y軸、Z軸の基準点が設定できる デフォルトではX軸Y軸は要素の中心、Z軸は「0」となる.box { .box { transform: perspective(250) transform: perspective(250)rotateY(20deg); rotateY(20deg); transform-origin: 100% 100% 0; transform-origin: 0% 0% 0;} }
  26. 26. 要素の裏返し 記述方法 transform: rotateY(180deg);裏面を表示させるかどうかbackface-visibilityプロパティbackface-visibility: hidden;  ・・・表示させないbackface-visibility: visible;   ・・・表示させる X方向なら 垂直に反転
  27. 27. CSS3でアニメーション表現を行う、 Transitions と Animationstransition 始点 終点 アニメーション全体animation 0% 細かく設定できる 50% 75% 100% アニメーション全体 無限ループが可能
  28. 28. Transitions
  29. 29. アニメ ションの ーショ アニメー 長さを ンの 点の設定 設定 始点と終 Transitions アニメ ョ ン全体の ーショア ニメーシ る 遅延の ンの を調節す 設定 速度進行
  30. 30. Transitions 4つのプロパティ 記述方法 transition-property transition-duration transition-timing-function transition-delay
  31. 31. Transitions 4つのプロパティ 記述方法 transition-property: all; transitionを適用させるプロパティを設定する ・プロパティ名 (background-colorなど。カンマ区切りで複数設定も) ・all (すべてのプロパティ) ・none (適用しない) transition-duration: 2s; transitionの変化にかかる時間を設定する ・s(秒数) ・ms(ミリ秒数) こ2 だ で のつ け も ア メ シ ン ニ ー ョ でる き
  32. 32. Transitions 4つのプロパティ 記述方法 transition-timing-function: ease-out; アニメーションの加速や減速などを調節する ・ease ・ease-in ・ease-in-out ・linear ・ease-out transition-delay: 0.5s; イベントを起こしてから、アニメーションが開始するまでの時間設定 ・s(秒数) ・ms(ミリ秒数)
  33. 33. Transitions 4つのプロパティ 記述方法ショートハンドで記述することも可能(半角スペースで区切る)transition: background-color 2s linear; アニメーション対象 アニメーションの長さ 減速や加速の設定
  34. 34. Transitions 4つのプロパティ 記述方法ショートハンドで記述することも可能(半角スペースで区切る)transition: background-color 2s linear; 実際に動きを 見てみましょ う アニメーション対象 demo アニメーションの長さ 減速や加速の設定
  35. 35. Animations
  36. 36. アニメ ムによる ーショキ ーフレー 途中か ンを ら変化 細 かい指定 できる Animations ションに 無限ル ク ープがユ ーザーア る 設定で 再生でき きる 関係なく
  37. 37. Animations 記述方法 @keyframes アニメーション名 { } @keyframesでアニメーション名を定義して、 フレームごとの設定を行う0% 50% 75% 100% アニメーション アニメーション 始点 終点
  38. 38. Animations 記述方法 @keyframes animation { 0% { background-color: #ff0b00; } 50% { background-color: #ffd800; } 100% { background-color: #54ff00; } }
  39. 39. Animations 基本プロパティ 記述方法 animation-name @keyframesで実行させたいアニメーションの名前を指定する animation-duration @keyframesで実行させたいアニメーション全体の長さを指定する ・s(秒数) ・ms(ミリ秒数) こ2 は のつ 必 設 す ず 定 る
  40. 40. Animations 主な関連プロパティ 記述方法 animation-timing-function: ease-out; アニメーションの加速や減速などを調節する ・ease ・ease-in ・ease-in-out ・linear ・ease-out animation-delay: 0.5s; アニメーションが開始するまでの時間設定 ・s(秒数) ・ms(ミリ秒数) transition とじ 同
  41. 41. Animations 主な関連プロパティ animation-iteration-count: infinite; 再生する回数を設定する ・infinite (無限ループ) ・数字   (再生回数) animation-direction: reverse; 通常再生するか、逆再生するかなど設定する ・nomal 通常通りに再生 ・reverse 常に逆再生する ・alternate 再生・逆再生と繰り返す ・alternate-reverse 逆再生・再生と繰り返す
  42. 42. Animations 主な関連プロパティ 記述方法 animation-timing-function: ease-out; アニメーションの加速や原則などを調節する ・ease ・ease-in ・ease-in-out ・linear 実際に動きを ・ease-out 見てみましょ う dem animation-delay: 0.5s; o アニメーションが開始するまでの時間設定 ・s(秒数) ・ms(ミリ秒数)
  43. 43. プロパティを組み合わせた 制作例
  44. 44. transitionでSample 1 ナビゲーションに動きをつける demo
  45. 45. transitionとtransformでSample 2 実装するナビゲーション demo
  46. 46. Sample 2 animationを使った装飾例 demo
  47. 47. CSS3 お役立ちツール
  48. 48. ど ブラウ 分か ってるけ 確認す ザ対応 変 るのが 書くのが大 手間CSS3の実装は時間がかかる・・・ 時間が ない! や やこしい でも使コードが いたい !
  49. 49. アニメーション作成ツールAdobe Edgehttp://www.adobe.com/jp/products/edge.htmlSencha Animatorhttp://www.sencha.com/products/animator/Flash Professional CS6 / Toolkit for CreateJShttp://www.adobe.com/jp/products/flash/flash-to-html5.html/CreateJShttp://www.createjs.com/ HTML5・CSS3 JavaScript
  50. 50. CSS3 作成ツールAnimate.CSShttp://daneden.me/animate/Styliehttp://jeremyckahn.github.com/stylie/CSS3.0 MAKERhttp://www.css3maker.com/CSS3 Sandboxhttp://westciv.com/tools/ transform transition animation etc...
  51. 51. CSS3 作成ツールGrad3http://grad3.ecoloniq.jp/cssarrowpleasehttp://cssarrowplease.com/CSS3 Multi Column Layout Generatorhttp://www.aaronlumsden.com/multicol/3D CSS Text Generatorhttp://www.3dcsstext.com/ CSS3 PROPERTYS
  52. 52. CSS3 作成ツールborder-image-generatorhttp://border-image.com/ CSS3 PROPERTYS
  53. 53. まとめ
  54. 54. ・案件の要件に応じて取り入れる・プロパティの理解を深める・効率化できるものは活用しよう
  55. 55. ありがと ございます う ! Photo and Design sonsun 鍋坂理恵 info@sonsun33.com Twitter : @sonsun Facebook : sonsun

    Be the first to comment

    Login to see the comments

  • sma_so

    Aug. 31, 2012
  • kayosuke

    Aug. 31, 2012
  • TakeshiWatanabe2

    Aug. 31, 2012
  • magicvox

    Sep. 5, 2012
  • hideki0124rr

    Sep. 6, 2012
  • ikko615

    Sep. 9, 2012
  • cocoaqua

    Oct. 2, 2012
  • norobata

    Dec. 22, 2012
  • satoshishoji

    Feb. 4, 2013
  • ShogoYano

    Mar. 4, 2013
  • izuizuf

    Mar. 12, 2013
  • syosacrown

    Mar. 12, 2013
  • MaruyamaAkira

    Mar. 12, 2013
  • croudsky

    Mar. 22, 2013
  • konitter

    Mar. 25, 2013
  • hiroyoshimachida

    Mar. 30, 2013
  • sano66

    Sep. 20, 2013
  • hiromitsuuuuu

    Oct. 17, 2013
  • TakashiKabeya

    Oct. 24, 2013
  • think-a-lot

    Oct. 26, 2018

CSS Nite OSAKA Vol.32より

Views

Total views

7,895

On Slideshare

0

From embeds

0

Number of embeds

2,760

Actions

Downloads

39

Shares

0

Comments

0

Likes

24

×