いまさら聞けないHTML/CSS/JavaScript の基礎超入門編♪文系出身・未経験の方のためのWeb開発

★本講座は、未経験・初心者の方のためのHTML/CSS/JavaScript入門です

プログラミングを学びたいけど、「何から手をつけて良いかわからない」という方、多いのではないでしょうか？

Java、PHP、Ruby、Python、JavaScript、C#、C++、Kotlin、Swift…などプログラミング言語をあげるとキリがありません。いったい今旬な言語はなんなのか？シェアが高い言語はなんなのか？将来性がある言語はなんなのか？迷うと思います。

何から取り掛かるかは大きな問題ではありません！

関数や制御文といったプログラミングの基本的概念は、言語が変わっても大きくは変わらないからです。何か一つの言語を押さえてしまえば、比較的容易に他の言語の習得に取り組むことが可能です（もちろん、なんでも簡単にできるようになるわけではありません）。

ただ、はじめるにあたって、言語ごとにメリットとデメリットはあります。例えば、いくつかのインストールで環境構築が必要なものは、初学や独学で進めるのは少し難易度が高いです。機械学習をはじめるためにはプログラミング以外にも統計学のような違う知識も必要になってくるかもしれません。

だとしたら、まずは始めるのに敷居の低いものから取り組んでも良いのではないでしょうか。HTML/CSS/JavaScriptはパソコンがあればはじめられます。

本講座は、パソコンを持っていてブラウザとテキストエディタがインストールされていれば、すぐに学習を始めることができます。

また、今後どの分野に進んだとしても、ホームページなどに使われるHTMLやCSSといったWebの知識はあった方が良いでしょう。JavaScriptではプログラミングの基本を学ぶことができます。

★講座の構成

1. レッスンを始める前に

2. HTML超入門！押さえておきたいマークアップの基本

3. CSSデザインの基礎を学ぼう！Webデザインに最低限必要な知識

4. JavaScriptでプログラミングの基本的概念を学ぼう！

5. HTML/CSS/JavaScriptの組み合わせならではの、Webページに動きをつけるプログラミングを学ぼう！

6. 修了おめでとうございます！

セクション2では前半にHTMLの概念を、後半にHTMLタグの用途を学びサンプルコードを実装していきます。セクション3では前半にCSSの概念を、後半にプロパティの意味と値の指定の仕方を学び、スタイルシートを書いてHTMLを装飾していく方法について学びます。4は、JavaScriptというプログラミング言語を使ってプログラミングの基本的概念を学ぶ、というセクションです。ここで学んだ知識は他のプログラミング言語にも応用可能な基本的概念になります。セクション5では、DOMやイベントといったJavaScriptとHTML/CSSの組み合わせならではのWebページに動きをつける、というプログラミング手法を学びます。

各セクションの終わりにはそこまで学んだことの集大成として演習課題があります。もじゃもじゃラボサイトの構築です。3つの課題はすべてつながった課題となっていて、HTMLの課題でできたものに対してCSSの課題を付け足し、その後にJavaScriptの課題を付け足します。すべての演習課題をこなすと、完結した動きのある1つのWebページが完成します。

★デザイナー（Web制作）とエンジニア（Web開発）の違い

Web系のお仕事での役割を大きく分けると次の2つが挙げられます。

• デザイナー（Web制作）

• エンジニア（Web開発）

簡単に言うと、前者はホームページ等のブラウザに表示される部分をHTML/CSS/JavaScriptを駆使して構築するお仕事、後者はホームページの見える部分の後ろ側（サーバ上）で動く計算などの処理を他のプログラミング言語で実装するお仕事です。フロントエンド、バックエンドという言い方もあります。

ただ、近年この役割の境界線が曖昧になりつつあります。デザイナーもプログラムを書きますし、エンジニアも見た目を意識することが大事になってきています。どちらもクリエイターという部分で根っこは同じなんです。

本講座では、HTML/CSS/JavaScriptをセットで効率的に学び、HTML/CSSの基礎を通してWebページ作成の仕方を学びます。JavaScriptでは、変数や制御文、関数といった他の言語にも応用できるプログラミングの基本的概念を身につけます。

★変更履歴

• 2025/11/13 HTMLとCSSのセクションにロールプレイを追加しました。

• 2025/01/18 "JavaScriptって何？のセクションで実装する「はじめてのJavaScript」を外部ファイル形式にする動画を付け足しました。

• 2025/01/15 "ボックスモデルって何？"のセクションに「ブロックレベル要素/インライン要素」のサンプルコードを追加

• 2024/02/06 JavaScriptのレッスンにコーディング演習を追加

• 2024/01/30 「Webページ閲覧の仕組み 〜リクエストとレスポンス〜」のレッスン動画を追加

• 2022/02/20 HTML文書の構造についてのコーディング演習と、グループとセクションを使ったコーディング演習を追加（随時更新予定）

• 2022/01/24 「タグの種類 〜テーブル〜」のサンプルソースコードで使用しているtableタグのborder属性のについて注意点を補足

• 2022/01/14 「DOM 〜オブジェクトとは〜」のレッスン動画を刷新！

• 2021/09/01 全レクチャーへの字幕追加作業が完了

• 2021/08/16 各レクチャーに字幕追加作業を開始

• 2021/08/13 「本講座のJavaScriptサンプルコードで使っている命令文についての注意点」のレクチャーを追加

• 2021/07/14 「Visual Studio Codeとサンプルコードを横に並べる方法」の動画を追加

• 2021/03/23 「【補足】文字コードについて〜UTF-8って〜」のレクチャーをテキストから動画に変更

• 2021/03/03 「【補足】ボックスモデルの注意点とその対処法」のレッスン動画を追加

• 2021/02/06 「タグの種類 〜埋め込み〜」の動画にvideoタグとaudioタグの補足説明を追加

• 2021/01/26 「ボックスモデルって何？」にブロックレベル・インライン要素の補足解説動画を追加

• 2021/01/21 「タグの種類 〜メタデータ・セクション〜」のセクションのタグについての解説を見直し

• 2021/01/10 「タグの種類 〜フォント・行〜」のスタイル適用後のイメージを追加

• 2021/01/06 「タグの種類 〜背景〜」のスタイル適用後のイメージを追加

• 2021/01/05 「タグの種類 〜フォーム〜」のチェックボックスとラジオボタンの解説にlabelタグを使った時の効果について解説を追加

• 2021/01/05 「タグの種類 〜HTMLタグを機能的に分類してみた〜」にインタラクティブの動きの解説を追加

• 2020/12/25 「プログラミング演習問題の答えあわせ（解説）」の動画を追加

• 2020/12/22 「デザイン演習問題の答えあわせ（解説）」の動画を追加

• 2020/12/18 「マークアップ演習問題の答えあわせ（解説）」の動画を追加

• 2020/12/16 「本講座でプログラムを書く前の事前準備」の動画と「素材のダウンロード」動画を追加

• 2020/12/15 「プログラミングを学ぶ際の心構え」の動画を追加