Doorkeeper
CSS Nite

CSS Nite

リアルタイムでコードを共創できるオンラインエディターCodePenを活用しよう

2024-04-26（金）21:00 - 22:00 JST
Google カレンダーに追加
オンライン リンクは参加者だけに表示されます。
申し込む

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

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

参加費無料
本イベントのアーカイブは「サブスク」メンバーのみに公開します。

詳細

HTML/CSS/JavaScriptを書きながら、リアルタイムで結果をプレビューできるオンラインエディター「CodePen」にフォーカス。相原 典佳さんに解説いただきます。

「当日の視聴は無料」スタイルで開催しますが、アーカイブチケット購入やサブスク登録でサポートくださいますと助かります！

アーカイブ購入について

本イベントのアーカイブはサブスクメンバーのみに共有します。
まずは無料のユーザー登録を行い、その後、サブスクに加入なさってください。

CodePen

コーディングのテクニック紹介記事を見ているとよく出てくる「CodePen」、見たことはあるけれど使ったことがないという方が多いのではないでしょうか？　

「CodePen」は、HTML/CSS/JavaScriptを書きながら、リアルタイムで結果をプレビューできるオンラインエディターです。

本セミナーでは、紹介記事経由でのCodePenを利用する方法や、ちょっとしたHTML/CSSコーディングを試したいときの利用方法をうハンズオン形式で解説します。

また、抑えておきたいオンラインエディタとして、GitHubでも活用できるオンライン版「Visual Studio Code」についても紹介します。

以下の内容を紹介・解説します。

  • CodePenとは
  • CodePenの使い方
  • CodePen以外のオンラインエディタ
  • オンライン版Visual Studio Code

相原 典佳相原 典佳（あいはら・のりよし）

DTP、Webアシスタントディレクター業務を経たのち、2010年にフリーランスとして独立。ディレクションからデザイン、フロントエンド・WordPress構築まで、一貫したWebサイト制作を提供しているほか、2011年からデジタルハリウッドにて講師を担当。

共著書として『初心者からちゃんとしたプロになる HTML+CSS実践講座』、『初心者からちゃんとしたプロになる Figma基礎入門』（いずれもMdN刊）などがある。

聞き手、MC（進行）

鷹野 雅弘（CeeBeeDee/CSS Nite/DTP Transit）が“聞き手”を担当し、リアルタイムでチャットでの質問などを拾っていきます。

鷹野 雅弘（たかの・まさひろ）

株式会社スイッチ

グラフィックデザイン、エディトリアルデザイン、ウェブ制作の分野で、デザイン、オペレーション、設計・ディレクションなど、25年以上、第一線で手を動かし続けている。そのノウハウをテクニカルライティングや講演に落とし込み、「制作→執筆→講演」のサイクルを回す。

2015年から大阪芸術大学 客員教授。 2017年からAdobe Community Evangelist。CSS NiteやDTP Transitのオンラインセミナーのオーガナイザーとして企画・制作・配信なども担当。

イベント概要

YouTube Liveでライブ配信します。

お申し込みと参加費

  • 当日の視聴は無料です。
  • 参加にはお申し込みが必要です。受け付けは終演時刻まで。

フォローアップ（アーカイブ）

スライドなどのフォローアップ（アーカイブ）は、サブスクの方限定のコンテンツです。

「サブスク」をはじめます

CSS Nite、DTP Transitのオンラインセミナーのアーカイブを管理しやすく利用いただけるように、2024年2月の開催分から次のように変更します。

  • アーカイブ見放題の「サブスク」：Circle
  • 単品での購入：STORES

「サブスク」（定額サービス）の仕組みによってコスパよく利用いただけます。 ライブ配信は、従来通り「当日の視聴は無料」スタイルを継続します。「サブスク」の加入にかかわらず、誰でも見られます。

なお、Circle、STORESにおいて、CSS NiteとDTP Transitの両方をカバーするブランド名として「CeeBeeDee（シー・ビー・ディー）」を使いはじめます。

サブスクの有無にかかわらず、開催情報などをCircleに集約していきます。

配信に関してのあれこれ

各URLは、YouTubeの概要欄にも掲載しています。

  • チャットやスタンプ、ツイートなど「参加型」でお楽しみください！
  • 「音声のバランスが悪い」など、何かお困りの場合、コメントなどで教えてください！

配信URL

YouTube Liveで配信します。

https://youtube.com/live/QtY_e6FWtG4?feature=share

X（Twitter）にて同時配信も行っていますが、YouTube Liveにてコメントも含めてお楽しみください。

