Doorkeeper

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

2024-04-26(金)21:00 - 22:00 JST
オンライン リンクは参加者だけに表示されます。
申し込む
参加費無料
申込締切 4月26日 22:00
本イベントのアーカイブは「サブスク」メンバーのみに公開します。

詳細

当初、4月9日(火)に予定していましたが、4月26日(金)に変更します。

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刊)などがある。

聞き手

鷹野 雅弘(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に集約していきます。

配信に関してのあれこれ

YouTubeの概要欄をご覧ください。

はじめて参加される方は、こちらのnoteも、ご一読ください!

オンライン椅子ヨガ

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

  • 開演前
  • 休憩時間(適宜)

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

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

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

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

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

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

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

お問い合わせ

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

https://cssnite.doorkeeper.jp/contact/new?event_id=170345

コミュニティについて

CSS Nite

CSS Nite

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

メンバーになる