Help us understand the problem. What is going on with this article?

【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

HTML、CSS、JSの基本(動画版)

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

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

YoutubeのURLはこちら!

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

i-ryo
フロントエンドエンジニア。神奈川に住まう四十路のオジキ。 DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。ブログも書いてます。 Webづくり やりたい時が 始め時!
https://www.i-ryo.com
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした