カンファレンス」で行われた「DIST.30」に行ってきました!https://dist.connpass.com/event/155593/「一歩差がつくCSSテクニック」ということで、フロント側もできるアザラシになりたい私には良い話題です。冒頭で「CSSのプロパティ数いくつ言える?」な質問がありましたが、私は50個言えるかも微妙ですね...。CSSアニメーションに、なぜtransformを使ったほうが良いのか。DesignのCSS設計をみてこう!マテリアルデザインのお話です。「material-components-web」をnpmで入れると簡単に使えるようです。https://www.npmjs.com/package/material-components-webclassの付け替えで要素の追加や表現の変更も簡単にできるとのこと。Bootstrapに近い雰囲気を感じますね。対応しているそうです。アザラシ検定に入れてみるのも面白そうですね。デザインに統一性がなかったので。HTMLとCSSだけでつくるリアルな絵なんといってもリアルな水玉模様をCSSだけで出来ちゃうことにビックリですよ!「最近のCSSすげー!」ってなりますね!ここまでリアルな図形を作るかは別として、簡単な図形の作り方は覚えておくと役に立ちそう。画像使わないなら使わないに越したことはないですからね。「リアルな絵」に続いて「これCSSだけで描いてるの?」となる、そんなLTでした。タイトルの「狂気」に説得力があります。「作品」といったほうが適切では...?キーワードを挙げていたので、最低限覚えておくと良いものは把握できました。知らないプロパティいっぱいある...。令和元年ベストのfont-familyはこれだ各指定値に対して具体的に「いつこんな問題があったから」と説明があったため、結論に対して納得がいきますね。「何故そう結論付けたのか」が曖昧な発表があったりするので、しっかり解説があると非常に安心できます。しても「フォント関連でもあれこれ問題起きてるんだな~」というのが正直な印象です。font-familyは割と適当に設定しているのでちょっと怖くなりました。「currentColorのほうがプロっぽい」が個人的にツボでした。unsetとかも今日知りました。いう小技を把握できるのが勉強会の良いところです。レイアウトプリミティブレイアウトプリミティブの考え方のお話でした。責務をなるべく単純化して共通して利用しやすくする...みたいな感じですね。私的には「メディアクエリに依存させない」の部分が印象に残っています。「ブラウザサイズが大きい時に横幅が狭いセクションに入れたら意図しないレイアウトになる」と聞いたときは「なるほど」とすごく納得でした。アクセシビリティを高めるCSS「フォーカス時のスタイル」や「コンテンツの表示上の順序と文脈としての順序」など、普段意識しないと目の届きにくい部分のお話です。表示順の話が深く印象に残りました。HTMLも裏では「文章」であり、ゆえに意味的な順序が大切なわけですね。私もこういうところを正しくマークアップしていける人になりたい。2019」でも「覚醒するアクセシビリティ」という、似たようなお話を聞きましたね。それとは別の方のようですが、同じアクセシビリティに対する意気込みが感じられます。2019」に行ってきました!CSSアニメーションに、なぜtransformを使ったほうが良いのか。marginやpaddingなどを使用した場合と比べて、transformのほうがレンダリング時の処理数が少ないそうです。見た目上に変わりがなければ簡単に実装できる方法を採択しがちなので、しっかり覚えておきます。ちなみに「どのプロパティがどの処理を行うか」は以下のサイトから確認可能とのこと。Insightsに出ているけどよく分からなかったものを理解できました。結局のところ、CSSは書けば書くだけパースもレンダリングも遅くなるわけですね。不要なスタイルを削ることの意味がはっきりと分かります。パフォーマンスを高めるCSSCSSの圧縮や未使用スタイルの削除は把握していましたが、CSSの非同期読み込みやpreloadなどはよく知らなかったのでためになりました。最後のwebフォントのお話がぐぐっときました。.woffか.woff2が圧縮率が高くて良いとのことでしたが、作ったサイトはことごとく.ttfを使っておりました...。IE対応する気もないので、変えてしまいたいです。あとがきそんなわけで、DIST.30に参加してきました!今回発表されたスライドはすべて公開されるそうなので、気になる方はチェックしてみてください。ツイートこのブログを書いている人りべるんアザラシが大好きな山梨県産Webエンジニア。2019年3月よりフリーランスSEとして東京で活動中。