Doorkeeper

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

2021-03-12(金)20:00 - 22:00
オンライン リンクは参加者だけに表示されます。
申し込む
事前購入(カード決済) 3,600円 前払い
事前購入(銀行振込) 4,000円 前払い 受付終了
CodeGrid購読者 2,800円 前払い
協賛企業枠 無料
出演者、スタッフ 無料

詳細

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設計のさまざまな悩みを解決する糸口としましょう。

中野 祐人(なかの・ゆうと)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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」でなく、Sli.doにご記入ください。 https://app.sli.do/event/mxluswmm
  • ツイートされる場合、ハッシュタグは「#cssnite」をお付けください。

視聴環境

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

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

その他

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

コミュニティについて

CSS Nite

CSS Nite

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

メンバーになる