以前、「書ける前に読む！HTML、CSS、JSの書式」*1という連載記事を書きました。コードを書くにはまず読める方が先という考えから、コードの読み方をHTML→CSS→JSにステップアップ方式で解説しました。当ブログでは様々なテーマを連載していますが、そのどこからでもたどり着けるような記事にしたかった。
この記事はその内容を一つにまとめた物です。当ブログのあらゆる記事からいつでもたどり着ける「Webの基本」のメルクマールです。
※目次：
- HTML、CSS、JSの基本（動画版）
- Webの基礎知識
- HTMLの基本
- CSSの基本
- JSの基本-前編（オブジェクト、関数、変数）
- JSの基本-後編（イベント、制御構造）
- JS応用編：生JS、ライブラリ、フレームワーク
- まとめ
HTML、CSS、JSの基本（動画版）
※2019/09/30追記
本記事の概要に当たる内容をプログラミング実況してみました。ぜひご覧ください！
※参考：CodePenでHTML、CSS、JSを体験しよう【クモコツ一人もくもく会-1】
動画上で作ったCodePenはこちら。
See the Pen HTML, CSS, JS start by イイダリョウ (@i_ryo) on CodePen.
Webの基礎知識
「書ける前に読む！」の第一回は全体の概要編です。Webの仕組みを形作る「サーバサイド（バックエンド）」「クライアントサイド（フロントエンド）」の違い。そしてフロントエンドを形作る3つの言語「HTML」「CSS」「JS」それぞれの役割分担を解説しています。
- HTML：文書構造
- CSS：見た目
- JS：動作、変更
※参考：【Webの基礎知識】書ける前に読む！HTML、CSS、JSの書式-1 - クモのようにコツコツと
HTMLの基本
第二回は「HTMLの基本」。Webの文書構造を司るHTML。その基本である「タグ」と「要素」。そしてタグの中にある「属性」。属性の中でも大事*2な「id名」「class名」の解説。絶対パス、相対パスの説明。head要素、body要素などHTMLの必須要素にも触れています。
※参考：【HTMLの基本】書ける前に読む！HTML、CSS、JSの書式-2 - クモのようにコツコツと
CSSの基本
第三回は「CSSの基本」。Webの見た目を司るCSS。その基本である「セレクタ」「プロパティ」「値」。プロパティの特殊系である「CSS関数」。
様々なセレクタとセレクタ同士の優先順位を解説。
付けすぎ注意な「!important」。「擬似クラス」と「擬似要素」。その他「属性セレクタ」「@ルール」なども解説しています。
※参考：【CSSの基本】書ける前に読む！HTML、CSS、JSの書式-3 - クモのようにコツコツと
JSの基本-前編（オブジェクト、関数、変数）
第四回からはJS。JSは盛りだくさんなので前後編に分けてお送りする。
前編では「オブジェクト指向」を形成する「オブジェクト（何が）」「プロパティ（どうなる）」「メソッド（どうする）」から始まりWebの特徴的なオブジェクト「DOM」を解説する。
そしてプログラミングに共通する概念である「変数」と「関数」も解説する。
※参考：【JSの基本-前編】書ける前に読む！HTML、CSS、JSの書式-4 - クモのようにコツコツと
JSの基本-後編（イベント、制御構造）
第五回JS後編は「イベント」と「制御構造」を解説。
イベントは「いつ」にあたる部分。「イベントハンドラ」と「イベントリスナ」の2つの書き方の違いについて。
制御構造は「分岐」と「反復」。分岐は「if文」「switch文」、反復は「for文」「while文」を解説する。
※参考：【JSの基本-後編】書ける前に読む！HTML、CSS、JSの書式-5 - クモのようにコツコツと
JS応用編：生JS、ライブラリ、フレームワーク
（※2018/10/26 追記）
すべての愛すべきjQueryerに送る。jQueryのその「次」へ進むための「生JS」「ライブラリ」「フレームワーク」の理解。
CSSの延長上のカンタン書式で「こいつ、動くぞ」を体験させてくれたjQuery。先人の作ったプラグイン資産たち。この経験を糧に「壁」を乗り越える。これを私は「脱」ではなく「卒jQuery」と呼びたい！
※参考：【卒jQueryへの道】生JSとライブラリとフレームワークの理解 - クモのようにコツコツと
まとめ
これを読んで「読めるぞ、私にもコードが読める！*3」となってくれれれば幸いです。
その時点でWeb制作の門は開かれています！世の中のあらゆるWebサイトのコードはブラウザの開発ツールで見放題。世界はお手本の大海原です。
コードを書くには環境構築は不要。テキストエディタで今すぐにでも始めることができます！
もっというと「CodePen」などのオンラインテキストエディタを使えばテキストエディタのソフトすら不要です。そしてここにも世界のクリエイターが作る素敵なWebコンテンツのお手本コードの大宇宙が広がっています！
「Web制作 やりたい時が 始め時！」
さあ、Webクリエイターになろう！
※参考：サーバサイドについてもまとめました！
【WordPress、PHP、SQL文】Webデザイナーでもわかるサーバサイドの基本まとめ！（6記事） - クモのようにコツコツと
