HTML CSS　Javascript基礎講座（プロフィール作成）

０から学ぶHTML CSS　Javascript講座。

Last updated 6/2025

Japanese

What you'll learn

5 sections • 35 lectures • 2h 25m total length

自己紹介とコースの概要0:42
実際のアプリの概要を画面にて説明しています。また完成品を使用して制作物をイメージ出来るようにHTML CSS Javascriptの役割を説明しています。
visual studio codeのインストール2:38
デスクトップにフォルダー作成1:04
VSコード内にHTML、CSS、JavaScriptのファイル作成2:20

HTML 作成（HTMLの説明）1:19
①HTMLの説明（HTMLとは何かを説明しています）
②HTMLのひな形を作成
HTML 作成(Formの作成)2:02
①HTMLのForm作成を行います。
HTML 作成(pタグの作成）2:22
①HTMLのpタグを使って文字を反映させます。
HTML 作成（inputタグとlabelの説明)1:12
HTMLのlabelとinputタグの説明を行っています。
HTML 作成(image画像の作成）6:13
①画像のlabel作成を行います。。
②spanタグで文字を表示させます。
③画像のinputタグの作成を行っています。
HTML作成(名前のlabelとinputタグの作成)3:06
①名前のlabelを作成します。
②名前のinputタグを作成します。
HTML作成（日付のlabelとinputタグの作成)1:47
①日付のlabelを作成しています。
②日付のinputタグを作成しています。
HTML作成（住所①作成)7:03
①Selectとoptionの説明を行っています
②住所①の作成（都道府県の選択）を行っています。
HTML作成（住所②作成）1:48
①住所のlabelを作成しています。
②住所のinputタグを作成しています。
HTML作成（番地作成）1:54
HTML作成（学歴の項目作成）4:39
HTML作成（職歴の項目作成）16:18
HTML作成（ボタンの作成）2:00

CSS作成( CSSの説明)0:29
①CSSとは何かの説明を行っています。
CSS作成(HTML内にCSSの設定)1:00
①HTML内にCSSの設定を行っています。
CSS作成(bodyの作成)4:43
CSS作成(registrationformの作成)19:21
①HTMLで作成したregistrationのclassに対してCSSを当てています。
CSS作成(file-input-containerの作成)3:06
①HTMLで作成したfile-input-containerのclassに対してCSSを当てています。
②HTMLで作成したfile-input-containerのpタグに対してCSSを当てています
CSS作成(imageの作成)8:28
CSS作成（inputタグ作成）3:48
CSS作成（form-check作成）2:45
①職歴で作成したform-checkに対してCSSを当てています。
CSS作成（buttonの作成）6:01

JavaScript 作成（①JavaScriptの説明②HTML内に設定を行う)1:25
①JavaScriptとは何かの説明を行っています。
②HTML内にJavaScriptを反映させるための設定を行っています。
JavaScript 作成（関数の説明)2:39
①JavaScriptの関数の説明を行っています。
javascript作成(HTMLから要素の取得を行う)6:38
①関数を作成してHTMLから要素の取得を行っています。
javascript作成(条件分岐の説明)2:41
①条件分岐とは何かの説明を行っています。
JavaScript作成(条件分岐の作成)6:50
①条件分岐の作成を行っています。
JavaScript作成（関数を作成して条件分岐の実行作成）9:49
①条件分岐が適応されるように実行するための関数を作成しています。

この講座ではプログラミング（HTML、CSS、JavaScript)を使ってプロフィールの作成を行います。初心者の方にも

理解できるように丁寧に解説しております。またこれからプログラミングに挑戦してみたい方や現在プログラミング

を学習している方にも役立つ内容になっていると思います。

・講座を通して出来るようになること

・HTMLの基礎が理解できる（実際によく使用する記述を厳選して解説しております。そのため必要な知識の習得

が可能になっております。）

・CSSの基礎が理解できる（HTMLの見た目を装飾するCSSではデザインなどもこだわりながら解説しております。）

・JavaScriptの基礎が理解できる（関数や条件分岐といったプログラミン言語で共通する知識を実際に手を動かしながら

覚えられます）

・WEB制作の知識が見に付く。（WEB制作では主にHTMLとCSSとJavaScriptが使用されています。この講座を一通り

行うことで幅広いwebの知識や実際に実務でよく使用するコードを理解することが出来ます。)

・講座の対象者

・プログラミングを学んでみたい初心者の方

・現在プログラミングを学習中の方