【TAM勉強会】満員御礼！CSS Talk Vol.2「エンジニア向け」を開催しました。
「CSS Talk」はCSSをテーマに話をする勉強会です。CSSに関する情報を、職種に関係なく共有・コミュニケーションができる場所として開催しています。このほど、TAMコワーキング大阪にて、第2回目は「エンジニア向け」をテーマとしてCSS Talk Vol.2を開催しました。
概要
日時：2017-01-28（土）14:00 – 18:00
イベントページ
セッション
セッションとスライドです。TAMからは松尾と安田が登壇しました。
1. 「[数が増えてもこわくない！Quantity Queries の紹介]」 森田かすみさん
2. 「[IE9を斬ってFlexboxを使い始めたらサクサク捗った件]」 森永哲平さん
3. 「[CSSのカスタム・プロパティと cssnext]」 松尾浩志
4. 「[各ブラウザのデフォルトスタイルを見てみよう]」 Kiteさん
5. 「[コンポーネント指向と余白の設計]」 安田学
ハッシュタグの#csstalkはTogetterにてまとめていただいています。
以下セッションの要約です。
「[数が増えてもこわくない！Quantity Queries の紹介]」 森田かすみさん
Quantity Queries（クエンティークエリーズ）という要素の数を指定したCSSの書き方です。
例えば、「5つ以上要素があった場合」や「5つ要素があった場合」、「要素が5つ以下の場合」のように要素の数によってCSSを指定することができます。
森田かすみさんは「デザイナーさんが作ってくださった本当に良いデザインをできるだけ実装できるように色々な方法を知っておきたい」「CMSのようなお客様が更新されるサイトでは、想定していなかったデザイン崩れが起きることがある。これを事前に防ぐことができる可能性のある書き方です」とおっしゃっていました。
「[IE9を斬ってFlexboxを使い始めたらサクサク捗った件]」 森永哲平さん
自社サイトをFlexboxという柔軟なレイアウトを指定できるCSSプロパティで実装したときの話です。
Flexboxを使うにはIE11以降の対応になるけれど、ブラウザのシェアを見ていくと使える時期になってきています。JavaScriptのライブラリを使えば機能は制限されるけどIE9でも使うことができます。
Flexboxを使うと今までのCSSが苦手としてきたレイアウトが簡単にできます。多少のバグがあるので気をつけることもありますが、工数は削減することができたそうです。
「[CSSのカスタム・プロパティと cssnext]」松尾浩志
カスタム・プロパティというのはCSSにおける変数のひとつです。継承ができたり、JavaScriptで取得することができるので、より柔軟にCSSを書ける可能性があります。ただし、新しい仕様なのでIEが対応しておらず、そのまま使うことはできません。
解決策として、cssnextという今からでも使えるように書き換えてくれるツールがあります。そのままの機能を使うことはできませんが、標準仕様にもとづいた書き方ができるのは大きなメリットです。
「将来的には使うであろうものなので、今からでも少しずつ触ってみては？」とおっしゃっていました。
「[各ブラウザのデフォルトスタイルを見てみよう]」 Kiteさん
ChromeやIE、FireFoxなどたくさんのブラウザがあります。ブラウザはレンダリングエンジンというもので分類することができ、それぞれのブラウザはユーザーエージェントスタイルシートと呼ばれるスタイルを持っています。
スタイルシートを見てみると意外と同じようなスタイルを持っていることが分かります。その理由を考えたり、使われている書き方を調べることで、新たな発見があります。
「[コンポーネント指向と余白の設計]」安田学
コンポーネント指向とはページにある要素を小さな部品で作っていく考え方です。デザインの再利用ができるので、デザイナーにとってもメリットがあります。
コンポーネントを作っていくうえでの指針として「Atomic Design」を利用したり、レイアウトを考える時の8つのパターンをベースにすることを紹介しています。
全体的な感想
今回の勉強会もいろいろなテーマのセッションがありました。
質問コーナーが盛り上がったり、ツイートもたくさんしていただけたのを見て、楽しんでいただけたのかなと感じました。懇親会も前回同様、アルコールとピザをつまみながらリラックスした雰囲気で楽しそうにお話しをされていました。
次回は春頃の開催を予定しています。テーマは「デザイナー・ディレクター向け」のものになります。
「デザイナーから見たCSS」についてでもいいですし、「エンジニアからデザイナーに向けたCSSの話」でも面白そうです。
登壇してみたいという方がいらっしゃれば「Doorkeper」のお問い合わせページにご連絡ください。
みなさん、ご参加いただきましてありがとうございました。
