Coder’s High – 2021 fall

CSS Niteの出自であるコーディング特集。

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

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

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

ダークモードとは画面の背景を黒基調にしたデザインのこと。

OS側での設定の他、人気アプリやWebサイトで続々対応されています。

これまでは明るい部屋でモニターを眺める方が多かったと思いますが、スマートフォンの普及で暗い場所でも画面を見る機会が増え、夜間目に優しいダークモードが増えてきているわけですね。

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

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

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

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

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

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

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

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

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

Dart Sassの概要と導入事例

Sass公式が現在推奨する新しいSassの規格がDart Sassです。

2020年にLibSassが非推奨となったため、その1年後の2021年10月に@importは非推奨になります。

Dart SassではLibSassで使われている@importが使えなくなり、@useを使うことになります。

その他にも環境設定や記述ルールの変更範囲が大きく、移行時期を迷っている方も多いのではないでしょうか。

移行できていない方に向けて、Dart Sassで変更となる内容の紹介と移行後のメリット・デメリットを紹介。

すでにDart Sassを使っている方には、弊社の実例を元にDart Sassの便利な機能をいくつか共有します。

イベント概要

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

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

参加費について

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

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

当日の進行などに関して

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

後日の視聴

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

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

お振込の方

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

その他

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

オンライン椅子ヨガ

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

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

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

協賛

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