Submit Search
Upload
Q&Aで振り返る「Back to Basics」 CSS 2015.08.30
•
14 likes
•
2,634 views
eiji sekiya
Follow
2015/08/30に開催された『CSSイベント「Back to Basics」』の内容が非常に有用だったので、クイズ形式で振り返ってみました
Read less
Read more
Engineering
Slideshow view
Report
Share
Slideshow view
Report
Share
1 of 46
Download now
Download to read offline
Recommended
Try Web Components
Try Web Components
拓樹 谷
ブラウザとmidiの出会いが拓くwebとmusicの新しい世界
ブラウザとmidiの出会いが拓くwebとmusicの新しい世界
Ryoya Kawai
"今" 使えるJavaScriptのトレンド
"今" 使えるJavaScriptのトレンド
Hayato Mizuno
デザインからはじめよう
デザインからはじめよう
Yusuke Kondo
DeNAでのverticaを活用したアナリスト業務のご紹介
DeNAでのverticaを活用したアナリスト業務のご紹介
Sho Kohigashi
中の下のエンジニアを脱出するための仕事術
中の下のエンジニアを脱出するための仕事術
Noriaki Kadota
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
深層学習による機械とのコミュニケーション
深層学習による機械とのコミュニケーション
Yuya Unno
Recommended
Try Web Components
Try Web Components
拓樹 谷
ブラウザとmidiの出会いが拓くwebとmusicの新しい世界
ブラウザとmidiの出会いが拓くwebとmusicの新しい世界
Ryoya Kawai
"今" 使えるJavaScriptのトレンド
"今" 使えるJavaScriptのトレンド
Hayato Mizuno
デザインからはじめよう
デザインからはじめよう
Yusuke Kondo
DeNAでのverticaを活用したアナリスト業務のご紹介
DeNAでのverticaを活用したアナリスト業務のご紹介
Sho Kohigashi
中の下のエンジニアを脱出するための仕事術
中の下のエンジニアを脱出するための仕事術
Noriaki Kadota
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
深層学習による機械とのコミュニケーション
深層学習による機械とのコミュニケーション
Yuya Unno
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
知己 久保
CSS Design and Programming
CSS Design and Programming
Taku AMANO
about CSS3 vol.2
about CSS3 vol.2
kousuke inamoto
Internet Explorer 10とマイクロソフトにとってのHTML5
Internet Explorer 10とマイクロソフトにとってのHTML5
Microsoft
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
Naoki Matsuda
[Japanese] Style validator-html5etcstudy20151125
[Japanese] Style validator-html5etcstudy20151125
Takeharu Igari
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Toshiro Shimizu
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
2017: A CSS Design Odyssey
2017: A CSS Design Odyssey
Kenjiro Kubota
CSSシークレットはどのような書籍か【映像あり】
CSSシークレットはどのような書籍か【映像あり】
Japan Electronic Publishing Association
ASP.NET CoreとAzure AD B2Cを使ったサクっと認証
ASP.NET CoreとAzure AD B2Cを使ったサクっと認証
Yuta Matsumura
サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所
サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所
真吾 吉田
Oocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話も
Yumi uniq Ishizaki
React で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考える
Yutaro Miyazaki
HTML5 on ASP.NET
HTML5 on ASP.NET
Fujio Kojima
Gtug girls-20140828
Gtug girls-20140828
Daichi Morifuji
WordCamp Kansai 2015 CI ハンズオン
WordCamp Kansai 2015 CI ハンズオン
タカシ キタジマ
Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」
Hideki Akiba
First sass
First sass
Toshiaki Sasaki
CSS3がやってきた
CSS3がやってきた
kousuke inamoto
ぐるなびあるあるLt2017
ぐるなびあるあるLt2017
eiji sekiya
フロントエンド実装 グロースのポイント
フロントエンド実装 グロースのポイント
eiji sekiya
More Related Content
Similar to Q&Aで振り返る「Back to Basics」 CSS 2015.08.30
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
知己 久保
CSS Design and Programming
CSS Design and Programming
Taku AMANO
about CSS3 vol.2
about CSS3 vol.2
kousuke inamoto
Internet Explorer 10とマイクロソフトにとってのHTML5
Internet Explorer 10とマイクロソフトにとってのHTML5
Microsoft
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
Naoki Matsuda
[Japanese] Style validator-html5etcstudy20151125
[Japanese] Style validator-html5etcstudy20151125
Takeharu Igari
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Toshiro Shimizu
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
2017: A CSS Design Odyssey
2017: A CSS Design Odyssey
Kenjiro Kubota
CSSシークレットはどのような書籍か【映像あり】
CSSシークレットはどのような書籍か【映像あり】
Japan Electronic Publishing Association
ASP.NET CoreとAzure AD B2Cを使ったサクっと認証
ASP.NET CoreとAzure AD B2Cを使ったサクっと認証
Yuta Matsumura
サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所
サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所
真吾 吉田
Oocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話も
Yumi uniq Ishizaki
React で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考える
Yutaro Miyazaki
HTML5 on ASP.NET
HTML5 on ASP.NET
Fujio Kojima
Gtug girls-20140828
Gtug girls-20140828
Daichi Morifuji
WordCamp Kansai 2015 CI ハンズオン
WordCamp Kansai 2015 CI ハンズオン
タカシ キタジマ
Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」
Hideki Akiba
First sass
First sass
Toshiaki Sasaki
CSS3がやってきた
CSS3がやってきた
kousuke inamoto
Similar to Q&Aで振り返る「Back to Basics」 CSS 2015.08.30
(20)
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
CSS Design and Programming
CSS Design and Programming
about CSS3 vol.2
about CSS3 vol.2
Internet Explorer 10とマイクロソフトにとってのHTML5
Internet Explorer 10とマイクロソフトにとってのHTML5
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
[Japanese] Style validator-html5etcstudy20151125
[Japanese] Style validator-html5etcstudy20151125
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
2017: A CSS Design Odyssey
2017: A CSS Design Odyssey
CSSシークレットはどのような書籍か【映像あり】
CSSシークレットはどのような書籍か【映像あり】
ASP.NET CoreとAzure AD B2Cを使ったサクっと認証
ASP.NET CoreとAzure AD B2Cを使ったサクっと認証
サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所
サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所
Oocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話も
React で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考える
HTML5 on ASP.NET
HTML5 on ASP.NET
Gtug girls-20140828
Gtug girls-20140828
WordCamp Kansai 2015 CI ハンズオン
WordCamp Kansai 2015 CI ハンズオン
Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」
First sass
First sass
CSS3がやってきた
CSS3がやってきた
More from eiji sekiya
ぐるなびあるあるLt2017
ぐるなびあるあるLt2017
eiji sekiya
フロントエンド実装 グロースのポイント
フロントエンド実装 グロースのポイント
eiji sekiya
Webサービスにおける Surface Pro 3 対応とは
Webサービスにおける Surface Pro 3 対応とは
eiji sekiya
マークアップ講座 04 jQuery - JavaScript
マークアップ講座 04 jQuery - JavaScript
eiji sekiya
マークアップ講座 03 スマートフォン・デバイス最適化
マークアップ講座 03 スマートフォン・デバイス最適化
eiji sekiya
マークアップ講座 02 CSS
マークアップ講座 02 CSS
eiji sekiya
マークアップ講座 01b HTML
マークアップ講座 01b HTML
eiji sekiya
マークアップ講座 01a プロローグ
マークアップ講座 01a プロローグ
eiji sekiya
More from eiji sekiya
(8)
ぐるなびあるあるLt2017
ぐるなびあるあるLt2017
フロントエンド実装 グロースのポイント
フロントエンド実装 グロースのポイント
Webサービスにおける Surface Pro 3 対応とは
Webサービスにおける Surface Pro 3 対応とは
マークアップ講座 04 jQuery - JavaScript
マークアップ講座 04 jQuery - JavaScript
マークアップ講座 03 スマートフォン・デバイス最適化
マークアップ講座 03 スマートフォン・デバイス最適化
マークアップ講座 02 CSS
マークアップ講座 02 CSS
マークアップ講座 01b HTML
マークアップ講座 01b HTML
マークアップ講座 01a プロローグ
マークアップ講座 01a プロローグ
Q&Aで振り返る「Back to Basics」 CSS 2015.08.30
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
6.
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についてもっと知りたい方
10.
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
13.
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についてもっと知りたい方
17.
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
20.
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についてもっと知りたい方
24.
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
27.
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についてもっと知りたい方
31.
32.
vhってなんですか? Q9.
33.
初期包含ブロックの縦幅に対する% A9. • http://jsfiddle.net/o_ti/vrxwkbwk/1/ • http://caniuse.com/#search=vh
34.
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についてもっと知りたい方
38.
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者決定前、初期の参加者リスト、キャプっとかなかった悔み...
44.
45.
• 成長の超基本 :
知らないこと → 知ってること化 • 知らないことがあることを知る大切さ • 情報収集しよう • twitterも立派な情報収集ツール • 聴講者一覧もイベントの質を測る指標になる 所感
46.
@sekiyaeiji2015/08 ありがとうございました
Download now