毎年開催しているコーディング特集の第2弾としてショートセッション4組にて構成します。

• Tailwind CSSを参考に自分用のユーティリティCSSを作る／田村 章吾（ましじめ）
• 【快適】フロントエンド開発環境をwebpack で便利にしてみよう／宇井 陸登（アップルップル）
• Ionic × Capacitor × React / Web技術で作るスマホネイティブアプリ／佐藤 あゆみ（necco）
• 相関関係から見るGoogleに理解されやすいコーディング／長谷川 喜洋（How to Use）

セッション概要

4つのショートセッションで構成します。

Tailwind CSSを参考に自分用のユーティリティCSSを作る

Tailwind CSSを使っていますか？

Tailwind CSSはマニュアルも充実しており、CSSプロパティの早見表として使うこともできます。
直接案件で使う機会がなくても、仕組みを追ってみると学びがあります。

今回は、Tailwind CSSの状態管理の「hover:」や、レスポンシブユーティリティの「sm:」などと同じような仕組みをSassのMixinで作る方法を紹介します。

Tailwind CSSの良いところを知ることで、今の案件に役立つことも多いはずです。
Mixinのサンプルコードを用意していますので、ぜひCSSの勉強やご自身のユーティリティツールを作るきっかけにしてください！

【快適】フロントエンド開発環境をwebpackで便利にしてみよう

便利で効率的なWebサイトの開発環境を構築するためにはビルドツールが必要になります。ビルドツールの中でもwebpackはThe State of JS 2021にて最も利用率が高く、人気のあるビルドツールとして紹介されています。

一方で、設定が複雑であり、慣れるまでは、どう設定してよいのかわからない…という状況に陥ることの多いツールでもあります。本セッションではwebpackの設定に毎回悩んでいるという方に向けて、開発時に便利な設定やプラグインを紹介します。

次のような方に聞いていただけると嬉しいです。

• Web上の記事を参考にして、なんとかSCSSをCSSに変換してWebサイトに適用できるようになったけど、なぜか<style>タグで出力されてしまう…。本当は、いつものように<link>タグで読み込みたいのに…
• 何人かのチームでWebサイトのコーディングをしているが、人それぞれコードの書き方が異なっているため、チームメンバーが書いたコードをメンテナンスするときに時間がかかってしまう。どうにかチーム内でコードの書き方を統一したいんだけど…
• webpackを活用した開発には少しなれてきて、今度はwebpackを活用したパフォーマンス・チューニングにも挑戦してみたいと思っている

その他、ソースコードの品質や、パフォーマンスの向上などに効果のあるものなど、便利な設定をモリモリ紹介します。

webpackを理解してより快適なコーディングライフを目指してみませんか？

Ionic × Capacitor × React / Web技術で作るスマホネイティブアプリ

スマホアプリを自作したり、「スマホアプリ作れませんか？」と聞かれたことはありませんか。 スマホアプリを作るためには、iOSならSwift、AndroidならKotlinなどのプログラミング言語を新しく習得する必要があります。つまり、iOSとAndroidの両ストアで配信したい場合には2つの言語を覚えなければなりません。

このセッションでは、HTML、CSS、JavaScriptをベースにネイティブアプリを作る流れやポイントを紹介します。

• ウェブ＆ネイティブアプリに対応したUIフレームワーク「Ionic」
• ウェブサイトをネイティブアプリに変換する仕組み「Capacitor」

あなたのスキルをスマホアプリの世界で活かしてみませんか？ どんなアプリを作れるの？と思われた方は、Ionic x Capacitor を利用して制作したアプリ『つくる人』のための計算メモ帳 kanauをご覧ください。

相関関係から見るGoogleに理解されやすいコーディング

SNS上では、日々「正しいマークアップ」について侃々諤々と意見が飛び交っています。h1はロゴか見出しか複数使用するのかという話題などを見たことがないでしょうか。
Google検索では2021年8月のアップデートから、検索結果に表示されるタイトルの書き換えが非常に多く見られるようになり、この対策として「titleタグとh1タグの内容を揃える」という手法が広まりました。
少し視点を変えると、コーディングで優先する項目が変わってくるというわかりやすい事例です。

