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はこちら！