【HTML、CSS、JSの書式】これを読めばコードが読める！書ける！まとめ！

Webサイトを作ってみたいが、作り方がわからない！そんな方向けに

• HTML、CSS、JSの位置付けを理解する
• 人が書いたコードが読めるようになる
• CodePenで自分でも書いてみる

というステップでWebサイト作りができるようになる記事を書きました。下記にまとめます。

Webの基礎知識

まず、HTML、CSS、JSの位置付けを理解する。

• HTML：文書構造
• CSS：見た目
• JS：動作、変更

※参考：【Webの基礎知識】書ける前に読む！HTML、CSS、JSの書式-1

HTMLの基本

タグと閉じタグで囲う「要素」の解説。

<!--DOM要素-->
<タグ名 属性="値">テキスト</タグ名>

※参考：【HTMLの基本】書ける前に読む！HTML、CSS、JSの書式-2

CSSの基本

「セレクタ」「プロパティ」「値」などの解説。

/*セレクタ*/
セレクタ {
    プロパティ: 値;
}

※参考：【CSSの基本】書ける前に読む！HTML、CSS、JSの書式-3

JSの基本-前編（オブジェクト、関数、変数）

オブジェクト指向「オブジェクト（何が）」「プロパティ（どうなる）」「メソッド（どうする）」や「DOM」「変数」「関数」などを解説。

//プロパティ
オブジェクト.プロパティ = 値;

//メソッド
オブジェクト.メソッド(引数);

//変数
var 変数名 = 値;

//関数
function 関数名(引数){
//処理
}

※参考：【JSの基本-前編】書ける前に読む！HTML、CSS、JSの書式-4

JSの基本-後編（イベント、制御構造）

イベントと制御構造の解説。イベントは「いつ」にあたる部分。制御構造は「分岐」と「反復」。

//イベントリスナ
オブジェクト.addEventListener("イベント名", 
//処理
, false);

//if文（分岐）
if (条件式) {
//処理
}

//for文（反復）
for (初期化式; 条件式; 増減式) {
//処理
}

※参考：【JSの基本-後編】書ける前に読む！HTML、CSS、JSの書式-5

ソースコード

GitHubにソースコードを追加（2020/07/24追加）

※参考：ソースコード

※参考：プレビュー

HTML、CSS、JSの基本（動画版）

上記の内容を抜粋した動画版。CodePen使ってYoutube上でライブコーディングしてみた。

※参考：CodePenでHTML、CSS、JSを体験しよう【クモコツ一人もくもく会-1】

YoutubeのURLはこちら！

※参考：CodePenでHTML、CSS、JSを体験しよう【クモコツ一人もくもく会-1】