ゼロから学ぶWebサイト制作　〜作りながら覚えるHTML・CSS入門講座

今やStudioなどのノーコードツールで手軽にサイト制作ができます。ですが、HTMLとCSSの基礎を理解しているかどうかで、できることの幅は大きく変わります。文章を構造化するHTML、レイアウトや装飾を行うCSSは、Webサイトや電子書籍の制作に欠かせない基礎知識です。こばやすさんと一緒にサンプルページを実際にコーディングしながら学んでいきます。

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

ゼロから学ぶWebサイト制作　作りながら覚えるHTML・CSS入門講座

Webサイト制作は「ノーコードツールで手軽に作る方法」と「コードを書いて構築する方法」の2つに大きく分けられます。本セッションではその違いを整理しながら、Webサイトの基本である HTMLとCSS をゼロから学ぶ意義を解説します。

AIが進化した今でも、なぜHTML・CSSを学ぶ必要があるのか？ どこまで理解すれば仕事に活かせるのか？ 実例を交えながら紹介します。さらに、実際にプロフィールページを題材に、HTMLで文章を構造化し、CSSでレイアウトや装飾を加えるハンズオンにも取り組みます。Visual Studio Codeの基本操作や、Google Chromeの検証機能の使い方も取り上げ、効率的な学習法までフォローアップします。

「Webサイト制作の基礎をしっかり身につけたい」という方に向けた、実践的かつ入門者にやさしい内容です。

講座内容

• 「ノーコード」と「コードを書く」Webサイトの違い
• HTML、CSSとは？違いを比較する
• AIがある時代にHTML、CSSを学ぶ必要はある？
• HTMLとCSSだけでどんなWebサイトが作れるのか実例紹介
• HTMLで文章を構造化する
• HTML基本の書き方
• コードエディタ（Visual Studio Code）の使い方
• プロフィールページのHTMLを入力みよう
• CSS基本の書き方
• CSSでプロフィールページをレイアウト、装飾をしてみよう
• Google Chrome検証機能の使い方
• HTMLとCSSを効率的に学習するコツ

こんな人におすすめ

• Webデザイナーやコーダーとして仕事をするために勉強中
• 印刷物のデザイナーだけどWebサイトを作ることになった。コーディングの知識がないので基礎を学びたい
• 企業や業務委託でWebサイト制作の担当（ディレクター）になった。制作者がどのように作っているか知りたい

留意事項

• この講座ではPCを使用して制作を体験するセクションがあります。一緒に手を動かしたい方はPCでの視聴をおすすめします。
• Visual Studio Codeというコードエディタを使用して、HTMLとCSSを入力していきます。使い方を説明するセクションがありますが、ダウンロードをするまでの過程は省略します。各自で事前にダウンロードしておいてください。
• Webサイトの実装結果の確認ではGoogle Chromeというブラウザを使用します。お使いのPCにアプリがない場合はダウンロードし、最新バージョンへ更新してください。

できるイラストで学ぶ 入社1年目からのHTML＆CSSとWebデザイン

4つのWebサイトを作る過程を体験しながら、HTMLとCSSの書き方の基本から応用までを解説した書籍。

シンプルなWebサイトの作成から始まり、スマートフォン、タブレットに対応したレスポンシブサイトまで作ることができます。

さらにWebサイトのデザインを作成するときに押さえておきたいポイントも解説しているので、Webデザインの基礎を学びたい方にも役立ちます。

また初心者の美咲とベテラン制作者の羊先輩による会話形式の解説や、つまづきやすい部分には豊富な図解を掲載しているので、初めてWeb制作に挑戦する方でも楽しみながら理解を深められます。

• Chapter 1：Webサイトの制作の基礎知識を身に付けよう
• Chapter 2：HTML・CSSを使ってWebサイトを作ってみよう
• Chapter 3：2カラムのWebサイトを作ってみよう
• Chapter 4：レスポンシブ対応のWebサイトを作ってみよう
• Chapter 5：複数ページのあるWebサイトを作ってみよう
• Chapter 6：WebサイトをWebサーバーにアップロードしよう

Amazonで予約

聞き手、MC（進行）

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

イベント概要

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

• 開催日：2025年10月31日（金） 21:00 - 23:00
• 形式：オンライン（YouTube Live）
• MC：鷹野 雅弘（スイッチ）
• 主催：CeeBeeDee
• 共催：CSS Nite、DTP Transit
• 協賛（制作会社）：ウェブライダー、LINICA、エンタミナ、コンセント、サービシンク、ビットエー、ヘルツ、アップルップル、CODE54、HAMWORKS、S-FACTORY、necco、FLAT、ONiWA ほか
• 協賛：文賢（ブンケン）、デジ革（一般社団法人デジタル経営革新協会） 、JILLA（日本イラストレーション協会）

お申し込みと参加費

• リアルタイムの視聴は無料です。
• 参加にはお申し込みが必要です。受け付けは終演時刻まで。

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

有料チケットには次が含まれます。これを「フォローアップ」と呼んでいます。

• アーカイブ動画
• スライド
• リンク集や補足
• サンプルファイルなど（プログラムにより）

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

• アーカイブ動画の視聴期限はありません。ずっと見られます。
• 法人およびフリーランスで事業決済される方は「法人向け」をお求めください。

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

