BEGIN:VCALENDAR VERSION:2.0 PRODID:-//https://techplay.jp//JP CALSCALE:GREGORIAN METHOD:PUBLISH X-WR-CALDESC:ゼロから学ぶWebサイト制作　〜作りながら覚 えるHTML・CSS入門講座 X-WR-CALNAME:ゼロから学ぶWebサイト制作　〜作りながら覚 えるHTML・CSS入門講座 X-WR-TIMEZONE:Asia/Tokyo BEGIN:VTIMEZONE TZID:Asia/Tokyo BEGIN:STANDARD DTSTART:19700101T000000 TZOFFSETFROM:+0900 TZOFFSETTO:+0900 TZNAME:JST END:STANDARD END:VTIMEZONE BEGIN:VEVENT UID:987168@techplay.jp SUMMARY:ゼロから学ぶWebサイト制作　〜作りながら覚えるH TML・CSS入門講座 DTSTART;TZID=Asia/Tokyo:20251031T210000 DTEND;TZID=Asia/Tokyo:20251031T230000 DTSTAMP:20260527T203045Z CREATED:20251002T060155Z DESCRIPTION:イベント詳細はこちら\nhttps://techplay.jp/event/98716 8?utm_medium=referral&utm_source=ics&utm_campaign=ics\n\n本イベント は終了しています。「アーカイブ動画を見たい方」「 スライドをダウンロードしたい方」はSTORESからお求め ください。個人向け（3\,300円）※領収書なし個人・フ リーランス（5\,500円）法人向け（11\,000円）3ヶ月：4\,40 0円／1年：17\,600円で140本のアーカイブが見放題になる サブスクも用意しています。\n\n今やStudioなどのノーコ ードツールで手軽にサイト制作ができます。ですが、H TMLとCSSの基礎を理解しているかどうかで、できること の幅は大きく変わります。文章を構造化するHTML、レイ アウトや装飾を行うCSSは、Webサイトや電子書籍の制作 に欠かせない基礎知識です。こばやすさんと一緒にサ ンプルページを実際にコーディングしながら学んでい きます。\n\n「リアルタイム視聴は無料」スタイルで開 催しますが、アーカイブチケット購入やサブスク登録 でサポートくださいますと助かります！\n\nゼロから学 ぶWebサイト制作　作りながら覚えるHTML・CSS入門講座\n\ nWebサイト制作は「ノーコードツールで手軽に作る方法 」と「コードを書いて構築する方法」の2つに大きく分 けられます。本セッションではその違いを整理しなが ら、Webサイトの基本である HTMLとCSS をゼロから学ぶ意 義を解説します。\n\nAIが進化した今でも、なぜHTML・CSS を学ぶ必要があるのか？ どこまで理解すれば仕事に活 かせるのか？ 実例を交えながら紹介します。さらに、 実際にプロフィールページを題材に、HTMLで文章を構造 化し、CSSでレイアウトや装飾を加えるハンズオンにも 取り組みます。Visual Studio Codeの基本操作や、Google Chrome の検証機能の使い方も取り上げ、効率的な学習法まで フォローアップします。\n\n「Webサイト制作の基礎をし っかり身につけたい」という方に向けた、実践的かつ 入門者にやさしい内容です。\n\n講座内容\n\n\n「ノーコ ード」と「コードを書く」Webサイトの違い\nHTML、CSSと は？違いを比較する\nAIがある時代にHTML、CSSを学ぶ必 要はある？\nHTMLとCSSだけでどんなWebサイトが作れるの か実例紹介\nHTMLで文章を構造化する\nHTML基本の書き方\ nコードエディタ（Visual Studio Code）の使い方\nプロフィ ールページのHTMLを入力みよう\nCSS基本の書き方\nCSSで プロフィールページをレイアウト、装飾をしてみよう\ nGoogle Chrome検証機能の使い方\nHTMLとCSSを効率的に学習 するコツ\n\n\nこんな人におすすめ\n\n\nWebデザイナーや コーダーとして仕事をするために勉強中\n印刷物のデ ザイナーだけどWebサイトを作ることになった。コーデ ィングの知識がないので基礎を学びたい\n企業や業務 委託でWebサイト制作の担当（ディレクター）になった 。制作者がどのように作っているか知りたい\n\n\n留意 事項\n\n\nこの講座ではPCを使用して制作を体験するセ クションがあります。一緒に手を動かしたい方はPCで の視聴をおすすめします。\nVisual Studio Codeというコー ドエディタを使用して、HTMLとCSSを入力していきます。 使い方を説明するセクションがありますが、ダウンロ ードをするまでの過程は省略します。各自で事前にダ ウンロードしておいてください。\nWebサイトの実装結 果の確認ではGoogle Chromeというブラウザを使用します。 お使いのPCにアプリがない場合はダウンロードし、最 新バージョンへ更新してください。\n\n\nできるイラス トで学ぶ 入社1年目からのHTML＆CSSとWebデザイン\n\n\n\n4 つのWebサイトを作る過程を体験しながら、HTMLとCSSの書 き方の基本から応用までを解説した書籍。\n\nシンプル なWebサイトの作成から始まり、スマートフォン、タブ レットに対応したレスポンシブサイトまで作ることが できます。\n\nさらにWebサイトのデザインを作成すると きに押さえておきたいポイントも解説しているので、W ebデザインの基礎を学びたい方にも役立ちます。\n\nま た初心者の美咲とベテラン制作者の羊先輩による会話 形式の解説や、つまづきやすい部分には豊富な図解を 掲載しているので、初めてWeb制作に挑戦する方でも楽 しみながら理解を深められます。\n\n\nChapter 1：Webサイ トの制作の基礎知識を身に付けよう\nChapter 2：HTML・CSS を使ってWebサイトを作ってみよう\nChapter 3：2カラムのW ebサイトを作ってみよう\nChapter 4：レスポンシブ対応の Webサイトを作ってみよう\nChapter 5：複数ページのあるWe bサイトを作ってみよう\nChapter 6：WebサイトをWebサーバ ーにアップロードしよう\n\n\nAmazonで予約\n\nこばやすIT 系企業インハウスWebデザイナー｜Web制作歴10年以上｜Ad obe Community Expert個人の活動として講師、プロダクトデ ザイン、Webコンテンツ企画と制作を行っている。Xでは Web制作の現場で感じたこと、Instagramではデザイン制作 のTIPSを発信。 X（Twitter）：@kobayas_sInstagram：@kobayas_s\n\n 聞き手、MC（進行）\n\n鷹野 雅弘（CeeBeeDee/CSS Nite/DTP Tran sit）が“聞き手”を担当し、リアルタイムでチャット での質問などを拾っていきます。\n\n鷹野 雅弘（たか の・まさひろ）株式会社スイッチグラフィックデザイ ン、エディトリアルデザイン、ウェブ制作の分野で、 デザイン、オペレーション、設計・ディレクションな ど、25年以上、第一線で手を動かし続けている。その ノウハウをテクニカルライティングや講演に落とし込 み、「制作→執筆→講演」のサイクルを回す。2015年か ら大阪芸術大学 客員教授。2017年からAdobe Community Evangel ist。CSS NiteやDTP Transitのオンラインセミナーのオーガナ イザーとして企画・制作・配信なども担当。10年ぶり の全面改定となる『10倍ラクするIllustrator仕事術』（改 訂第3版）を2024年10月に出版。Twitter：@swwwitch\n\nイベン ト概要\n\nYouTube Liveでライブ配信します。\n\n\n開催日： 2025年10月31日（金） 21:00 - 23:00\n形式：オンライン（YouT ube Live）\nMC：鷹野 雅弘（スイッチ）\n主催：CeeBeeDee\n 共催：CSS Nite、DTP Transit\n協賛（制作会社）：ウェブラ イダー、LINICA、エンタミナ、コンセント、サービシン ク、ビットエー、ヘルツ、アップルップル、CODE54、HAMW ORKS、S-FACTORY、necco、FLAT、ONiWA ほか\n協賛：文賢（ブン ケン）、デジ革（一般社団法人デジタル経営革新協会 ） 、JILLA（日本イラストレーション協会）\n\n\nお申し 込みと参加費\n\n\nリアルタイムの視聴は無料です。\n 参加にはお申し込みが必要です。受け付けは終演時刻 まで。\n\n\nフォローアップ（アーカイブ）\n\n有料チケ ットには次が含まれます。これを「フォローアップ」 と呼んでいます。\n\n\nアーカイブ動画\nスライド\nリン ク集や補足\nサンプルファイルなど（プログラムによ り）\n\n\nフォローアップ（アーカイブ）は、アーカイ ブ購入／サブスクの方限定のコンテンツです。\n\n\nア ーカイブ動画の視聴期限はありません。ずっと見られ ます。\n法人およびフリーランスで事業決済される方 は「法人向け」をお求めください。\n\n\nフォローアッ プ（アーカイブ）の購入\n\n次の3つの方法があります 。いずれかを選択なさってください。\n\n\n終演時刻ま で：Doorkeeper\n終演時刻以降：STORES\nサブスクを登録す る\n\n\nDoorkeeperの場合、終演時刻にメールをお送りして います。「探してみたら埋もれていて見つかった」や 、お使いのメールサーバーのセキュリティが厳しくて 弾いているなどのことがあります。\n\nメールに依存し ないSTORESやサブスクであれば、メール関連のトラブル から開放されます。\n\n購入方法種別フォローアップの 受け取り備考個人個人、フリーランス法人Doorkeeper （ 単品）2\,200円（終演時刻まで）5\,500円11\,000円終演時刻 にメールを送信（info@doorkeeper.jpから送信されます）「 当日の視聴のみ」のチケットを申し込まれた方は、い ったん、キャンセルして「アーカイブ視聴付き」のチ ケットを申し込んでください。STORES（単品）3\,300円5\,5 00円11\,000円購入するとダウンロードできるテキストフ ァイルに、アーカイブ動画や特典を掲載予定のページ へのリンクがあります（アーカイブ動画や特典の掲載 はイベント終了後）ユーザー登録してから申し込むと 、［マイページ］の［購入履歴］から、後からダウン ロードできます。サブスク4\,400円（3ヶ月）詳細［メン バー限定］セクションの［フォローアップ（アーカイ ブ）］から本イベントのNotionにアクセスしてください 。法人は別途17\,600円（1年）\n\n領収書\n\nインボイス対 応の領収書は、次のチケットのみ対応します。Notionか らPDFをダウンロードしてご利用ください。\n\n\n個人／ フリーランス（スライド、アーカイブ視聴付き） ※経 費として\n法人（スライド、アーカイブ視聴付き） \n\n \n購入方法区分参加費領収書入手方法Doorkeeper（単品） 個人2\,200円発行（インボイス非対応）Doorkeeper個人／フ リーランス5\,500円インボイス対応の領収書を発行Notion 法人11\,000円STORES（単品）個人3\,300円非対応-個人／フ リーランス5\,500円インボイス対応の領収書を発行Notion 法人11\,000円\n\n\n「法人（スライド、アーカイブ視聴付 き） 」のチケットを購入いただいている場合のみ、個 別対応いたします。フォームからご連絡ありがとうご ざいます。\n\n\n配信に関してのあれこれ\n\n各URLは、You Tubeの概要欄にも掲載しています。\n\n\nチャットやスタ ンプ、ツイートなど「参加型」でお楽しみください！\ n「音声のバランスが悪い」など、何かお困りの場合、 コメントなどで教えてください！\n\n\n配信URL\n\nYouTube L iveで配信します。\n\nhttps://youtube.com/live/_S6P0cMJQIs?feature= share\n\nX（Twitter）にて同時配信も行っていますが、YouTu be Liveにてコメントも含めてお楽しみください。\n\nYouTu be関連\n\n\nYouTubeチャットを活用ください！　スパム回 避のため、YouTubeチャンネル登録者のみがコメント可能 にしていますので、事前にチャンネル登録をお願いし ます。\nスーパーチャット（スパチャ＝投げ銭）を利 用できます。少額でも大歓迎です！　いただいた全額 を講演者にお渡しします。\n質問がある場合、YouTubeチ ャットで冒頭に★または【質問】を付けてコメントく ださい。すべては拾いきれません。「〜は〜という意 味です」「自分の現場ではこうやっている」など、視 聴される方からのサポート的なコメントを歓迎します ！　一緒に場を作ってくださいますと嬉しいです!! \n\n \nリアクションや質問\n\n\nスクショ付きのツイート歓 迎です。ぜひ、ハッシュタグ（#できるHTMLとCSS）を付 けてください。ただし、事例の部分などでNGマークが ついている箇所、講演者からNGの指示のある箇所はご 遠慮ください。\n終了後、ぜひアンケートにお答えく ださい！　「フィードバックはギフト」。話してくだ さった方の成長の材料になり、また、イベントの改善 につながります。\n\n\nその他\n\n\n120分のプログラムで は、60分前後のキリのいいタイミングで休憩（5-10分） をはさみます。\nサンプルファイルや配布資料、アー カイブ動画のURLをSNSなどで再配布するのは禁止です。\ n開演の30分前くらい前からテスト配信をスタートしま す。音声などが聞こえるかチェックなさってください 。\nスマホやタブレットで視聴される方もいると思い ますが、PCでの視聴を前提としています。なるべくPCで ご覧ください！\nご覧いただく回線状況によっては、Yo uTubeの動画が止まってしまったり、音声が途切れてし まうことがあります。その場合には、ブラウザーを再 読み込みしたり、OSを再起動してみてください。同時 配信しているX（Twitter）の方が安定してることがあり ます。\n分単位で細かく練られたカリキュラムではな く、少し緩めに進行します。コメントを拾って脱線す ることもあります。言い換えると学習だけをされたい 方には向いていません。\n若干の延長など、ぴったり 進行しないことがあります。\n\n\n配信準備は念入りに 行っていますが、本番になると予期せぬトラブルが生 じるのがライブ配信です。それも含めて楽しんでくだ さい。\n\nオンライン椅子ヨガ\n\n本イベントはコモモ 先生 @komomoaichi のオンライン椅子ヨガ付きです！\n\n\n 開演前\n休憩時間（適宜）\n\n\n一緒に「ちょっとメン テ」しましょう。\nhttps://chotto-maint.com/online-yoga\n\n\n\nサ ブスク\n\nCSS Nite、DTP Transitのオンラインセミナーのア ーカイブをリーズナブルに、また、管理しやすく利用 いただけるように、「サブスク」（定額サービス）を ご用意しています（Circleというサービスを利用してい ます）。\n\n\n3ヶ月：4\,400円＋税\n年パス：16\,000円＋税 \n\n\n年間で50近く開催されますので、1本あたり400円を 切る計算です。ぜひ、ご利用ください！\n\n\nサブスク 対象イベントのリスト（Google スプレッドシート）\n\n\n アーカイブ動画だけでなく、スライドのダウンロード も可能ですので、ざっと内容を把握しておきたい場合 にも適しています。\n\n\n\nサブスクの登録方法\n\n次の 手順でお申し込みください。\n\n\nCircleでユーザー登録 （自動返信メールを確認して完了です）\nStripeで決済 （3ヶ月ごと：4\,400円、年パス：17\,600円）\nCircleとStripe でメールアドレスが異なる場合のみ フォームからのご 連絡をお願いします。\n\n\n協力企業のご紹介\n\n本イベ ントには、下記の企業の協賛、協力をいただいていま す。\n\n\n文賢（ブンケン）～文章をより良くするため の推敲・校閲・校正支援ツール\nデジ革（一般社団法 人デジタル経営革新協会） ネットとAIで経営に貢献で きる人材になる\nJILLA（日本イラストレーション協会） 　文芸美術国保への加入や交流会などメリットいっぱ い\n\n\n\n\nまた、多くの制作会社に協賛いただいていま す。\n\n\nウェブライダー\nLINICA\nエンタミナ\nコンセン ト\nサービシンク\nビットエー\nトゥーアール（to-R）\n ヘルツ\nアップルップル\nCODE54\nHAMWORKS\nS-FACTORY\nnecco\nFLA T\nましじめ\nグローバルデザイン\nエイチツーオー・ス ペース\nGear8\nマジカルリミックス\nONiWA\nさきがけデジ タル\nr360studio\n\n\n\n\n通年で協賛を募集しています。検 討くださいますと幸いです。\n\nお問い合わせ\n\n問い 合わせはDoorkeeperのフォームからお送りください。 LOCATION:オンライン URL:https://techplay.jp/event/987168?utm_medium=referral&utm_source=ics&utm _campaign=ics END:VEVENT END:VCALENDAR