Coder's High - 2021 fall

CSS Niteの出自であるコーディング特集。4つのセッションで構成します。

• Dart Sassの概要と導入事例／サトウハルミ（FLAT）
• そのCSS、新しい書き方がありますよ／綿貫 佳祐（Increments）
• ウェブタイポグラフィとグリッドシステム／阿部 文人（necco）
• ダークモードに対応したWebページ制作／Mana（Webクリエイターボックス）

Dart Sassの概要と導入事例

Sass公式が現在推奨する新しいSassの規格がDart Sassです。2020年にLibSassが非推奨となったため、その1年後の2021年10月に@importは非推奨になります。

Dart SassではLibSassで使われている@importが使えなくなり、@useを使うことになります。その他にも環境設定や記述ルールの変更範囲が大きく、移行時期を迷っている方も多いのではないでしょうか。

移行できていない方に向けて、Dart Sassで変更となる内容の紹介と移行後のメリット・デメリットを紹介。すでにDart Sassを使っている方には、弊社の実例を元にDart Sassの便利な機能をいくつか共有します。

そのCSS、新しい書き方がありますよ

CSSにはなんてたくさんの書き方があるのでしょう。
さまざまな実装方法があるCSSですが、最終的なスタイリングが同じなら、便利な書き方・分かりやすい書き方をしたいものです。

例えば「基本は親要素の50%幅、だけど最大500pxかつ最小200px」の指定があったとして、実は1行で実装できるのをご存じですか？

このように「既存の実装方法でも問題ないけど、より楽な新しい書き方がある」例を紹介します。

• Flex Container内の余白
• 親要素に合わせた伸縮
• 絶対配置での中心揃え
• 画像のアスペクト比の維持
• 上下だけor左右だけの余白
• 推奨値、最小値、最大値
• 詳細度の制御
• フォーム要素のトンマナ
• SVGの線幅の維持
• margin: 0 auto

ウェブタイポグラフィとグリッドシステム

ウェブサイトやウェブアプリなどでも表層のデザインの透明化が進んでいる今、改めてサイトやアプリに掲載する情報の基盤である文字が重要です。

neccoではできるかぎり文字が読みやすく、伝わりやすくするためのタイポグラフィとデザイン制作を心がけ、グリッドシステムと平行してデザインを調整、改善していきます。

サイトの制作過程においてどのようにグリッドシステムをつくるのか？どのようにグリッドシステムをデザインに活かすのか？についてタイポグラフィと実例を交えてお話します。

ダークモードに対応したWebページ制作

ダークモードとは画面の背景を黒基調にしたデザインのこと。OS側での設定の他、人気アプリやWebサイトで続々対応されています。これまでは明るい部屋でモニターを眺める方が多かったと思いますが、スマートフォンの普及で暗い場所でも画面を見る機会が増え、夜間目に優しいダークモードが増えてきているわけですね。

今回はCSSでできるダークモードに対応したWebページ制作の方法やコツを紹介します。

イベント概要

• 開催日：2021年11月5日[金] 20:00-22:00
• 形式：オンライン（Zoomウェビナー）
• 主催：CSS Nite
• 参加費（お一人）
  • 5,000円（経費での参加）
  • 2,700円（自腹での参加）

終演時間は若干の延長の可能性があります。

参加費について

2つの金額設定を設けています。

• 企業、フリーランスを問わず、経費として処理される方は「経費での参加」のチケットを選択してください。
• 学生、休職中、就職活動中、また、経費としては落ちず個人負担で参加される方向けに、応援の意味で「自腹での参加」というチケットを設けています。切り分ける方法はなく、誰でも「自腹での参加」ができてしまいますが、みなさんの良心を信じます。

もちろん CSS Niteの運営を応援したい方、お金が余ってしかたない方は、個人であっても「経費で参加」のチケットを選択していただくことはウェルカムです！

当日の進行などに関して

• 19:30以降にZoomにログインしてください。Zoomアプリは最新版にしておくことをオススメします。
• 19:45から「椅子ヨガ」を予定しています。
• 質問事項は、Zoomウェビナー内の「Q&A」でなく、Slidoにご記入ください（事前に記入することも可能です）。
• 画面にスタンプやコメントを送りたい方はこちらから。
• ツイートされる場合には、ハッシュタグは「#cssnite」をお付けください。
• 終演時間は若干の延長の可能性があります。また、終了後、1時間を目安に「アフタートーク」を予定。

視聴に関して（1）

• Zoomの視聴URLは前日・当日に再確認をお願いします。
• 参加される方のカメラ、マイクは自動的にOFFになっています（ONにできません）。
• 画面共有でスライドやデモ画面を表示しますので、PCでの参加をおすすめします（スマホ/タブレットでも参加できます）。
• 内蔵スピーカーでは聞き取りづらい場合があります。イヤホン・ヘッドホンの利用を推奨します。
• 120分程度の接続で数百MBのデータ通信が必要です。通信制限の上限等にご注意ください。

視聴に関して（2）「音声が途切れる。画面が遅延する/カクカクする」場合

• Zoomから退出したり、PCを再起動するなどして再度接続してみてください。
• バックグラウンドで走っているアプリケーションを終了することで改善されることもあります。
• 可能であればWi-Fiでなく有線で接続してみてください。
• 改善されない場合には、後日提供する動画をご覧ください。

後日の視聴

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

• 動画の視聴期限は開催から3週間を予定。

お振込の方

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

その他

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

オンライン椅子ヨガ

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

• 19:45-20:00　開演まで
• 20:55-21:05　休憩時間

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

協賛

CSS Niteには次の企業をはじめ、多くの制作会社に協賛いただいています。