★本講座は、未経験・初心者の方のためのHTML/CSS/JavaScript入門です
プログラミングを習得することは簡単なことではありません。業界特有の用語だったり略語だったり、同じものを使う場面によって違う呼び方をするなど、私はこれがプログラミングをよりわかりづらくしてしまっている一つの要因だと考えています。この講座では、ココをいかに簡単に表現するかということに注力しています。
プログラミングを習得していくためのノウハウや、糸口をつかめるようなヒントをかみ砕いた表現で解説しています。
★こんなことを学びます
本講座は6つのセクションに分かれます。
レッスンを始める前に
HTML超入門！押さえておきたいマークアップの基本
CSSデザインの基礎を学ぼう！Webデザインに最低限必要な知識
JavaScriptでプログラミングの基本的概念を学ぼう！
HTML/CSS/JavaScriptの組み合わせならではの、Webページに動きをつけるプログラミングを学ぼう！
修了おめでとうございます！
セクション2では前半にHTMLの概念を、後半にHTMLタグの用途を学びサンプルコードを実装していきます。セクション3では前半にCSSの概念を、後半にプロパティの意味と値の指定の仕方を学び、スタイルシートを書いてHTMLを装飾していく方法について学びます。セクション4は、JavaScriptというプログラミング言語を使ってプログラミングの基本的概念を学ぶ、というセクションです。ここで学んだ知識は他のプログラミング言語にも応用可能な基本的概念になります。セクション5では、DOMやイベントといったJavaScriptとHTML/CSSの組み合わせならではのWebページに動きをつける、というプログラミング手法を学びます。
各セクションの終わりにはそこまで学んだことの集大成として演習課題があります。もじゃもじゃラボサイトの構築です。3つの課題はすべてつながった課題となっていて、HTMLの課題でできたものに対してCSSの課題を付け足し、その後にJavaScriptの課題を付け足します。すべての演習課題をこなすと、完結した動きのある1つのWebページが完成します。
初めて自作したプログラムが、動いた時の感動を体感しましょう！
★プログラミングを学ぶ際の心構え
上達するためには慣れが必要
プログラミングに慣れていくために、たくさんのプログラムを書いていきましょう。問題が発生した時には自ら調べて解決していく、ということも必要です。
正解はひとつではない
はじめはあれこれ気にせず、思うままにプログラムを書いていきましょう。
わりきり
全てを暗記する必要はありません。ざっくり「こんなことができる」ということを知っていることが大事です。
この講座では、自立したエンジニアになるための取っ掛かりとして、HTML/CSS/JavaScriptの最低限の基礎知識とノウハウを提供しています。
★プログラミング言語について
現代のプログラミング言語はとても多岐にわたっています。Java、PHP、Ruby、Python、JavaScript、C#、C++、Kotlin、Swift…などあげるとキリがありません。
いったい今旬な言語はなんなのか？シェアが高い言語はなんなのか？将来性がある言語はなんなのか？迷うと思います。
シェアが高いのはJava?でも将来性のあるAIによく使われるのはPythonでは？Windowsを使うことが多いのでMicrosoft系でC#かな？スマホアプリもやりたいし、、、など。
何から取り掛かるかは大きな問題ではありません！
関数や制御文といったプログラミングの基本的概念は、言語が変わっても大きくは変わらないからです。何か一つの言語を押さえてしまえば、比較的容易に他の言語の習得に取り組むことが可能です（もちろん、なんでも簡単にできるようになるわけではありません）。
ただ、はじめるにあたって言語毎のメリット・デメリットはあります。例えば、いくつかのインストールが必要で環境構築が必要なものは初学や独学で進めるのは少し難しいです。AIをはじめるにはプログラミング以外にも数学や機械学習のような違う知識も必要になってくるかもしれません。パソコン以外にいくつかの端末が必要になってくる場合だと、学習以外にもコストが発生してしまい辛いところもあるでしょう。
だとしたら、まずははじめるのに敷居の低いものから取りかかっても良いのではないでしょうか。HTML/CSS/JavaScriptはパソコンがあればはじめられます。
今後どの分野に進んだとしても、ホームページなどに使われるHTMLやCSSといったWebの知識はあった方が良いでしょう。JavaScriptではプログラミングの基本を学べます。
余談ですが、経験上何か新しいことをはじめるのに年齢は関係ないと思っています。エンジニアとしての一歩を踏み出してみませんか？
★デザイナー（Web制作）とエンジニア（Web開発）の違い
Web系のお仕事での役割を大きく分けると次の2つがあげられると思います。
簡単に言いますと、前者はホームページ等の表示される部分をHTML/CSS/JavaScriptを駆使して構築するお仕事、後者はホームページの見える部分の後ろ側（サーバ上）で動く計算などの処理を他のプログラミング言語で実装するお仕事です。フロントエンド、バックエンドという言い方もあります。
ただ、近年この役割の境目が曖昧になりつつあります。デザイナーもプログラムを書きますし、エンジニアも見た目を意識することが大事になってきています。どちらもクリエイターという部分で根っこは同じなんです。
本講座では、HTML/CSS/JavaScriptをセットで効率的に学び、HTML/CSSの基礎を通して、Webページ作成の仕方を学びます。JavaScriptでは、変数や制御文、関数といった他の言語にも応用できるプログラミングの基本的概念を身につけます。
★変更履歴
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 StudioCodeとサンプルコードを横に並べる方法」の動画を追加
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 「プログラミングを学ぶ際の心構え」の動画を追加
