2019年12月 「DIST.30 一歩差がつくCSSテクニック」に行ってきました！

今回は12月13日に「中野セントラルパーク カンファレンス」で行われた「DIST.30」に行ってきました！

https://dist.connpass.com/event/155593/

「一歩差がつくCSSテクニック」ということで、フロント側もできるアザラシになりたい私には良い話題です。
冒頭で「CSSのプロパティ数いくつ言える？」な質問がありましたが、私は50個言えるかも微妙ですね…。

ということで、聴いてきたLT10本の簡単な内容と感想をご紹介します！

各LTの内容

Google Material DesignのCSS設計をみてこう！

マテリアルデザインのお話です。「material-components-web」をnpmで入れると簡単に使えるようです。
https://www.npmjs.com/package/material-components-web

classの付け替えで要素の追加や表現の変更も簡単にできるとのこと。Bootstrapに近い雰囲気を感じますね。
モダンなJSフレームワーク (Angular、React、Vue) にも対応しているそうです。
アザラシ検定に入れてみるのも面白そうですね。ちょうどデザインに統一性がなかったので。

HTMLとCSSだけでつくるリアルな絵

なんといってもリアルな水玉模様をCSSだけで出来ちゃうことにビックリですよ！「最近のCSSすげー！」ってなりますね！
ここまでリアルな図形を作るかは別として、簡単な図形の作り方は覚えておくと役に立ちそう。画像使わないなら使わないに越したことはないですからね。

CSSアニメーションの狂気

「リアルな絵」に続いて「これCSSだけで描いてるの？」となる、そんなLTでした。タイトルの「狂気」に説得力があります。
最早「作品」といったほうが適切では…？

キーワードを挙げていたので、最低限覚えておくと良いものは把握できました。
まだまだ知らないプロパティいっぱいある…。

令和元年ベストのfont-familyはこれだ

各指定値に対して具体的に「いつこんな問題があったから」と説明があったため、結論に対して納得がいきますね。
たまに「何故そう結論付けたのか」が曖昧な発表があったりするので、しっかり解説があると非常に安心できます。

にしても「フォント関連でもあれこれ問題起きてるんだな～」というのが正直な印象です。
font-familyは割と適当に設定しているのでちょっと怖くなりました。

継承するcolor

color: inherit; なお話ですね。
「currentColorのほうがプロっぽい」が個人的にツボでした。職場で使うとドヤ顔できるかも…！
その他ではall: unsetとかも今日知りました。こういう小技を把握できるのが勉強会の良いところです。

レイアウトプリミティブ

レイアウトプリミティブの考え方のお話でした。
責務をなるべく単純化して共通して利用しやすくする…みたいな感じですね。

私的には「メディアクエリに依存させない」の部分が印象に残っています。
「ブラウザサイズが大きい時に横幅が狭いセクションに入れたら意図しないレイアウトになる」と聞いたときは「なるほど」とすごく納得でした。

アクセシビリティを高めるCSS

「フォーカス時のスタイル」や「コンテンツの表示上の順序と文脈としての順序」など、普段意識しないと目の届きにくい部分のお話です。
特に表示順の話が深く印象に残りました。HTMLも裏では「文章」であり、ゆえに意味的な順序が大切なわけですね。私もこういうところを正しくマークアップしていける人になりたい。

ところで「WordCamp 2019」でも「覚醒するアクセシビリティ」という、似たようなお話を聞きましたね。
それとは別の方のようですが、同じアクセシビリティに対する意気込みが感じられます。

2019年11月 「WordCamp Tokyo 2019」に行ってきました！

CSSアニメーションに、なぜtransformを使ったほうが良いのか。

marginやpaddingなどを使用した場合と比べて、transformのほうがレンダリング時の処理数が少ないそうです。
見た目上に変わりがなければ簡単に実装できる方法を採択しがちなので、しっかり覚えておきます。

ちなみに「どのプロパティがどの処理を行うか」は以下のサイトから確認可能とのこと。
https://csstriggers.com/

CSSがパフォーマンスに与える影響

「FCP」や「FID」など、PageSpeed Insightsに出ているけどよく分からなかったものを理解できました。
結局のところ、CSSは書けば書くだけパースもレンダリングも遅くなるわけですね。不要なスタイルを削ることの意味がはっきりと分かります。

パフォーマンスを高めるCSS

CSSの圧縮や未使用スタイルの削除は把握していましたが、CSSの非同期読み込みやpreloadなどはよく知らなかったのでためになりました。

最後のwebフォントのお話がぐぐっときました。
.woffか.woff2が圧縮率が高くて良いとのことでしたが、作ったサイトはことごとく.ttfを使っておりました…。
今さらIE対応する気もないので、変えてしまいたいです。

あとがき

そんなわけで、DIST.30に参加してきました！
今回発表されたスライドはすべて公開されるそうなので、気になる方はチェックしてみてください。