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

1. Q＆Aで振り返る
「Back to Basics」 CSS
2015.08.30

2. 普段なにげなく見過ごしている
W3CのCSS仕様
多くの発見と納得が存在することに
気づかせてくれたイベント

3. CSS Quiz!!

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. 1. 基本の前の基礎知識
@ub_pnr
https://twitter.com/ub_pnr
株式会社シフトブレイン
國仲 義則さん
http://unformedbuilding.com/slide/back-
to-basics-2015-08-30/
以上の2つのQについてもっと知りたい方

11. これは一般的に
どこで見られる記述ですか？
Q3.
:-webkit-any(article,aside,nav,section) h1 {
font-size: 1.5em;
}
:-moz-any(section, article, aside, nav) h1 {
font-size: 25px;
}

12. UAスタイルシートです
A3.
• https://developer.mozilla.org/en-US/
docs/Web/CSS/%3Aany

14. どこに作用するマージンですか？
Q4.
-webkit-margin-after: 20px

15. コンテンツが横書きのブロックに対しては margin-bottom
の位置です
コンテンツが日本語縦書きのブロックに対しては margin-left
の位置です
A4.
• http://codepen.io/sekiyaeiji/pen/xwxZxR
• http://momdo.github.io/css2/
box.html#margin-properties

16. 2. UAスタイルシートとリセットCSS
@kojika17
https://twitter.com/kojika17
株式会社まぼろし
久保知己さん
http://www.slideshare.net/tomokikubo/ua-
css
以上の2つのQについてもっと知りたい方

18. Hexコードで表すと何になります
か？
そしてこの名前の由来は？
Q5.
color: rebeccapurple

19. color: #663399
CSSの標準規格に尽力したEric Meyerの
愛娘で、脳腫瘍により6歳の若さで亡くなっ
たRebecca Alison 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. 3. ご存じですか？colorプロパティ
@GeckoTang
https://twitter.com/GeckoTang
株式会社ピクセルグリッド
坂巻翔大郎さん
http://geckotang.github.io/presentation-
BacktoBasics-20150830/
以上の2つのQについてもっと知りたい方

25. 以下は動作しないブラウザが存在する実装です
が、その理由はなぜですか？
Q7.
@keyframes foo {
0% {
background-image: url("1.png");
}
100% {
background-image: url("2.png");
}
}

26. 仕様です
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

28. 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;
}

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. 4. background-(image|size) の深みへようこそ
@kubosho_
https://twitter.com/kubosho_
株式会社グラニ
久保田翔太さん
http://www.slideshare.net/kubosho/
backgroundimagesize
以上の2つのQについてもっと知りたい方

32. vhってなんですか？
Q9.

33. 初期包含ブロックの縦幅に対する%
A9.
• http://jsfiddle.net/o_ti/vrxwkbwk/1/
• http://caniuse.com/#search=vh

35. 以下のposition: fixedは無効に
なりますが、その理由はなぜです
か？
Q10.
.wrap {transform: scale(0.8,1)}
.fixed {position: fixed}
<div class="wrap">
<div class="fixed">テキスト</div>
</div>

36. 未解決課題として未実装のままだから
です。
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

37. 5. position:fixed;チョットデキル
@o_ti
https://twitter.com/o_ti
株式会社まぼろし
伊藤由暁さん
http://www.slideshare.net/o_ti/position-
fixed-52224889
以上の2つのQについてもっと知りたい方

39. • CSSイベント「Back to Basics」 - html5jマーク
アップ部スピンオフ by Peatix
• 2015/08/30 (日) 13:00 - 17:00 JST
• 恵比寿ガーデンプレイスタワー 21F 株式会社
DMM.comラボ
• http://peatix.com/event/105960
イベントの詳細

40. #btbcss
• https://twitter.com/search?f=tweets&q=
%23btbcss
ハッシュ

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. 某社長...
※ LT者決定前、初期の参加者リスト、キャプっとかなかった悔み．．．

45. • 成長の超基本 ： 知らないこと → 知ってること化
• 知らないことがあることを知る大切さ
• 情報収集しよう
• twitterも立派な情報収集ツール
• 聴講者一覧もイベントの質を測る指標になる
所感

46. ＠sekiyaeiji2015/08
ありがとうございました