q&aで振り返る「back to basics」 css 2015.08.30
TRANSCRIPT
Q&Aで振り返る
「Back to Basics」 CSS 2015.08.30
普段なにげなく見過ごしている
W3CのCSS仕様
多くの発見と納得が存在することに
気づかせてくれたイベント
CSS Quiz!!
これは何を表す記述ですか?
Q1.
<shadow> = inset? && <length>{2,4} && <color>?
Value Definition CSSの値定義です
A1.
• http://momdo.github.io/css3-values/#component-combinators
• http://www.w3.org/TR/css3-values/#value-defs
a | b | c a || b || c
Value Definition Syntaxにおいて、以下の違いは何ですか?
Q2.
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
1. 基本の前の基礎知識 @ub_pnr https://twitter.com/ub_pnr 株式会社シフトブレイン 國仲 義則さん http://unformedbuilding.com/slide/back-to-basics-2015-08-30/
以上の2つのQについてもっと知りたい方
これは一般的にどこで見られる記述ですか?
Q3.
:-webkit-any(article,aside,nav,section) h1 { font-size: 1.5em; } :-moz-any(section, article, aside, nav) h1 { font-size: 25px; }
UAスタイルシートです
A3.
• https://developer.mozilla.org/en-US/docs/Web/CSS/%3Aany
どこに作用するマージンですか?
Q4.
-webkit-margin-after: 20px
コンテンツが横書きのブロックに対しては margin-bottom
の位置です
コンテンツが日本語縦書きのブロックに対しては margin-left
の位置です
A4.
• http://codepen.io/sekiyaeiji/pen/xwxZxR • http://momdo.github.io/css2/
box.html#margin-properties
2. UAスタイルシートとリセットCSS @kojika17 https://twitter.com/kojika17 株式会社まぼろし 久保知己さん http://www.slideshare.net/tomokikubo/ua-css
以上の2つのQについてもっと知りたい方
Hexコードで表すと何になりますか? そしてこの名前の由来は?
Q5.
color: rebeccapurple
color: #663399 CSSの標準規格に尽力したEric Meyerの愛娘で、脳腫瘍により6歳の若さで亡くなったRebecca Alison Meyerの名前に由来
A5.
• http://cpplover.blogspot.jp/2014/06/rebeccapurplecss-4-color.html
divのボーダー色は何色でしょう
Q6.
div { color: limegreen; border: 2px solid currentColor; } div { color: tomato; }
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
3. ご存じですか?colorプロパティ @GeckoTang https://twitter.com/GeckoTang 株式会社ピクセルグリッド 坂巻翔大郎さん http://geckotang.github.io/presentation-BacktoBasics-20150830/
以上の2つのQについてもっと知りたい方
以下は動作しないブラウザが存在する実装ですが、その理由はなぜですか?
Q7.
@keyframes foo { 0% { background-image: url("1.png"); } 100% { background-image: url("2.png"); } }
仕様です
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
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; }
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
4. background-(image|size) の深みへようこそ @kubosho_ https://twitter.com/kubosho_ 株式会社グラニ 久保田翔太さん http://www.slideshare.net/kubosho/backgroundimagesize
以上の2つのQについてもっと知りたい方
vhってなんですか?
Q9.
初期包含ブロックの縦幅に対する%
A9.
• http://jsfiddle.net/o_ti/vrxwkbwk/1/ • http://caniuse.com/#search=vh
以下のposition: fixedは無効になりますが、その理由はなぜですか?
Q10.
.wrap {transform: scale(0.8,1)}
.fixed {position: fixed}
<div class="wrap"> <div class="fixed">テキスト</div> </div>
未解決課題として未実装のままだからです。
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
5. position:fixed;チョットデキル @o_ti https://twitter.com/o_ti 株式会社まぼろし 伊藤由暁さん http://www.slideshare.net/o_ti/position-fixed-52224889
以上の2つのQについてもっと知りたい方
• CSSイベント「Back to Basics」 - html5jマーク
アップ部スピンオフ by Peatix • 2015/08/30 (日) 13:00 - 17:00 JST • 恵比寿ガーデンプレイスタワー 21F 株式会社
DMM.comラボ • http://peatix.com/event/105960
イベントの詳細
#btbcss • https://twitter.com/search?f=tweets&q=
%23btbcss
ハッシュ
メインセッション 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
ライトニングトーク 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
某社長...
※ LT者決定前、初期の参加者リスト、キャプっとかなかった悔み...
• 成長の超基本 : 知らないこと → 知ってること化
• 知らないことがあることを知る大切さ
• 情報収集しよう
• twitterも立派な情報収集ツール
• 聴講者一覧もイベントの質を測る指標になる
所感
@sekiyaeiji2015/08
ありがとうございました