YouTube関連

  • YouTubeチャットを活用ください！　スパム回避のため、YouTubeチャンネル登録者のみがコメント可能にしていますので、事前にチャンネル登録をお願いします。
  • スーパーチャット（スパチャ＝投げ銭）を利用できます。少額でも大歓迎です！　いただいた全額を講演者にお渡しします。
  • 質問がある場合、YouTubeチャットで冒頭に★または【質問】を付けてコメントください。すべては拾いきれません。「〜は〜という意味です」「自分の現場ではこうやっている」など、視聴される方からのサポート的なコメントを歓迎します！　一緒に場を作ってくださいますと嬉しいです!!

リアクションや質問

  • CommentScreenを使って、画面上にスタンプを送信できます。スマホだけでなく、PCからも送信可能。ただし、CommentScreenのコメント機能は使っていません。
  • スクショ付きのツイート歓迎です。ぜひ、ハッシュタグ（#CodePen）を付けてください。ただし、事例の部分などでNGマークがついている箇所、講演者からNGの指示のある箇所はご遠慮ください。
  • 終了後、ぜひアンケートにお答えください！　「フィードバックはギフト」。話してくださった方の成長の材料になり、また、イベントの改善につながります。

その他

  • 「UDトーク」にて文字情報を提供しますので、別のブラウザーなどでご覧ください。タイムラグや精度についてはご容赦ください。
  • サンプルファイルや配布資料、アーカイブ動画のURLをSNSなどで再配布するのは禁止です。
  • 開演の30分前くらい前からテスト配信をスタートします。音声などが聞こえるかチェックなさってください。
  • スマホやタブレットで視聴される方もいると思いますが、PCでの視聴を前提としています。なるべくPCでご覧ください！
  • ご覧いただく回線状況によっては、YouTubeの動画が止まってしまったり、音声が途切れてしまうことがあります。その場合には、ブラウザーを再読み込みしたり、OSを再起動してみてください。

配信準備は念入りに行っていますが、本番になると予期せぬトラブルが生じるのがライブ配信です。それも含めて楽しんでください。

オンライン椅子ヨガ

本イベントはコモモ先生 @komomoaichi のオンライン椅子ヨガ付きです！

  • 開演前
  • 休憩時間（適宜）

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

方向性

「オンラインセミナー」や「ウェビナー」というより「オンラインイベント」的なニュアンスです。

  • いわゆる「セミナー」ではなく、「オンラインイベント」です。
  • あえて「教えることを生業にしていない方」を（多めに）ブッキングしています。“聞き手”を立てることによってフォローしながら進めますが、それでも説明が足りなかったり、うまく時間配分をコントロールできないことがあります。
  • また、「オンラインで画面に向かって一人で喋る」のは場数を多く踏まない限り、苦行です。そこで聞き手を立て、うなづきや相づちを入れています。「うなづきがうるさい、不要」と思う方もいると思いますが、ご容赦ください！（録画の講座ではなく、オンラインイベントなのです）
  • 「当日の視聴は無料」ということは謝礼もしかるべき金額ですし、日々の仕事の中から準備の時間を捻出されています。少し寛大なムードで受け取ってくださいますと幸いです。
  • 分単位で細かく練られたカリキュラムではなく、少し緩めに進行します。コメントを拾って脱線することもあります。言い換えると学習だけをされたい方には向いていません。
  • 若干の延長など、ぴったり進行しないことがあります。

「当日の視聴は無料」を続けるために応援をお願いします！

DTP Transitのオンラインセミナーは「当日の視聴は無料」で開催していますが、収入となる源泉が「アーカイブ視聴のチケット」しかありません。

余裕のあるときなどに「アーカイブ視聴のチケット」を購入いただけると助かりますが、次に挙げるような〈無料でできる応援〉があります。

  • 「こんなイベントがある」と、まわりの方に知らせる
  • 「こんなイベントに参加したけど…」と感想をまわりの方に伝える
  • ハッシュタグを付けてツイートする（スクショやネタバレOKです）
  • アンケートに回答する
  • 出演された方のTwitterをフォローする／YouTubeをチャンネル登録する
  • 参加されたイベントのYouTubeプログラムに「GOOD」（高評価）ボタンを押す
  • DTP TransitのTwitterをフォローする／YouTubeをチャンネル登録する

特にお願いしたいのは「アンケート回答」です。 話してくださった方の成長の材料になり、また、イベントの改善につながります。

企業主催のセミナーのように「開催後に営業メールが頻繁に届く」ようなこともなく続けられるために応援くださいますと幸いです。

協力企業のご紹介

本イベントには、下記の企業の協賛、協力をいただいています。

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

通年で協賛を募集しています。検討くださいますと幸いです。

株式会社ウェブライダー 株式会社エンタミナ 株式会社ヘルツ 株式会社コンセント 株式会社トゥーアール（to-R） 株式会社LINICA 株式会社サービシンク

お問い合わせ

問い合わせはDoorkeeperのフォームからお送りください。

シェア ツイート

コミュニティについて

CSS Nite

CSS Nite

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

メンバーになる