6
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

【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】

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
6
Help us understand the problem. What are the problem?