LoginSignup
7

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-10-20

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】

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
7