Doorkeeper

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

2021-03-12(金)20:00 - 22:00 JST
オンライン リンクは参加者だけに表示されます。
申し込む

申し込み受付は終了しました

今後イベント情報を受け取る

事前購入(カード決済) 3,600円 前払い
事前購入(銀行振込) 4,000円 前払い
CodeGrid購読者 2,800円 前払い
協賛企業枠 無料
出演者、スタッフ 無料

詳細

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

アーカイブ

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

https://youtu.be/OKXKftvyll8

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

https://youtu.be/2D-h3CJDe1c

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

https://youtu.be/wlzzpsG09bY

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

https://youtu.be/5OJ0jvrjl-g

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

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

CodeGridについて

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

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

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

CSSをどのように書くか? というのは悩ましい問題です。BEMなどのCSS設計手法を使う、Bootstrapのようなフロントエンドフレームワークを使うなど、さまざまな方法があります。

最近ではVue.jsなどを使って、一つのファイルにCSSもJSもHTMLも書く場合も多くなっており、それに伴い、問題もさらに複雑化しています。

そんな中、ユーティリティファーストなCSS設計という考え方も広まってきました。このセッションではCSSフレームワークのTailwind CSSを例に、ユーティリティファーストなCSS設計を紹介します。その特徴をつかみ、CSS設計のさまざまな悩みを解決する糸口を探りましょう。

中野 祐人(なかの)

株式会社ピクセルグリッド
Jamstackエンジニア

大学在学中にWeb制作に興味を持ち、アルバイトとしてWeb制作会社で勤務するほか、趣味でいくつかのWebサイトを制作する。最近ではJamstackでの開発に関心があり、Nuxt.jsやGridsomeなどのフレームワークを使ったWebサイトの制作を始める。2020年に株式会社ピクセルグリッド
に入社。

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

レスポンシブなデザインを実装しようとして悩むことのひとつに、PCとスマートフォンで変わってしまう余白の扱いがあります。以前はメディアクエリーくらいしかなかったこの表現も、最近はCSSの進歩によりバリエーションが出てきました。ピクセルグリッドのコーポレートサイトを例に、上手に空白を使う方法を見てみましょう。

矢倉 眞隆(やくら・まさたか)

株式会社ピクセルグリッド
フロントエンド・エンジニア

ウェブ制作会社にフロントエンド・エンジニアとして携わった後、フリーランサーを経て、2016年10月に株式会社ピクセルグリッド
へ入社。ウェブ標準技術やブラウザの動向を追うのが趣味。

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

CSS Gridは、多くのブラウザで利用できるようになり、グリッドレイアウトする上では欠かせない機能となってきました。同様に、Flexboxを利用してレイアウトしている人も多いでしょう。

このセッションでは、CSS GridやFlexboxがあるというのは知っているけど、それらをどう使い分けたらよいのかと悩んでいる方を対象とし、どのようにCSS GridとFlexboxを使い分けたらよいかを、具体的な例を挙げながら解説します。実務でよく扱う特徴的なレイアウトを例に、使い分けの勘所を身につけることを目指しましょう。

坂巻 翔大郎(さかまき・しょうたろう)

株式会社ピクセルグリッド
フロントエンド・エンジニア

大手ソフトウェアダウンロード販売会社、Web制作会社などで、マークアップエンジニア、プログラマ、サービス企画、ディレクターを経験。2013年、株式会社ピクセルグリッド
に入社。HTML、CSS、JavaScriptなどをオールラウンドに担当。とりわけ、プログラマブルなCSSの設計、実装を得意とする。

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

JavaScriptフレームワークというと、使ったことがないマークアップエンジニアは、難しそうに感じていないでしょうか。または、すでに使っていても、設定がめんどくさいと思っている人もいるかもしれません。

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

小山田 晃浩(おやまだ・あきひろ)

株式会社ピクセルグリッド
フロントエンド・エンジニア

2006年よりWeb制作会社にてUI実装や運用業務を経験した後、2010年に株式会社ピクセルグリッド
に入社。これまでの経験の大半は大規模Webサイトの壊れにくいHTML/CSS設計、及び実装。また、SVG、Canvas、WebGLの扱いも得意としている。外部に向けたアウトプットも積極的に行っており、カンファレンスでの講演などを多数こなしている。three.jsのCSS3DRendererのコントリビューター。2011年から2020年まで10連続でMicrosoft MVP for IEを受賞。

イベント概要

  • 開催日: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」にご記入ください。
  • ツイートされる場合、ハッシュタグは「#cssnite」をお付けください。

視聴環境

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

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

その他

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

コミュニティについて

CSS Nite

CSS Nite

CSS Nite(シーエスエス・ナイト)は、ウェブ制作に関わる方のためのセミナーイベント。2005年にスタートし、2021年10月で丸16年。 仙台、大阪、岡山、札幌、甲府、神戸、福岡、長野、青森、名古屋、沖縄、福島など首都圏以外での“地方版”なども開催しています。地方版は、現地の有志などにより主催・運営されています。 これまでに、800回を超える関連イベントを通して、のべ75,000名...

メンバーになる