BEGIN:VCALENDAR VERSION:2.0 PRODID:-//https://techplay.jp//JP CALSCALE:GREGORIAN METHOD:PUBLISH X-WR-CALDESC:CodeGridから読み解くイマドキのCSS（CSS Nite） X-WR-CALNAME:CodeGridから読み解くイマドキのCSS（CSS Nite） X-WR-TIMEZONE:Asia/Tokyo BEGIN:VTIMEZONE TZID:Asia/Tokyo BEGIN:STANDARD DTSTART:19700101T000000 TZOFFSETFROM:+0900 TZOFFSETTO:+0900 TZNAME:JST END:STANDARD END:VTIMEZONE BEGIN:VEVENT UID:806684@techplay.jp SUMMARY:CodeGridから読み解くイマドキのCSS（CSS Nite） DTSTART;TZID=Asia/Tokyo:20210312T200000 DTEND;TZID=Asia/Tokyo:20210312T220000 DTSTAMP:20260501T114028Z CREATED:20210128T140008Z DESCRIPTION:イベント詳細はこちら\nhttps://techplay.jp/event/80668 4?utm_medium=referral&utm_source=ics&utm_campaign=ics\n\nフォローア ップは3月15日にお送りします。当日観られずに後日の 視聴を予定されている方は、それまでお待ちください 。\n\n概要\n\nCodeGridの執筆者であり、ピクセルグリッド のフロントエンド・エンジニアを迎え、4本のセッショ ンで構成予定。\n\n当日参加できない方も、こちらにお 申し込みいただければ後日アーカイブ（録画）を視聴 いただけます。\n\nCodeGridから読み解くイマドキのCSS\n\n フロントエンドに関わる人々のためのオンラインメデ ィアとして、毎週配信されている「CodeGrid」。執筆者 であり、ピクセルグリッドのフロントエンド・エンジ ニアである4名を迎え、CodeGridの中でも主にCSSに関する 記事で反響が大きかったテーマを、4つのセッションで 取り上げます。\n\nCodeGridについて\n\nピクセルグリッド のフロントエンド・エンジニアが、現場で使った実感 から本当に実務に必要な知識を記事として配信する有 料オンラインメディア。\n\n基礎から最新トレンド情報 まで、毎週木曜日に最新記事が更新（月4回配信）。\nh ttps://www.codegrid.net/about/\n\nユーティリティファーストな CSS設計\n\nCSSは「どのように構造化するか？」を考えて 設計しないと、実装が進むにつれて破綻してしまう場 合があります。そのため、BEMなど、何かしらの方法で 部品ごとに分けて書く必要があります。\n\nしかし、そ のような部品をCSS設計の初期段階で見定めることの難 しさを現場で感じることはないでしょうか。また、近 年では、Vue.jsやReactなどのJavaScriptのUIフレームワーク やライブラリの登場で、部品の構造化を、CSSの必須の 責務としなくてもよいという考えも出てきました。そ のような変化を背景に、スタイル定義をした後に構造 化を考える、という手順で実装できる「ユーティリテ ィファーストなCSS設計」が、今、注目されています。\ n\nこのセッションでは、この「ユーティリティファー ストなCSS設計」を、CSSフレームワークのTailwind CSSを例 に紹介します。あらかじめ定義された、高さ、幅、余 白などの細かいセレクタでスタイル定義し、後からコ ンポーネントを抽出するという基本的な設計の流れを 解説し、さらにこのような設計はどのような場合に向 くのかということも考えます。CSS設計のさまざまな悩 みを解決する糸口としましょう。\n\n\n 中野 祐人（な かの・ゆうと）\n株式会社ピクセルグリッドJamstackエン ジニア\n大学在学中にWeb制作に興味を持ち、アルバイ トとしてWeb制作会社で勤務するほか、趣味でいくつか のWebサイトを制作する。最近ではJamstackでの開発に関 心があり、Nuxt.jsやGridsomeなどのフレームワークを使っ たWebサイトの制作を始める。2020年に株式会社ピクセル グリッドに入社。\n@uchoco898\n\n\n\nレスポンシブな空白 のつくり方\n\nWebサイトにおいて、見出しやボックスの 間に空白を入れることはよくあります。しかし、レス ポンシブなデザインを実装しようとして悩むことのひ とつに、PCとスマートフォンで変わってしまう余白の 扱いがあります。PCで見ていたときはちょうどよかっ た空白が、スマートフォンで表示すると空きすぎてし まっている、という経験はないでしょうか。\n\nこのセ ッションでは、ピクセルグリッドのコーポレートサイ トを例に、レスポンシブなデザインでも余白を可変さ せる方法を紹介します。以前はメディアクエリーくら いしかなかったこの表現も、最近はCSSの進歩によりバ リエーションが出てきています。いくつかの方法を知 ることで、さまざまな状況においても上手に余白を使 えるスキルを身に着けましょう。\n\n\n 矢倉 眞隆（や くら・まさたか）\n株式会社ピクセルグリッドフロン トエンド・エンジニア\nウェブ制作会社にフロントエ ンド・エンジニアとして携わった後、フリーランサー を経て、2016年10月に株式会社ピクセルグリッドへ入社 。ウェブ標準技術やブラウザの動向を追うのが趣味。\ n@myakura\n\n\n\nCSS GridとFlexboxの使い分けるコツ\n\nCSS Grid は、多くのブラウザで利用できるようになり、グリッ ドレイアウトする上では欠かせない機能となってきま した。同様に、Flexboxを利用してレイアウトしている人 も多いでしょう。しかし、似たようなレイアウトがで きる機能であるので、実装の際にどちらを使うとよい のかと悩んでしまう、という声を聞きます。\n\nこのセ ッションでは、「CSS GridやFlexboxは知っているけど、そ れらをどう使い分けたらよいのか迷ってしまう」とい う方を対象に、実務でよく扱う特徴的なレイアウトを 例に、使い分けの判断材料となる考え方を学びます。 実務において短時間で実装方針を決定できるよう、そ の勘所を身につけることを目指しましょう。\n\n\n 坂 巻 翔大郎（さかまき・しょうたろう）\n株式会社ピク セルグリッドフロントエンド・エンジニア\n大手ソフ トウェアダウンロード販売会社、Web制作会社などで、 マークアップエンジニア、プログラマ、サービス企画 、ディレクターを経験。2013年、株式会社ピクセルグリ ッドに入社。HTML、CSS、JavaScriptなどをオールラウンド に担当。とりわけ、プログラマブルなCSSの設計、実装 を得意とする。\n@geckotang\n\n\nマークアップエンジニア がライトに使うVue.js\n\n最近のWeb制作の現場では、マー クアップエンジニアも、JavaScriptを知っているとHTML/CSS を実装しやすい場面が出てきました。しかし、JavaScript フレームワークというと、使ったことがないマークア ップエンジニアは、難しそうに感じていないでしょう か。または、すでに使っていても、設定がめんどくさ いと思っている人もいるかもしれません。\n\nVue.jsは、 特別なビルド環境なしでも使え、JavaScriptフレームワー クの中でも「手軽に使える」と言えるものです。この セッションでは、JavaScriptも使えるようになっていきた いと思っているマークアップエンジニアを対象に、Vue. jsの特徴を活かした利用方法を紹介します。Vue.jsを触 ったことがない人には使うきっかけを、すでにVue.jsを 使っている人には手軽にプロトタイプを作る例を共有 します。\n\n\n 小山田 晃浩（おやまだ・あきひろ）\n 株式会社ピクセルグリッドフロントエンド・エンジニ ア\n2006年よりWeb制作会社にてUI実装や運用業務を経験 した後、2010年に株式会社ピクセルグリッドに入社。こ れまでの経験の大半は大規模Webサイトの壊れにくいHTML ／CSS設計、及び実装。また、SVG、Canvas、WebGLの扱いも 得意としている。外部に向けたアウトプットも積極的 に行っており、カンファレンスでの講演などを多数こ なしている。three.jsのCSS3DRendererのコントリビューター 。2011年から2020年まで10連続でMicrosoft MVP for IEを受賞。\ n@yomotsu\n\n\nイベント概要\n\n\n開催日：2021年3月12日[金] 20:00-22:00\n形式：オンライン（Zoomウェビナー）\n参加費 ：3\,600円（カード決済）、4\,000円（銀行振込）\n\n\nCode Grid購読者：2\,800円\n\n\n\n終演時間は若干の延長の可能 性があります。また、終了後、1時間を目安にアフター トーク的なものを行い、取りこぼしたQ&Aなどを取り上 げます。\n\n当日の進行などに関して\n\n\n19:50以降にZoom にログインしてください。Zoomアプリは最新版にしてお くことをオススメします。\nZoomウェビナーのため、参 加される方のカメラ、マイクは自動的にオフになって います（オンにできません）。\n質問事項は、Zoomウェ ビナー内の「Q&A」でなく、Sli.doにご記入ください。\nht tps://app.sli.do/event/mxluswmm\nツイートされる場合、ハッシ ュタグは「#cssnite」をお付けください。\n\n\n視聴環境\n \nハンズオンとして参加される方は、Zoomの視聴用のデ バイスと操作用のPCを分けてご用意いただくのがオス スメです。\n\n\n操作用のPC\nZoom視聴用のデバイス（PC/ タブレット/スマホ）\n\n\nその他\n\n開催前に「カウン トダウンメール」、開催後に「フォローアップメール 」をお送りします。こちらを必ずご一読ください。 LOCATION:オンライン URL:https://techplay.jp/event/806684?utm_medium=referral&utm_source=ics&utm _campaign=ics END:VEVENT END:VCALENDAR