Q&Aで振り返る「Back to Basics」 CSS 2015.08.30

1,943 views

Published on

2015/08/30に開催された『CSSイベント「Back to Basics」』の内容が非常に有用だったので、クイズ形式で振り返ってみました

Published in: Engineering
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,943
On SlideShare
0
From Embeds
0
Number of Embeds
139
Actions
Shares
0
Downloads
5
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

Q&Aで振り返る「Back to Basics」 CSS 2015.08.30

  1. 1. Q&Aで振り返る 「Back to Basics」 CSS 2015.08.30
  2. 2. 普段なにげなく見過ごしている
 W3CのCSS仕様 多くの発見と納得が存在することに 気づかせてくれたイベント
  3. 3. CSS Quiz!!
  4. 4. これは何を表す記述ですか? Q1. <shadow> = inset? && <length>{2,4} && <color>?
  5. 5. Value Definition CSSの値定義です A1. • http://momdo.github.io/css3-values/ #component-combinators • http://www.w3.org/TR/css3-values/ #value-defs
  6. 6. a ¦ b ¦ c a ¦¦ b ¦¦ c Value Definition Syntaxにおい て、以下の違いは何ですか? Q2.
  7. 7. a | b | c = どれか1つだけ a || b || c = 1つ以上で順不同 A2. • http://momdo.github.io/css3-values/ #component-combinators • http://www.w3.org/TR/css3-values/ #value-defs
  8. 8. 1. 基本の前の基礎知識 @ub_pnr https://twitter.com/ub_pnr 株式会社シフトブレイン 國仲 義則さん http://unformedbuilding.com/slide/back- to-basics-2015-08-30/ 以上の2つのQについてもっと知りたい方
  9. 9. これは一般的に
 どこで見られる記述ですか? Q3. :-webkit-any(article,aside,nav,section) h1 { font-size: 1.5em; } :-moz-any(section, article, aside, nav) h1 { font-size: 25px; }
  10. 10. UAスタイルシートです A3. • https://developer.mozilla.org/en-US/ docs/Web/CSS/%3Aany
  11. 11. どこに作用するマージンですか? Q4. -webkit-margin-after: 20px
  12. 12. コンテンツが横書きのブロックに対しては margin-bottom の位置です コンテンツが日本語縦書きのブロックに対しては margin-left の位置です A4. • http://codepen.io/sekiyaeiji/pen/xwxZxR • http://momdo.github.io/css2/ box.html#margin-properties
  13. 13. 2. UAスタイルシートとリセットCSS @kojika17 https://twitter.com/kojika17 株式会社まぼろし 久保知己さん http://www.slideshare.net/tomokikubo/ua- css 以上の2つのQについてもっと知りたい方
  14. 14. Hexコードで表すと何になります か? そしてこの名前の由来は? Q5. color: rebeccapurple
  15. 15. color: #663399 CSSの標準規格に尽力したEric Meyerの 愛娘で、脳腫瘍により6歳の若さで亡くなっ たRebecca Alison Meyerの名前に由来 A5. • http://cpplover.blogspot.jp/2014/06/ rebeccapurplecss-4-color.html
  16. 16. divのボーダー色は何色でしょう Q6. div { color: limegreen; border: 2px solid currentColor; } div { color: tomato; }
  17. 17. tomato です A6. • http://caniuse.com/#search=currentColor • http://standards.mitsue.co.jp/resources/w3c/ TR/css3-color/#currentcolor • http://www.w3.org/TR/css3-color/#currentcolor
  18. 18. 3. ご存じですか?colorプロパティ @GeckoTang https://twitter.com/GeckoTang 株式会社ピクセルグリッド 坂巻翔大郎さん http://geckotang.github.io/presentation- BacktoBasics-20150830/ 以上の2つのQについてもっと知りたい方
  19. 19. 以下は動作しないブラウザが存在する実装です が、その理由はなぜですか? Q7. @keyframes foo { 0% { background-image: url("1.png"); } 100% { background-image: url("2.png"); } }
  20. 20. 仕様です A7. • http://standards.mitsue.co.jp/resources/w3c/ TR/css3-background/#the-background-image • http://www.w3.org/TR/css3-background/ #the-background-image Animatable: no
  21. 21. 3.png、4.png、5.pngに適用される background-repeat値は何ですか? Q8. .example { background-image: url("1.png"),url("2.png"),
 url("3.png"),url("4.png"),
 url("5.png"); background-repeat: repeat-x, no-repeat; }
  22. 22. repeat-x、 no-repeat、 repeat-x です A8. • http://codepen.io/sekiyaeiji/pen/KdKVOg • http://standards.mitsue.co.jp/resources/w3c/ TR/css3-background/#the-background-repeat • http://www.w3.org/TR/css3-background/ #the-background-repeat
  23. 23. 4. background-(image|size) の深みへようこそ @kubosho_ https://twitter.com/kubosho_ 株式会社グラニ 久保田翔太さん http://www.slideshare.net/kubosho/ backgroundimagesize 以上の2つのQについてもっと知りたい方
  24. 24. vhってなんですか? Q9.
  25. 25. 初期包含ブロックの縦幅に対する% A9. • http://jsfiddle.net/o_ti/vrxwkbwk/1/ • http://caniuse.com/#search=vh
  26. 26. 以下のposition: fixedは無効に なりますが、その理由はなぜです か? Q10. .wrap {transform: scale(0.8,1)} .fixed {position: fixed} <div class="wrap"> <div class="fixed">テキスト</div> </div>
  27. 27. 未解決課題として未実装のままだから です。 A10. • http://www.w3.org/TR/css-transforms-1/ #issues-index • http://www.hcn.zaq.ne.jp/___/WEB/css- transforms-ja.html#transformation-matrix- computation
  28. 28. 5. position:fixed;チョットデキル @o_ti https://twitter.com/o_ti 株式会社まぼろし 伊藤由暁さん http://www.slideshare.net/o_ti/position- fixed-52224889 以上の2つのQについてもっと知りたい方
  29. 29. • CSSイベント「Back to Basics」 - html5jマーク アップ部スピンオフ by Peatix • 2015/08/30 (日) 13:00 - 17:00 JST • 恵比寿ガーデンプレイスタワー 21F 株式会社 DMM.comラボ • http://peatix.com/event/105960 イベントの詳細
  30. 30. #btbcss • https://twitter.com/search?f=tweets&q= %23btbcss ハッシュ
  31. 31. メインセッション 5 Main 1. 基本の前の基礎知識 @ub_pnr http://unformedbuilding.com/slide/back-to-basics-2015-08-30/ Main 2. UAスタイルシートとリセットCSS @kojika17 http://www.slideshare.net/tomokikubo/ua-css Main 3. ご存じですか?colorプロパティ @GeckoTang http://geckotang.github.io/presentation-BacktoBasics-20150830/ Main 4. background-(image|size) の深みへようこそ @kubosho_ http://www.slideshare.net/kubosho/backgroundimagesize Main 5. position:fixed;チョットデキル @o_ti http://www.slideshare.net/o_ti/position-fixed-52224889
  32. 32. ライトニングトーク 7 ライトニングトークも内容充実 
 LT 1. CSSで固定比率レイアウト @yoshiko_pg http://yoshiko-pg.github.io/slides/20150830-backtobasics/ LT 2. StyleStats @kojismt、@t32k http://www.slideshare.net/t32k/evaluating-your-stylesheets LT 3. お前は table-cell に position: relative できなかった人の数を覚えているのか @debiru http://mtakai.github.io/slide/20150830/table-relative/ LT 4. PostCSS 5.0 @morishitter_ https://speakerdeck.com/morishitter/postcss-5-dot-0-for-custom-css-preprocessing LT 5. CODEPEN @hiloki http://codepen.io/hiloki/full/BoBXWb/ LT 6. charset @myakura https://t.co/aDOv6O6Ddl LT 7. パフォーマンスを発揮するためのCSS @448jp https://speakerdeck.com/448jp/pahuomansuwofa-hui-surutamefalsecss
  33. 33. 某社長... ※ LT者決定前、初期の参加者リスト、キャプっとかなかった悔み...
  34. 34. • 成長の超基本 : 知らないこと → 知ってること化 • 知らないことがあることを知る大切さ • 情報収集しよう • twitterも立派な情報収集ツール • 聴講者一覧もイベントの質を測る指標になる 所感
  35. 35. @sekiyaeiji2015/08 ありがとうございました

×