Download to read offline
Uploaded byeiji sekiya
Q＆Aで振り返る「Back to Basics」 CSS 2015.08.30
2015/08/30に開催された『CSSイベント「Back to Basics」』の内容が非常に有用だったので、クイズ形式で振り返ってみました
Q＆Aで振り返る「Back to Basics」 CSS 2015.08.30
- 1. Q＆Aで振り返る 「Back to Basics」CSS 2015.08.30
- 2.
- 3.
- 4. これは何を表す記述ですか？ Q1. <shadow> = inset?&& <length>{2,4} && <color>?
- 5. Value Definition CSSの値定義です A1. • http://momdo.github.io/css3-values/ #component-combinators •http://www.w3.org/TR/css3-values/ #value-defs
- 7. a ¦ b¦ c a ¦¦ b ¦¦ c Value Definition Syntaxにおい て、以下の違いは何ですか？ Q2.
- 8. 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
- 9.
- 11. これは一般的に どこで見られる記述ですか？ Q3. :-webkit-any(article,aside,nav,section) h1 { font-size:1.5em; } :-moz-any(section, article, aside, nav) h1 { font-size: 25px; }
- 12.
- 14.
- 15. コンテンツが横書きのブロックに対しては margin-bottom の位置です コンテンツが日本語縦書きのブロックに対しては margin-left の位置です A4. •http://codepen.io/sekiyaeiji/pen/xwxZxR • http://momdo.github.io/css2/ box.html#margin-properties
- 16.
- 18.
- 19. color: #663399 CSSの標準規格に尽力したEric Meyerの 愛娘で、脳腫瘍により6歳の若さで亡くなっ たRebeccaAlison Meyerの名前に由来 A5. • http://cpplover.blogspot.jp/2014/06/ rebeccapurplecss-4-color.html
- 21. divのボーダー色は何色でしょう Q6. div { color: limegreen; border:2px solid currentColor; } div { color: tomato; }
- 22. 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
- 23.
- 25. 以下は動作しないブラウザが存在する実装です が、その理由はなぜですか？ Q7. @keyframes foo { 0%{ background-image: url("1.png"); } 100% { background-image: url("2.png"); } }
- 26.
- 28.
- 29. 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
- 30.
- 32.
- 33.
- 35. 以下のposition: fixedは無効に なりますが、その理由はなぜです か？ Q10. .wrap {transform:scale(0.8,1)} .fixed {position: fixed} <div class="wrap"> <div class="fixed">テキスト</div> </div>
- 36.
- 37.
- 39. • CSSイベント「Back toBasics」 - html5jマーク アップ部スピンオフ by Peatix • 2015/08/30 (日) 13:00 - 17:00 JST • 恵比寿ガーデンプレイスタワー 21F 株式会社 DMM.comラボ • http://peatix.com/event/105960 イベントの詳細
- 40.
- 41. メインセッション 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
- 42. ライトニングトーク 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
- 43.
- 45. • 成長の超基本 ：知らないこと → 知ってること化 • 知らないことがあることを知る大切さ • 情報収集しよう • twitterも立派な情報収集ツール • 聴講者一覧もイベントの質を測る指標になる 所感
- 46.