Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
6
Help us understand the problem. What is going on with this article?
@i-ryo

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

6
Help us understand the problem. What is going on with this article?
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
i-ryo
フロントエンドエンジニア。神奈川に住まう四十路のオジキ。 DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。ブログも書いてます。 Webづくり やりたい時が 始め時!

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
6
Help us understand the problem. What is going on with this article?