Recommended
More Related Content
Viewers also liked
Viewers also liked (11)
Similar to Webの勉強会#8
Similar to Webの勉強会#8 (20)
More from MarlboroLand
Webの勉強会#8
- 9. 02 文字サイズ 9
- 17. 03 横並び 17
- 22. 22 1列で構成される ナビゲーションなんかに最適 03 横並び ナビ1 ナビ2 ナビ3 ナビ4
- 24. 24 03 横並び 親要素 { display: table; table-layout: fixed; width: 100%; }
- 29. 29 03 横並び flex-start > 左揃え flex-end > 右揃え center > 中央揃え space-between > 均等の間隔で整列 space-around > 均等の間隔で整列、両端 の余白が半分になる
- 31. 31 03 横並び flex-direction:row; > 左から右 flex-direction:row-reverse; > 右から左 flex-direction:column; > 上から下 flex-direction:column-reverse; > 下から上
- 33. 33 03 横並び flex-wrap:nowrap; > 一行に全部表示 flex-wrap:wrap; > 折り返して表示 flex-wrap:wrap-reverse; > 折り返すが、 wrapの逆で、上へ折り返す
- 36. 36 03 横並び align-items: center; display: flex; height: 500px; justify-content: center; width: 500px;
- 37. 04 アニメーション 37
- 41. 41 transition-property > 適用するプロパティ名を指定 transition-duration > 時間 transition-timing-function >変化のタイミング transition-delay > 変化が始まるタイミング 04 アニメーション
- 43. 43 親要素 { transition: color 1.0s linear 0.5s; } 子要素:hover { color: red; } 04 アニメーション
- 45. 45 animation-name > アニメーション名の指定 animation-duration > アニメーションの時間 animation-timing-function > アニメーションのタイ ミング animation-delay > 開始時間 animation-iteration-count > 繰返し回数 animation-direction > 反転再生するかどうか 04 アニメーション
- 48. 48 animation-name: anime1; animation-duration: 2s; animation-timing-function: ease; animation-iteration-count: infinite; animation-direction:alternate; 04 アニメーション
- 49. 49 @keyframes anime1 { 0% { width: 50px; height: 50px; background-color: aqua; } 04 アニメーション 100% { width: 200px; height: 50px; background-color: blue; } }
- 54. 54 transform: scale(2.0,2.0); 要素のサイズを縦横2倍にする transform: scale(0.5,0.5); 要素のサイズを縦横半分にする 04 アニメーション
- 59. 59 .wrapper { height: 225px; overflow: hidden; width: 300px; .expansion1 { transition: transform 0.5s linear; &:hover { cursor: pointer; transform: scale(1.5, 1.5); } } } 04 アニメーション
- 62. 62 .rotate1 { width: 300px; transition: transform 0.5s linear; &:hover { cursor: pointer; transform: rotateY(180deg); } } 04 アニメーション
- 63. 05 ブラウザ 63
- 66. 66 Can I useでCSSプロパティの 対応状況を調べる 05 ブラウザ
- 69. 06 参考サイト 69
- 70. 70 • http://scene-live.com/page.php?page=57 • https://ics.media/entry/13117 • http://11neko.com/css3-transition/ • http://www.htmq.com/css3/animation-direction.shtml • http://www.htmq.com/css3/transform.shtml • http://qiita.com/7968/items/eddfeb4b424d7c2d2d34 • http://gs.statcounter.com/ • https://ics.media/entry/3290 06 参考サイト
- 71. 71 以上!!