CodeGridから読み解くイマドキのCSS（CSS Nite）

フォローアップは3月15日にお送りします。当日観られずに後日の視聴を予定されている方は、それまでお待ちください。

概要

CodeGridの執筆者であり、ピクセルグリッドのフロントエンド・エンジニアを迎え、4本のセッションで構成予定。

当日参加できない方も、こちらにお申し込みいただければ後日アーカイブ（録画）を視聴いただけます。

CodeGridから読み解くイマドキのCSS

フロントエンドに関わる人々のためのオンラインメディアとして、毎週配信されている「CodeGrid」。執筆者であり、ピクセルグリッドのフロントエンド・エンジニアである4名を迎え、CodeGridの中でも主にCSSに関する記事で反響が大きかったテーマを、4つのセッションで取り上げます。

CodeGridについて

ピクセルグリッドのフロントエンド・エンジニアが、現場で使った実感から本当に実務に必要な知識を記事として配信する有料オンラインメディア。

基礎から最新トレンド情報まで、毎週木曜日に最新記事が更新（月4回配信）。
https://www.codegrid.net/about/

ユーティリティファーストなCSS設計

CSSは「どのように構造化するか？」を考えて設計しないと、実装が進むにつれて破綻してしまう場合があります。そのため、BEMなど、何かしらの方法で部品ごとに分けて書く必要があります。

しかし、そのような部品をCSS設計の初期段階で見定めることの難しさを現場で感じることはないでしょうか。また、近年では、Vue.jsやReactなどのJavaScriptのUIフレームワークやライブラリの登場で、部品の構造化を、CSSの必須の責務としなくてもよいという考えも出てきました。そのような変化を背景に、スタイル定義をした後に構造化を考える、という手順で実装できる「ユーティリティファーストなCSS設計」が、今、注目されています。

このセッションでは、この「ユーティリティファーストなCSS設計」を、CSSフレームワークのTailwind CSSを例に紹介します。あらかじめ定義された、高さ、幅、余白などの細かいセレクタでスタイル定義し、後からコンポーネントを抽出するという基本的な設計の流れを解説し、さらにこのような設計はどのような場合に向くのかということも考えます。CSS設計のさまざまな悩みを解決する糸口としましょう。

レスポンシブな空白のつくり方

Webサイトにおいて、見出しやボックスの間に空白を入れることはよくあります。しかし、レスポンシブなデザインを実装しようとして悩むことのひとつに、PCとスマートフォンで変わってしまう余白の扱いがあります。PCで見ていたときはちょうどよかった空白が、スマートフォンで表示すると空きすぎてしまっている、という経験はないでしょうか。

このセッションでは、ピクセルグリッドのコーポレートサイトを例に、レスポンシブなデザインでも余白を可変させる方法を紹介します。以前はメディアクエリーくらいしかなかったこの表現も、最近はCSSの進歩によりバリエーションが出てきています。いくつかの方法を知ることで、さまざまな状況においても上手に余白を使えるスキルを身に着けましょう。

CSS GridとFlexboxの使い分けるコツ

CSS Gridは、多くのブラウザで利用できるようになり、グリッドレイアウトする上では欠かせない機能となってきました。同様に、Flexboxを利用してレイアウトしている人も多いでしょう。しかし、似たようなレイアウトができる機能であるので、実装の際にどちらを使うとよいのかと悩んでしまう、という声を聞きます。

このセッションでは、「CSS GridやFlexboxは知っているけど、それらをどう使い分けたらよいのか迷ってしまう」という方を対象に、実務でよく扱う特徴的なレイアウトを例に、使い分けの判断材料となる考え方を学びます。実務において短時間で実装方針を決定できるよう、その勘所を身につけることを目指しましょう。

マークアップエンジニアがライトに使うVue.js

最近のWeb制作の現場では、マークアップエンジニアも、JavaScriptを知っているとHTML/CSSを実装しやすい場面が出てきました。しかし、JavaScriptフレームワークというと、使ったことがないマークアップエンジニアは、難しそうに感じていないでしょうか。または、すでに使っていても、設定がめんどくさいと思っている人もいるかもしれません。

Vue.jsは、特別なビルド環境なしでも使え、JavaScriptフレームワークの中でも「手軽に使える」と言えるものです。このセッションでは、JavaScriptも使えるようになっていきたいと思っているマークアップエンジニアを対象に、Vue.jsの特徴を活かした利用方法を紹介します。Vue.jsを触ったことがない人には使うきっかけを、すでにVue.jsを使っている人には手軽にプロトタイプを作る例を共有します。

イベント概要

• 開催日：2021年3月12日[金] 20:00-22:00
• 形式：オンライン（Zoomウェビナー）
• 参加費：3,600円（カード決済）、4,000円（銀行振込）
  • CodeGrid購読者：2,800円

終演時間は若干の延長の可能性があります。また、終了後、1時間を目安にアフタートーク的なものを行い、取りこぼしたQ&Aなどを取り上げます。

当日の進行などに関して

• 19:50以降にZoomにログインしてください。Zoomアプリは最新版にしておくことをオススメします。
• Zoomウェビナーのため、参加される方のカメラ、マイクは自動的にオフになっています（オンにできません）。
• 質問事項は、Zoomウェビナー内の「Q&A」でなく、Sli.doにご記入ください。 https://app.sli.do/event/mxluswmm
• ツイートされる場合、ハッシュタグは「#cssnite」をお付けください。

視聴環境

ハンズオンとして参加される方は、Zoomの視聴用のデバイスと操作用のPCを分けてご用意いただくのがオススメです。

• 操作用のPC
• Zoom視聴用のデバイス（PC/タブレット/スマホ）

その他

開催前に「カウントダウンメール」、開催後に「フォローアップメール」をお送りします。こちらを必ずご一読ください。