次の3つの方法があります。いずれかを選択なさってください。

• 終演時刻まで：Doorkeeper
• 終演時刻以降：STORES
• サブスクを登録する

Doorkeeperの場合、終演時刻にメールをお送りしています。「探してみたら埋もれていて見つかった」や、お使いのメールサーバーのセキュリティが厳しくて弾いているなどのことがあります。

メールに依存しないSTORESやサブスクであれば、メール関連のトラブルから開放されます。

購入方法	種別			フォローアップの受け取り	備考
	個人	個人、 フリーランス	法人
Doorkeeper （単品）	2,200円 （終演時刻 まで）	5,500円	11,000円	終演時刻にメールを送信（info@doorkeeper.jpから送信されます）	「当日の視聴のみ」のチケットを申し込まれた方は、いったん、キャンセルして「アーカイブ視聴付き」のチケットを申し込んでください。
STORES （単品）	3,300円	5,500円	11,000円	購入するとダウンロードできるテキストファイルに、アーカイブ動画や特典を掲載予定のページへのリンクがあります（アーカイブ動画や特典の掲載はイベント終了後）	ユーザー登録してから申し込むと、［マイページ］の［購入履歴］から、後からダウンロードできます。
サブスク	4,400円（3ヶ月）		詳細	［メンバー限定］セクションの［フォローアップ（アーカイブ）］から本イベントのNotionにアクセスしてください。	法人は別途
	17,600円（1年）

領収書

インボイス対応の領収書は、次のチケットのみ対応します。NotionからPDFをダウンロードしてご利用ください。

• 個人／フリーランス（スライド、アーカイブ視聴付き） ※経費として
• 法人（スライド、アーカイブ視聴付き）

購入方法	区分	参加費	領収書	入手方法
Doorkeeper （単品）	個人	2,200円	発行（インボイス非対応）	Doorkeeper
	個人／フリーランス	5,500円	インボイス対応の 領収書を発行	Notion
	法人	11,000円
STORES （単品）	個人	3,300円	非対応	-
	個人／フリーランス	5,500円	インボイス対応の 領収書を発行	Notion
	法人	11,000円

• 「法人（スライド、アーカイブ視聴付き） 」のチケットを購入いただいている場合のみ、個別対応いたします。フォームからご連絡ありがとうございます。

配信に関してのあれこれ

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

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

配信URL

YouTube Liveで配信します。

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

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

YouTube関連

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

リアクションや質問

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

その他

• 120分のプログラムでは、60分前後のキリのいいタイミングで休憩（5-10分）をはさみます。
• サンプルファイルや配布資料、アーカイブ動画のURLをSNSなどで再配布するのは禁止です。
• 開演の30分前くらい前からテスト配信をスタートします。音声などが聞こえるかチェックなさってください。
• スマホやタブレットで視聴される方もいると思いますが、PCでの視聴を前提としています。なるべくPCでご覧ください！
• ご覧いただく回線状況によっては、YouTubeの動画が止まってしまったり、音声が途切れてしまうことがあります。その場合には、ブラウザーを再読み込みしたり、OSを再起動してみてください。同時配信しているX（Twitter）の方が安定してることがあります。
• 分単位で細かく練られたカリキュラムではなく、少し緩めに進行します。コメントを拾って脱線することもあります。言い換えると学習だけをされたい方には向いていません。
• 若干の延長など、ぴったり進行しないことがあります。

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

オンライン椅子ヨガ

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

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

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

サブスク

CSS Nite、DTP Transitのオンラインセミナーのアーカイブをリーズナブルに、また、管理しやすく利用いただけるように、「サブスク」（定額サービス）をご用意しています（Circleというサービスを利用しています）。

• 3ヶ月：4,400円＋税
• 年パス：16,000円＋税

年間で50近く開催されますので、1本あたり400円を切る計算です。ぜひ、ご利用ください！

• サブスク対象イベントのリスト（Google スプレッドシート）

アーカイブ動画だけでなく、スライドのダウンロードも可能ですので、ざっと内容を把握しておきたい場合にも適しています。

サブスクの登録方法

次の手順でお申し込みください。

1. Circleでユーザー登録（自動返信メールを確認して完了です）
2. Stripeで決済（3ヶ月ごと：4,400円、年パス：17,600円）
3. CircleとStripeでメールアドレスが異なる場合のみ フォームからのご連絡をお願いします。

協力企業のご紹介

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

• 文賢（ブンケン）～文章をより良くするための推敲・校閲・校正支援ツール
• デジ革（一般社団法人デジタル経営革新協会） ネットとAIで経営に貢献できる人材になる
• JILLA（日本イラストレーション協会）　文芸美術国保への加入や交流会などメリットいっぱい

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

• ウェブライダー
• LINICA
• エンタミナ
• コンセント
• サービシンク
• ビットエー
• トゥーアール（to-R）
• ヘルツ
• アップルップル
• CODE54
• HAMWORKS
• S-FACTORY
• necco
• FLAT
• ましじめ
• グローバルデザイン
• エイチツーオー・スペース
• Gear8
• マジカルリミックス
• ONiWA
• さきがけデジタル
• r360studio

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

お問い合わせ

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