q&aで振り返る「back to basics」 css 2015.08.30

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

Upload: eiji-sekiya

Post on 21-Apr-2017

2.003 views

Category:

Engineering


1 download

TRANSCRIPT

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

Q&Aで振り返る

「Back to Basics」 CSS 2015.08.30

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

普段なにげなく見過ごしている

W3CのCSS仕様

多くの発見と納得が存在することに

気づかせてくれたイベント

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

CSS Quiz!!

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

これは何を表す記述ですか?

Q1.

<shadow> = inset? && <length>{2,4} && <color>?

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

Value Definition CSSの値定義です

A1.

• http://momdo.github.io/css3-values/#component-combinators

• http://www.w3.org/TR/css3-values/#value-defs

Page 6: Q&Aで振り返る「Back to Basics」 CSS 2015.08.30
Page 7: Q&Aで振り返る「Back to Basics」 CSS 2015.08.30

a | b | c a || b || c

Value Definition Syntaxにおいて、以下の違いは何ですか?

Q2.

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

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

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

1. 基本の前の基礎知識 @ub_pnr https://twitter.com/ub_pnr 株式会社シフトブレイン 國仲 義則さん http://unformedbuilding.com/slide/back-to-basics-2015-08-30/

以上の2つのQについてもっと知りたい方

Page 10: Q&Aで振り返る「Back to Basics」 CSS 2015.08.30
Page 11: Q&Aで振り返る「Back to Basics」 CSS 2015.08.30

これは一般的にどこで見られる記述ですか?

Q3.

:-webkit-any(article,aside,nav,section) h1 { font-size: 1.5em; } :-moz-any(section, article, aside, nav) h1 { font-size: 25px; }

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

UAスタイルシートです

A3.

• https://developer.mozilla.org/en-US/docs/Web/CSS/%3Aany

Page 13: Q&Aで振り返る「Back to Basics」 CSS 2015.08.30
Page 14: Q&Aで振り返る「Back to Basics」 CSS 2015.08.30

どこに作用するマージンですか?

Q4.

-webkit-margin-after: 20px

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

コンテンツが横書きのブロックに対しては margin-bottom

の位置です

コンテンツが日本語縦書きのブロックに対しては margin-left

の位置です

A4.

• http://codepen.io/sekiyaeiji/pen/xwxZxR • http://momdo.github.io/css2/

box.html#margin-properties

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

2. UAスタイルシートとリセットCSS @kojika17 https://twitter.com/kojika17 株式会社まぼろし 久保知己さん http://www.slideshare.net/tomokikubo/ua-css

以上の2つのQについてもっと知りたい方

Page 17: Q&Aで振り返る「Back to Basics」 CSS 2015.08.30
Page 18: Q&Aで振り返る「Back to Basics」 CSS 2015.08.30

Hexコードで表すと何になりますか? そしてこの名前の由来は?

Q5.

color: rebeccapurple

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

color: #663399 CSSの標準規格に尽力したEric Meyerの愛娘で、脳腫瘍により6歳の若さで亡くなったRebecca Alison Meyerの名前に由来

A5.

• http://cpplover.blogspot.jp/2014/06/rebeccapurplecss-4-color.html

Page 20: Q&Aで振り返る「Back to Basics」 CSS 2015.08.30
Page 21: Q&Aで振り返る「Back to Basics」 CSS 2015.08.30

divのボーダー色は何色でしょう

Q6.

div { color: limegreen; border: 2px solid currentColor; } div { color: tomato; }

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

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

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

3. ご存じですか?colorプロパティ @GeckoTang https://twitter.com/GeckoTang 株式会社ピクセルグリッド 坂巻翔大郎さん http://geckotang.github.io/presentation-BacktoBasics-20150830/

以上の2つのQについてもっと知りたい方

Page 24: Q&Aで振り返る「Back to Basics」 CSS 2015.08.30
Page 25: Q&Aで振り返る「Back to Basics」 CSS 2015.08.30

以下は動作しないブラウザが存在する実装ですが、その理由はなぜですか?

Q7.

@keyframes foo { 0% { background-image: url("1.png"); } 100% { background-image: url("2.png"); } }

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

仕様です

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

Page 27: Q&Aで振り返る「Back to Basics」 CSS 2015.08.30
Page 28: Q&Aで振り返る「Back to Basics」 CSS 2015.08.30

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

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

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

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

4. background-(image|size) の深みへようこそ @kubosho_ https://twitter.com/kubosho_ 株式会社グラニ 久保田翔太さん http://www.slideshare.net/kubosho/backgroundimagesize

以上の2つのQについてもっと知りたい方

Page 31: Q&Aで振り返る「Back to Basics」 CSS 2015.08.30
Page 32: Q&Aで振り返る「Back to Basics」 CSS 2015.08.30

vhってなんですか?

Q9.

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

初期包含ブロックの縦幅に対する%

A9.

• http://jsfiddle.net/o_ti/vrxwkbwk/1/ • http://caniuse.com/#search=vh

Page 34: Q&Aで振り返る「Back to Basics」 CSS 2015.08.30
Page 35: Q&Aで振り返る「Back to Basics」 CSS 2015.08.30

以下のposition: fixedは無効になりますが、その理由はなぜですか?

Q10.

.wrap {transform: scale(0.8,1)}

.fixed {position: fixed}

<div class="wrap"> <div class="fixed">テキスト</div> </div>

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

未解決課題として未実装のままだからです。

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

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

5. position:fixed;チョットデキル @o_ti https://twitter.com/o_ti 株式会社まぼろし 伊藤由暁さん http://www.slideshare.net/o_ti/position-fixed-52224889

以上の2つのQについてもっと知りたい方

Page 38: Q&Aで振り返る「Back to Basics」 CSS 2015.08.30
Page 39: Q&Aで振り返る「Back to Basics」 CSS 2015.08.30

• CSSイベント「Back to Basics」 - html5jマーク

アップ部スピンオフ by Peatix • 2015/08/30 (日) 13:00 - 17:00 JST • 恵比寿ガーデンプレイスタワー 21F 株式会社

DMM.comラボ • http://peatix.com/event/105960

イベントの詳細

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

#btbcss • https://twitter.com/search?f=tweets&q=

%23btbcss

ハッシュ

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

メインセッション 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

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

ライトニングトーク 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

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

某社長...

※ LT者決定前、初期の参加者リスト、キャプっとかなかった悔み...

Page 44: Q&Aで振り返る「Back to Basics」 CSS 2015.08.30
Page 45: Q&Aで振り返る「Back to Basics」 CSS 2015.08.30

• 成長の超基本 : 知らないこと → 知ってること化

• 知らないことがあることを知る大切さ

• 情報収集しよう

• twitterも立派な情報収集ツール

• 聴講者一覧もイベントの質を測る指標になる

所感

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

@sekiyaeiji2015/08

ありがとうございました