CSS Talk vol.2で登壇しました
1月28日(土)、TAMコワーキングで開催された「CSS Talk vol.2」に参加いたしました。前回もいろいろとためになる話を聞くことができてその後の仕事の参考にさせていただいておりますが、今回は無謀にも登壇側として手を挙げてFlexboxについて話をいたしました。
14時にセッションスタート。以下ざっくりと振り返ります。
数が増えてもこわくない！Quantity Queries の紹介
森田かすみさん(有限会社アップルップル)
www.slideshare.net
「何番目から何番目までの要素にスタイルを適用する」といった使い方のできるQuantity Queriesの紹介とデモ。これを使うことでリスト中の一部のみにスタイルを適用したい時などかなり柔軟性が増しそうです。
早速仕事で書いているコードに入れています(・∀・)
IE9を斬ってFlexboxを使い始めたらサクサク捗った件
森永哲平(株式会社グラッドキューブ)
2番目は私。IE9などのブラウザ動向、そしてFlexboxを使い始めたらどう便利になったかの話とデモを行いました。
最初の森田さんのセッションがすごく良かった上に「IE9でも使える」……その次に「IE9は捨てる」という話、しかも随所に明らかにウケ狙いがあってスベったりしないか等少し不安になりましたが、そこそこ評判は良かった……と思います。
デモでは「flex-direction: column-reverse」で驚かれた方も場内にいました。これ本当に便利ですよ。
デモと参考資料についてのページを別途作りましたのでご参照下さい。column-reverseは「デモ3-2」のCSSコード(18行目)を編集することで試すことができます。
CSSのカスタム・プロパティと cssnext
松尾浩志さん(TAM)
カスタム・プロパティもcssnextも便利そう、そして実際に試してみたら……という話。現時点ではまだうまくいかないようですが、将来使えるようになってくればいいな、とは感じます。
ブラウザのデフォルトスタイルを見てみよう
Kiteさん(KITERETZ)
各ブラウザのデフォルトスタイルの一例を見てみると……意外と共通しているものも多かったりそうでないものもあったり。たしかに違いがわかればコードのムダは減りますね。
しかし今回出た例では「Edgeだけ違う」ものがいくつか。IEからEdgeになって(デフォルトスタイルシートという点では)かえって悪くなったのでしょうか？
コンポーネント指向と余白の設計
安田学さん(TAM)
www.slideshare.net
Atomic Designでのコンポーネントの粒度、そして余白のパターンの話。前回のOOCSSの話もそうですが、安田さんのセッションではこれまであまり意識していなかった点に気づくことが多く勉強になります。
セッション後は懇親会でピザとアルコールをいただきつつ参加者の皆さんといろいろな話で盛り上がり親睦を深めました。
私のセッションの感想もいろいろ聞きましたが、先にも書いたように概ね好評だったようでホッとしています。これまでFlexboxを使っていなかった方から「使ってみます」という声をいただいた時はこのセッションをやって良かったと感じました( ´∀｀)
参加者の皆さん、TAMのスタッフの皆さん、お疲れ様でした＆ありがとうございました。次回はデザイナー/ディレクター向けの内容とのことなので多分登壇しないと思いますが、また機会があれば登壇したいと考えております。
ネタもいくつかあたためております(・∀・)
最後に一言。
Flexboxはいいぞ。
