ゼロから学ぶ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サーバーにアップロードしよう
