CSSイベント「Back to Basics」 | Peatix : http://peatix.com/event/105960

Togetterまとめ : http://togetter.com/li/867476

2015年8月30日(日)に恵比寿ガーデンプレイスタワーで開催された、Back to Basicsに参加しました。13:00〜19:00（懇親会含）と長時間のイベントでしたが、どのセッションも興味深いものばかりで、あっというまの６時間でした。

全セッション・LTについて書いていますのでとっても長くなりましたが、復習できてよかったです。

イケないことや変なこと書いてたら即座に修正しますのでお知らせくださいませ。（@mt_dew2）

1. 基本の前の基礎知識（@ub_pnr さん）

https://twitter.com/ub_pnr/status/637866768476667904

• 宣言（property:value ）から宣言ブロック、スタイルルール、@ルール、コメントのお話
• プロパティ仕様の読み方
• 値の構文
• プロパティに指定できる型と単位

※↑はオリジナルの目次と異なる自分用のまとめです。（以下同様）

一番目にこのセッションがあってよかった！仕様書を読み慣れてない人（私とか）なら、コレを見るだけで仕様書がどんなもんかわかったような気になれると思います。とってもわかりやすいスライドで、仕様書って楽しそう！と思わせてもらいました。

2. UAスタイルシートとリセットCSS（@kojika17 さん）

https://twitter.com/kojika17/status/637857572452564993

• UAスタイルシートのお話
• ↑を踏まえて、Reset.css(Normalize.css)のお話

（@kojika17 さんは過去にもブログでデフォルトスタイルシートについて書いてくださっています。とても好きな記事です。）
デフォルトスタイルシートから考える、リセットCSSの留意点｜Web Design KOJIKA17

http://kojika17.com/2012/09/reset-css-from-default-style-sheet.html

3.ご存じですか？colorプロパティ（@GeckoTang さん）

https://twitter.com/GeckoTang/status/637866434740137984

• colorプロパティは文字の色を決めるプロパティではない
• colorプロパティが影響するその他プロパティ
• currentColorと使い方の例
• tomatoについて（番外編・スライドにはありません）

currentColor、使い方によっては超ベンリだということがわかりましたので使える機会をうかがっていきたいです。

余った時間でtomato（ ■ #ff6347）についてお話されていました。@GeckoTangさんがトマト好きなわけではないそうです。

LTのお時間

LT1. CSSで固定比率レイアウト（@yoshiko_pg さん）

https://twitter.com/yoshiko_pg/status/637865526438424576

• widthを基準にheightを％指定する方法
• スライドのおまけ（当日話してない内容）がイイ！

LT2. Evaluating your stylesheets（@t32k さん）

• StyleStats - An evaluating tool for writing better CSS. : (http://www.stylestats.org/)[http://www.stylestats.org/]
• 好きなウェブページをStyleStatsにつっこむ遊び楽しいです。

LT3. お前は table-cell に position: relativeできなかった人の数を覚えているのか（ @debiru さん）

https://twitter.com/debiru/status/637813897420890112

• Firefoxの伸び代について
• table-cell に position: relative できず苦しんだ人々がいたことを忘れません

LT4. PostCSS 5.0: for Custom CSS Preprocessing（@morishitter_ さん）

https://twitter.com/morishitter_/status/637874565792854016

• PostCSS 使ってみます。
• @morishitter_ さんは若くて勢いがすごい PostCSSエヴァンジェリスト。

LT5. みんなCodePenつかってる？（@hiloki さん）

https://twitter.com/hiloki/status/637884127006490624

• CodePenでスライドつくってらした！すてき。

LT6. @charset（@myakura さん）

https://twitter.com/myakura/status/638404006490968064

• @charset 書いて安心してはいけない。
• エンコーディングが決まるとき@charsetの優先順位は高くない…。←知りませんでした。

LT7. パフォーマンスを発揮するためのCSS（@448jpさん）

https://twitter.com/448jp/status/637879035125633024

• パフォーマンスの改善について。個人的には今一番興味のある話題でした。
• もっと詳しくお聞きしたい。

4.background-(image|size) の深みへようこそ（@kubosho_ さん）

https://twitter.com/kubosho_/status/637924205774802945

• background-size や background-image について
• 背景レイヤーの数は background-image で指定された値の数で決まる。
• 背景レイヤーの数と、background-* プロパティに指定できる値の数の関係
• 画像の内在サイズがない場合、background-size: auto は contain になる

@kubosho_さんが冒頭でおっしゃっていたように、謎の挙動をすることがあったbackground関連のプロパティ、このお話を聞いた今の私なら攻略できる気がします。

5.position:fixed;チョットデキル（@o_ti さん）

https://twitter.com/o_ti/status/637926154876268548

• 美味しそうなTKG
• positionのバグ（仕様上未解決）について
• position: fixed のない生活
• どうしても使わなければいけない場合の対処

私は MBA 11inch を愛用しておりますが、お話（スライド）にあったように大きなモーダルウィンドウが閉じられなかったり、ヘッダーから展開されたドロップダウンメニューのリンクが隠れてしまいクリックできないことが日常的にあります。fixedはあんまりしないでほしいです。

以上でございます。

このイベントに参加して本当によかったです。

便利ツール等々はどんどん新しいものが出てくるし、流行り廃りもあるし、それに振り回されて目の回る日々を送っていましたが、このイベントに参加したことで基礎の大切さを知り、自分の基礎知識のゆるさを痛感しました。問題にぶちあたるストレスを解消する一番の近道は仕様書にあるのかもしれません。基礎大事！

「基礎に立ち返る」テーマの中級者向けイベントってナカナカないので、貴重ですね。次回を楽しみにしています。

仕様書のもくもく会とかあれば行きたいし、誰かやりませんかー！オンラインでもいいです。お願いします。

おわり

2015/10/04 追記
今更追記するのも遅すぎるのですが、この記事を公開した直後に@kubosho_さんが仕様書もくもく会のコミュニティをつくってくださいまして、一応私も主催者になりました。（言い出しっぺとして）
9/28(月)に第一回目のもくもく会を開催しましたが、なかなか盛り上がったとおもいます。楽しかったです。
https://tokyo-css-module-specs.doorkeeper.jp/