このセッションでは、コンテンツをGoogleにより正しく理解してもらうためのコーディングについてご紹介します。
例えばdescriptionについて、Googleはランキング要素ではないと明言していますが、適切なdescriptionの設定は有意な結果を示すケースが多く見られます。
ここでは直接のランキング要素ではないdescriptionなどを相関関係と定義して、事例とデータから紐解いていきます。

「検索エンジンがページの内容をより適切に認識できるように」とGoogleが明言している構造化データについても、VSCode用のスニペットをご用意していますので、ぜひ実践してみてください！

イベント概要

• 開催日：2022年10月14日（金）21:00 - 23:00
  • （最大24:00までアフタートーク）
• 形式：オンライン（Zoomウェビナー）
• 主催：CSS Nite
• 共催：DTP Transit
• 備考：UDトークにて字幕をご用意しています。

• 参加費（お一人）：

  • 5,000円（経費で参加）
  • 3,000円（自腹で参加）

• 「協賛企業枠」のチケットは、CSS Niteに年間で協賛してくださっている企業向けです。

参加資格などはありません

お仕事内容にかかわらず、興味があれば、どなたでもご参加ください！
学生や休職中、求職中の方も歓迎です。

当日の進行などに関して

• 開演の30分前くらい前（20:30くらい）からテスト配信をスタートしますので、音声などが聞こえるかチェックされてください。
• 開演の15分前から「椅子ヨガ」を行います。
• 終演時間は若干の延長の可能性があります。
• 途中に5-10分程度の休憩をはさみます。

ツイートなどの発信やスクショに関して

• 配信URL、および、その他の案内事項は、カウントダウンメールにてお知らせするNotionのフォローアップページに記載しています（終了後、スライドやリンク集、セミナー内容の補足などを掲載します）。
• ツイートされる方はハッシュタグを付けてください！
• スクショ（スクリーンショット）は自由にどうぞ！（事例の部分などでNGマークがついている箇所はご遠慮ください）
• スクショされるとき、講演者の顔が入ってもOKです。
• ツイートされたり、ブログに掲載されてもOKです。
• サンプルファイルや配布資料をそのまま再配布するのは、ご遠慮ください。

その他

• 開催前に「カウントダウンメール」、開催後に「フォローアップメール」をお送りします。こちらを必ずご一読ください。
• 本セミナーのタイトルや内容は調整されることがあります。

オンライン椅子ヨガ

今回のCSS Niteはコモモ先生 @komomoaichi のオンライン椅子ヨガ付きです！

• 20:45-20:58　開演まで
• 21:55-22:05　休憩時間（前後することがあります）

一緒に「ちょっとメンテ」しましょう。
https://chotto-maint.com/online-yoga

タイムテーブル

タイムテーブルはあくまでも目安で、状況に応じて調整しながら進めます。

後日の視聴

当日見られなかった方、および、改めて見返したい方には、5日後（翌月曜日）に発行するフォローアップメールにて視聴URLをお知らせします。

お振込の方

会社から複数名にて参加される場合には、まとめてお振込いただき、振り込み後にご一報ください。

FAQ（よく聞かれる質問と、その回答）

スマホでも見られますか？

もちろん可能ですが、スライドなどの画面の細かいところが見えにくいと思います。

参加資格はありますか？

ありません。お仕事内容にかかわらず、興味があれば、どなたでもご参加ください！
学生や休職中、求職中の方も歓迎です。

Twitter/note/YouTubeをフォローください！

セミナー前後に関連情報をお出しすることがありますので、Twitter/note/YouTube/LINEをフォローくださいますと幸いです。

• Twitter
• note
• YouTube
• LINE

CSS Nite（シーエスエス・ナイト）は、ウェブ制作に関わる方のためのセミナーイベント。2005年10月にスタートし、2021年10月で丸16年。

これまでに、800回を超える関連イベントを通して、のべ75,000名を超える方にご参加いただいています（2021年10月現在）。

• CSS Nite公式ウェブサイト

協賛

CSS Niteは下記の企業に協賛、協力をいただいています。

• KDDIウェブコミュニケーションズ レンタルサーバー「CPI」、簡単ホームページ作成「ジンドゥー」など提供
• Webクリエイター能力認定試験（サーティファイ）　年間受験者数15,000人以上
• Webフォント・サービス FONTPLUS

また、多くの制作会社に協賛いただいています。