HTML CSS のおすすめの教材9選！ 【 2024年11月 最新版】

HTMLとCSS、JavaScriptなどの Webの知識は、今や Webに関わる仕事はもちろんの事、アプリ開発やメディア制作など、あらゆる仕事に必要になっています。

これら、フロントエンド（表示される画面に関わる要素）を操るエンジニアを「フロントエンドエンジニア」などと呼びます。この講座では、そんなフロントエンドエンジニアになるための基礎知識となる、HTMLと CSS、プログラミング言語の JavaScriptを総合的に学びます。

スマートデバイスに対応した「レスポンシブWebデザイン」での、サイト制作や「CSSフレームワーク」を用いて、簡単に Webサイトデザインを行なう方法、そして JavaScriptでは「Ajax通信」や「jQuery/Vue.js」などの「JavaScriptフレームワーク」を用いたプログラミング開発まで学ぶことができます。

本講座を修得すれば、簡単な Webページなら自分の力で組み上げることができるようになるでしょう。また、他のチームメンバーが作った Webページの構造を理解し、変更したり、制作に参加するといった事もできます。

なお、本講座は同じ作者の、『これからWebをはじめる人のHTML&CSS, JavaScriptのきほんのきほん（マイナビ出版刊）』に基づいて映像講義にしています。本講座だけでも学ぶことができますが、書籍を手元に置けばより理解が深まることでしょう。合わせてご利用ください。

1. はじめに
2. Udemyでの受講について
3. Webの開発環境を整えよう（macOS編）
4. Webの開発環境を整えよう（Windows編）
5. 入会フォームを HTML/CSSで作成しよう（2023年改訂）
6. HTMLファイルを作ってみよう
7. HTMLタグを書いてみよう
8. 「属性」でHTMLタグを調整しよう
9. パスワード入力欄を作ろう
10. HTMLの基本タグを挿入しよう
11. （補足） lang属性について
12. HTMLのheadタグに文字コードやタイトルを挿入しよう
13. タグの入れ子構造と、空要素の書き方
14. CSSを書いてみよう
15. Webで利用する単位
16. CSSを内部参照で書こう
17. CSSを外部参照で書こう
18. ファイルのパスについて知ろう
19. sanitize.cssでブラウザーごとのCSSの差異をなくそう
20. サニタイズとリセットの違いを知ろう
21. CSSの優先順位を知ろう
22. @importでCSSを読み込もう
23. divタグでレイアウトを調整しよう
24. Webで色を指定するカラーコードを知ろう
25. marginプロパティで余白を調整しよう
26. borderプロパティで枠線を引こう
27. paddingプロパティで内側の余白を調整しよう
28. テキスト入力フィールドのスタイルを整えよう
29. ボタンのスタイルを調整しよう
30. テキストフィールドにラベルを設定しよう
31. 必須項目ラベルを追加しよう
32. 入会申し込みフォームを仕上げよう
33. 復習テスト
34. レスポンシブWebデザインで、スマホ対応のサイトを作ろう（2023年改訂）
35. CDアルバムの紹介ページを作ろう
36. HTMLの基本タグを作成しよう
37. セクショニングコンテンツでエリアを分けよう
38. CSSでスタイルを整えよう
39. 子孫型セレクターで要素を指定しよう
40. imgタグで画像を入れ込もう
41. Webで使える画像の種類
42. floatプロパティで画像と文章を回り込ませよう
43. Flexible Boxで柔軟なレイアウトをしよう
44. ol, liタグでリストを作ろう
45. aタグでリンクを設置しよう
46. CSS Gridでグリッドレイアウトをしよう
47. 収録曲リストのスタイルを整えよう
48. 文字参照でコピーライトを挿入しよう
49. Webフォントでフォントを変更しよう
50. メディアクエリーでスマホ向けレイアウトを作ろう
51. max-widthプロパティで画面幅に沿うリキッドレイアウトにしよう
52. 全体のスタイルを整えて仕上げよう
53. CSS Transitionでアニメーションを作ろう①
54. CSS Transitionでアニメーションを作ろう②
55. 復習テスト
56. Flexible Boxと CSS Grid Layoutをより詳しく学ぼう
57. Flexbox：各プロパティを学ぼう
58. Flexbox：各子要素のプロパティを学ぼう
59. CSSGrid：グリッドレイアウトの各プロパティを学ぼう
60. CSSGrid：各子要素のプロパティを学ぼう
61. CSSGrid：セルをまたいだセルを作ろう
62. CSSGrid：grid-template-areasプロパティを利用した指定をしよう
63. Bootstrapで素早く Webページを作ろう【2023年版】
64. Bootstrapで簡単にフォームを作ろう
65. CDNでBootstrapを使おう
66. Containerを使って画面幅を調整しよう
67. Spacingを使って、余白を簡単に調整しよう
68. 背景やテキスト色をBootstrapで調整しよう
69. Bootstrapのグリッドシステムを理解しよう
70. Containerを分けて、全画面幅の要素を追加しよう
71. テキストフィールドを使おう
72. テキストフィールドのさまざまな種類
73. セレクトボックスを使おう
74. チェックボックスを使おう
75. ラジオボタンを使おう
76. フレキシブルボックスをBootstrapで簡単に使おう
77. テキストエリアを使おう
78. ボタンを使おう
79. バッヂを使って、必須ラベル・任意ラベルを追加しよう
80. 確認テスト
81. EmmetでHTML/CSS入力を楽しよう
82. これ以降のレクチャーについて
83. Emmetとは
84. HTMLタグをEmmetで書こう
85. 応用的なHTML Emmet
86. EmmetでHTMLの属性を記述しよう
87. HTML Emmetでの要素の省略
88. CSSもEmmetで書こう
89. ショートハンドCSSをEmmetで書こう
90. Emmetのアクション機能①
91. Emmetのアクション機能②
92. snippets.jsでEmmetをカスタマイズしよう
93. EmmetにオリジナルのHTML、CSSスニペットを作ろう
94. CSSの単位について詳しく知ろう
95. CSS単位の基本、px（ピクセル）
96. 印刷由来の単位、in, cm, mm, q, pc, pt
97. 相対長の単位、%、em、ch, ex, lh
98. ルート基準の単位指定 rem, rlh
99. ビューポートを基準とした単位 vw, vh, vmin, vmax, svw, svh, lvw, lvh, dvw, dvh
100. 論理的プロパティ vi, vb
101. JavaScript入門：JavaScriptの基本を知ろう
102. サンプルファイルについて
103. JavaScriptで計算結果を表示しよう - document.write
104. JavaScriptのルールを知ろう
105. バグの発生とデバッグ作業をしよう
106. さまざまな計算をしよう - 算術演算子
107. データ型について知ろう
108. 文字列と数字をつないで計算式を表示しよう - 文字列連結
109. プログラム内にコメントを書こう
110. 警告ウィンドウを表示しよう - window.alert
111. 変数・定数を知ろう
112. 代入演算子について知ろう
113. ウィンドウのタイトルを書き換えよう - プロパティ
114. ユーザーの入れた金額の税込金額を求めよう - window.prompt
115. データ型を変換しよう
116. 計算機を作ろう
117. JavaScript入門：オブジェクト指向プログラミングを知ろう
118. 今日の日付を表示しよう - Dateオブジェクト
119. 小数を切り捨て、切り上げ、四捨五入をしよう - Mathオブジェクトと静的メソッド
120. 関数を作ろう
121. サイコロを振るプログラムを作ってみよう
122. JavaScript入門：HTMLを操作しよう
123. JavaScriptでHTMLを書き換えよう - DOM
124. ボタンのクリックに反応しよう - イベント
125. イベント定義を無名関数で書こう
126. フォームパーツを復習しよう
127. テキストフィールドの内容を受け取ろう
128. テキストフィールドに入力されているかを確認しよう - if
129. 比較演算子について知ろう
130. 複数の条件を繋げる論理演算子について知ろう
131. 1から100までの数字を表示しよう - for
132. サイコロで1が出るまで繰り返そう - while
133. 少なくとも一回は実行される do while構文を知ろう
134. サイコロで1が出たら終わりにしよう - break
135. 都道府県の情報を画面に表示しよう
136. for of構文で繰り返そう
137. 都道府県にそれぞれのキーをつけて管理しよう - 連想配列
138. 配列操作のメソッドを知ろう
139. 開発者ツールに表示しよう - console.log
140. 都道府県を地域で分けて管理しよう - 多次元配列
141. ID属性以外の方法で要素を取得しよう - querySelector
142. 各種フォームパーツから値を取得しよう①
143. 各種フォームパーツから値を取得しよう②
144. パスワードを生成するツールを作成しよう
145. JavaScript入門：クラス宣言でオリジナルのオブジェクトを作成しよう
146. 商品管理クラスを宣言しよう
147. オリジナルのメソッドを定義しよう
148. ゲッター・セッターでプロパティを守ろう
149. コンストラクタでクラスの初期設定をしよう
150. 子クラスを定義してクラスを分けよう
151. 年齢計算プログラムを作成しよう
152. プログラムを外部ファイル化しよう
153. 【旧カリキュラム】JavaScriptで今日の日付を表示しよう
154. ここから先のレクチャーについて
155. HTML/CSS：画面を作り上げよう
156. JavaScript：オブジェクト・メソッド・パラメーター
157. JavaScript：文字列・数字と四則演算、文字列連結
158. JavaScript：変数の扱い
159. new Dateのパラメーターについて
160. JavaScript：オブジェクトとインスタンス
161. JavaScript：Dateオブジェクトを使ってプログラムを仕上げよう
162. 【旧カリキュラム】イベントドリブンな、ストップウォッチプログラムを作成しよう
163. HTML/CSS：画面の見た目を作成しよう
164. JavaScript：getElementByIdとプロパティで要素を書き換えよう
165. JavaScript：if構文で条件に沿ったプログラムを作ろう
166. JavaScript：function（関数）定義をしよう
167. JavaScript：イベントドリブンなプログラムを作成しよう
168. JavaScript：setIntervalで定期的に実行されるプログラムを作ろう
169. JavaScript：変数のスコープを理解しよう
170. JavaScript：秒数から、分と時を計算しよう
171. JavaScript：thisを使って、STOPボタンを実装しよう
172. 【旧カリキュラム】Ajax通信でフォトライブラリーを作成しよう
173. HTML/CSS：ページを形作っていこう1 - position: fixed
174. HTML/CSS：ページを形作っていこう2 - position: relative, absolute
175. JavaScript：JSONデータを配列で操ろう
176. JavaScript：createElementと appendChildで HTML要素を作ろう
177. JavaScript：for構文で繰り返し処理をしよう
178. 【補足】利用した画像ファイルは次のレクチャーでも利用してください
179. JavaScript：Ajax通信を行なおう
180. JavaScript：Ajax通信で受信したデータを処理しよう - 論理演算子
181. JavaScript：画面を仕上げよう
182. 【旧カリキュラム】JavaScriptライブラリーを利用しよう
183. jQuery：jQueryを使ってみよう
184. jQuery：Ajax通信を行なってプログラムを仕上げよう
185. Vue.js：Vue.jsを使ってみよう
186. Vue.js：Vue.jsで画面を作り上げよう

Web開発のスキルを身につけて、エンジニアとして開発を楽しんでみませんか？

Web開発を行うには、
特定のプログラミング言語だけではなく、数多くの周辺知識が必要なため、
それらを一つずつ学習していくと、情報の収集/取捨にたくさんの時間がかかります。

もし、どこから学ぶべきか迷っているなら、当コースがおすすめです。

また、一つのプログラミング言語を学んでみたものの、
応用する方法がわからなかった方にもおすすめします。

当コースでは、
実際にアプリケーションを開発しながら
Web開発で必要になる知識やスキルを一気通貫で学習することができるため、
当コース1本で一連の知識や技術が身につきます。

もちろん初学者でも安心してご受講いただけるように、
図も多く利用しており、理解の助けになるよう工夫もしていますので、
ご安心ください！

コースの概要は以下のとおりです。

-----------------------------------------

STEP1 ： Webシステムの概要を理解する

まずは、手始めに私達が学習する対象の概念について理解するところから始めます。
学習対象がどんなものなのかを理解し、目的をしっかりと明確にしていきます。

STEP2 ： 開発環境を整える

ここで、コース中で利用するものについて大まかにお話します。
その上で次のステップからすぐ利用することになる開発のための道具を整えます。

STEP3 ： Webシステムを公開する

当コースで一番大きな部分です。

ここでWeb開発における基本的なパーツを一つずつ理解して、実装をしていきます。
STEP3が完了したら、Webページがインターネット上で独自ドメインで公開できている状態になります。
HTML / CSS / JavaScript / PHP / EC2 など、一つずつおさえていきましょう。

プログラミング初心者でもわかるように、図も多用していますので、
論理的に考えることが苦手、という方でも安心して進めていただけます。

STEP4 ： ファイルを効率よく管理する

このSTEPでは、ファイルを効率的に管理するために
バージョン管理システムのGitと、Gitのホスティングサービスの中では一番利用者の多いGithubを学びます。

Web開発をしていると、たくさんのファイルを作成・更新しなければならないため、
開発効率を上げるため、ここでGitの概念を学び、
そして実際に操作をしながらGitのスキルを身に付けていきましょう。

STEP5 ： 先人が作った機能を利用して開発を加速させる

世界中には数多くのエンジニアが、様々なツールを公開しています。

ここでは、公開されているツールやオープンソースソフトウェアを活用して開発を更に加速させていきます。
それらを利用するための環境構築もかんたんに行えるようにDockerというツールを利用します。
Dockerは昨今のWeb開発現場では利用されるケースも増えてきたので押さえておきたいテクノロジーの一つです。

よりかんたんに開発環境を作成できるようになったら
Webフレームワークを活用し、Webアプリケーションを作成していきましょう。

STEP6 ： 他のサービスと自分のプログラムを連携させる

最後のステップでは、他のサービスをプログラミングで操作できるWebAPIについて学びます。
ここで、APIの概念、そして他のサービスとの連携を学び、アイデア次第で様々なことができるようになります。
またWebhookを学ぶとそのアイデアの可能性も更に広がるでしょう。

一番最後に腕試しとして、一つ課題があるのでぜひチャレンジしてみてください。

ここまでやりきったあなたならきっとできるはず！！

-----------------------------------------

それでは、コース内でお会いできることを楽しみにしております！

1. はじめに
2. コース紹介
3. はじめに
4. 講師紹介
5. 全体の流れ
6. STEP1. Webシステムの概要を理解する
7. Webシステムとは？
8. クライアントの役割
9. サーバーの役割
10. まとめ - Webシステムの概要を理解する
11. STEP2. 開発環境を整える
12. 概要説明 - 開発環境を整える
13. VSCodeインストール（macOS用）
14. VSCodeインストール（Windows用）
15. 【資料】開発お助け資料のダウンロード
16. STEP3.1~3 【HTML/CSS】Webページを作ってみよう - 自分でWebシステムを公開する
17. HTMLとは
18. CSSとは
19. 概要説明 - Webページを作ってみよう
20. VSCodeの基礎的な操作方法
21. HTMLのサンプルを作ってみよう
22. HTMLでコンテンツを作ってみよう
23. Quizコンテンツの提案とMarkdownの紹介
24. CSSファイルの準備
25. フォントの指定
26. レイアウト調整
27. レイアウト調整2
28. レイアウト調整3
29. 文字の装飾
30. 擬似クラスを使った装飾
31. まとめ - Webページを作ってみよう
32. HTML / CSS 実装までのサンプルコードについて
33. STEP3.4 【JavaScript】Webページに動きを与えてみよう（JavaScript編） - 自分でWebシステムを公開する
34. 概要説明 - Webページに動きを与えてみよう（JavaScript編）
35. JavaScriptの実行方法
36. 変数 - JavaScript 基礎
37. 配列 - JavaScript 基礎
38. オブジェクト - JavaScript 基礎
39. 関数 - JavaScript 基礎
40. 条件分岐 - JavaScript 基礎
41. JavaScriptでHTMLを操作するときの準備 - JavaScriptでHTMLの操作
42. HTMLの要素をJavaScriptで操作する - JavaScriptでHTMLの操作
43. イベントの設定 - JavaScriptでHTMLの操作
44. QuizアプリをJavaScriptで実装 その1
45. QuizアプリをJavaScriptで実装 その2
46. QuizアプリをJavaScriptで実装 その3
47. QuizアプリをJavaScriptで実装 その4
48. まとめ - Webページに動きを与えてみよう（JavaScript編）
49. JavaScript 実装までのサンプルコードについて
50. STEP3.5 【AWS EC2 / NGINX】Webサーバーを作ってみよう - 自分でWebシステムを公開する
51. 概要説明 - Webサーバーを作ってみよう
52. これからやること - Webサーバーを作ってみよう
53. AWSの料金体系について
54. AWSのアカウント作成
55. AWSアカウントのセキュリティ強化
56. Amazon EC2とは？
57. EC2基本操作（起動）
58. EC2基本操作（停止・終了・再作成）
59. Terminal（ターミナル）の概要
60. ターミナルの準備（macOS用）
61. ターミナルの準備（Windows用）
62. 準備 - Terminal（ターミナル）基本操作
63. 練習1（pwd ls cd）- Terminal（ターミナル）基本操作
64. 練習2（touch mkdir cp）- Terminal（ターミナル）基本操作
65. 練習3（mv rm） - Terminal（ターミナル）基本操作
66. まとめ - Terminal（ターミナル）基本操作
67. Terminal（ターミナル）でファイルを準備（macOS用）
68. Terminal（ターミナル）でファイルを準備（Windows用）
69. 補足資料：ターミナルの準備（Windows用）
70. 作業の流れを確認 - Webサーバーを作ってみよう
71. 【お知らせ】amzon-linux-extras コマンドが利用できなくなった件について
72. EC2にログイン - Webサーバーを作ってみよう
73. EC2にファイルをアップロード・ダウンロード - Webサーバーを作ってみよう
74. NGINXをインストール - Webサーバーを作ってみよう
75. NGINXの設定ファイルを更新 - Webサーバーを作ってみよう
76. ファイルのアップロード・動作確認 - Webサーバーを作ってみよう
77. まとめ - Webサーバーを作ってみよう
78. STEP3.6. 【PHP】Webページに動きを与えてみよう（PHP編） - 自分でWebシステムを公開する
79. 概要説明 - Webページに動きを与えてみよう（PHP編）
80. PHPのインストール（macOS用）その1 brew インストール
81. PHPのインストール（macOS用）その2 php インストール
82. PHPのインストール（Windows用）
83. PHPコマンドを使って基礎を理解する
84. Quizのテンプレートファイルを準備（その1）
85. Quizのテンプレートファイルを準備（その2）
86. PHPの基本文法（その1）
87. PHPの基本文法（その2）
88. Quizをテンプレートで出力できるように実装する
89. PHPでファイルの操作 - Quizのコンテンツをファイルで管理する
90. CSVファイルの作成 - Quizのコンテンツをファイルで管理する
91. CSVファイルをPHPから読み込む - Quizのコンテンツをファイルで管理する
92. CSVから取得したデータの出力 - Quizのコンテンツをファイルで管理する
93. セキュリティ対策 - Quizのコンテンツをファイルで管理する
94. コードの整理 - Quizのコンテンツをファイルで管理する
95. GETやPOSTの基礎 - クライアントから送信されてきたデータを処理する
96. PHPのエラーについて（php.ini を変更して画面上にエラーを表示させる方法）
97. Quizの問題をURLパラメータで切り替え - クライアントから送信されてきたデータを処理する
98. Quizの解答チェックをPHPで実装 - クライアントから送信されてきたデータを処理する
99. 概要説明 - JSでリクエスト処理を実装
100. Quizの解答チェックをするリクエストを送信
101. JSでレスポンスを処理する
102. エラーレスポンスを実装
103. テンプレート読み込み処理を整理 - Quiz一覧の実装
104. Quizアプリを完成させる - Quiz一覧の実装
105. まとめ - Webページに動きを与えてみよう（PHP編）
106. PHP 実装までのサンプルコードについて
107. STEP3.7~8 【AWS EC2 / php-fpm】WebサーバーをPHPが動く環境にする - 自分でWebシステムを公開する
108. 概要説明
109. EC2 に php をインストールする方法について
110. サーバーにPHPをインストール
111. NGINXとphp-fpmの通信の方法について（UNIXドメインソケット）
112. NGINXとphp-fpmの設定を確認
113. NGINXとphp-fpmの動きについて解説
114. vimの操作練習
115. php-fpmの設定ファイルを書き換え
116. まとめ - WebサーバーをPHPが動く環境にする
117. WebサーバーでQuizアプリを確認 - Webサーバーの動作確認
118. まとめ - Webサーバーの動作確認
119. STEP3.9. 【DNS / SSL/TLS / AWS ALB&Route53&ACM】独自ドメインの取得と設定 - 自分でWebシステムを公開する
120. ドメインとサーバーとIPアドレス
121. 固定IPの設定
122. ドメイン取得
123. 概要説明 - SSL/TLS設定
124. SSL証明書を発行（ACM設定） - SSL/TLS設定
125. ALBの設定（その1） 概要説明 - SSL/TLS設定
126. ALBの設定（その2） ターゲットグループの作成 - SSL/TLS設定
127. ALBの設定（その3） セキュリティグループの作成 - SSL/TLS設定
128. ALBの設定（その4） ALBの作成と動作確認 - SSL/TLS設定
129. DNSの設定変更 - SSL/TLS設定
130. まとめ - 独自ドメインの取得と設定
131. STEP3. まとめ - 自分でWebシステムを公開する
132. 各リソースの後片付け
133. まとめ - STEP3全体
134. STEP4. 【Git / Github】ファイルを効率よく管理する
135. 概要説明 - ファイルを効率よく管理する
136. ファイルの管理方法について考える - ファイルを効率よく管理する
137. 概要説明 - GitとGithub
138. Gitのインストール（macOS用） - GitとGithub
139. Gitのインストール（Windows用） - GitとGithub
140. GitHub登録 - GitとGithub
141. GitHubの接続設定 - GitとGithub
142. 概要説明 - GitとGitHubでバージョン管理してみよう
143. 変更内容を記録する方法(コミット)に慣れる（概要説明） - GitとGitHubでバージョン管理してみよう
144. 変更内容を記録する方法(コミット)に慣れる（実践） - GitとGitHubでバージョン管理してみよう
145. ブランチ操作に慣れる（概要説明） - GitとGitHubでバージョン管理してみよう
146. ブランチ操作に慣れる（実践） - GitとGitHubでバージョン管理してみよう
147. コンフリクト（衝突）を解消する（概要説明） - GitとGitHubでバージョン管理してみよう
148. コンフリクト（衝突）を解消する（実践） - GitとGitHubでバージョン管理してみよう
149. コンフリクト（衝突）を解消する（補足説明） - GitとGitHubでバージョン管理してみよう
150. リポジトリの操作に慣れる（概要説明） - GitとGitHubでバージョン管理してみよう
151. リポジトリの操作に慣れる（実践） - GitとGitHubでバージョン管理してみよう
152. 「GitHubFlow」で、快適Gitライフ！（概要説明） - GitとGitHubでバージョン管理してみよう
153. 「GitHubFlow」で、快適Gitライフ！（実践） - GitとGitHubでバージョン管理してみよう
154. Sourcetree紹介
155. まとめ - ファイルを効率よく管理する
156. STEP5.1~3 【Docker】開発環境を整える - 先人が作った機能を利用して開発を加速させる
157. 概要説明 - 先人が作った機能を利用して開発を加速させる
158. OSSとは - 先人が作った機能を利用して開発を加速させる
159. 概要説明 - 開発環境を整える
160. 開発環境について - 開発環境を整える
161. Dockerの概要説明 - 開発環境を整える
162. コンテナのステータスについて - 開発環境を整える
163. DockerDesktopのインストール(macOS用) - 開発環境を整える
164. DockerDesktopのインストール(Windows用) - 開発環境を整える
165. イメージを取得/確認/削除 - DockerでNGINXを動かす
166. コンテナを作成/起動/停止/削除 - DockerでNGINXを動かす
167. イメージを作成 - DockerでNGINXを動かす
168. コンテナの詳しい操作 - DockerでNGINXを動かす
169. docker-composeについて- DockerでNGINXを動かす
170. 概要説明 - WordPressを動かしてみよう
171. 実践1 - WordPressを動かしてみよう
172. 実践2 - WordPressを動かしてみよう
173. STEP5.4~6 【Laravel】Laravelを使ってみよう - 先人が作った機能を利用して開発を加速させる
174. Webフレームワークとは
175. 概要説明 - Laravelを使ってみよう
176. LaravelのサンプルプロジェクトをDockerで動かす - Laravelを使ってみよう
177. 「Laravelのサンプルプロジェクト」でエラーが出る方へ
178. 概要説明 - LaravelでQuiz管理アプリをつくってみよう
179. 環境準備 / 起動 / 停止
180. Laravelを利用する際にインストールしておきたいVSCodeの拡張
181. routeとblade基礎（Viewの実装）
182. 各ページのテンプレートを作成（Viewの実装）
183. 削除ボタンの実装（Viewの実装）
184. リンクの修正（Viewの実装）
185. Controllerの作成（Controllerの実装）
186. 入力データのバリデーション（Controllerの実装）
187. ローカリゼーション（日本語化）（Controllerの実装）
188. DB基本（Modelの実装）
189. Laravelでテーブル作成（Modelの実装）
190. Modelクラスを使ったデータ操作（保存）（Modelの実装）
191. Modelクラスを使ったデータ操作（参照）（Modelの実装）
192. Modelクラスを使ったデータ操作（削除）（Modelの実装）
193. まとめ - Laravelを使ってみよう
194. まとめ - 先人が作った機能を利用して開発を加速させる
195. STEP6.1~2 【WebAPI】 LINEボットを作ってみよう - 他のサービスと自分のプログラムを連携させる
196. 概要説明 - 他のサービスと自分のプログラムを連携させる
197. APIとは？ - 他のサービスと自分のプログラムを連携させる
198. 概要説明 - LINEボットを作ってみよう
199. 全体構成 - LINEボットを作ってみよう
200. LINEDevelopers登録と設定（開発ドキュメントの確認）

--

本コースは2022年8月に大幅リニューアルを行い、書き方などを最新化しています。

--

「基礎レベルの事はわかるようになったけど、どうやってプロが作成するような本格的なサイトを組み立てていけばいいの！？」

「CSSやJSの基本的な文法や書き方は習得した。で、次は何を学べばいいの？」

「コードを整理するためにはどのように記載したらいいの？」

「もう一歩高いレベルの事を学びたい。」

「基本的な文法はなんとなく知っているけど、その先どのようにして成長していけばよいのかわからない？」

そんな悩みを持った方に最適のコースです。

私がまだ駆け出しエンジニアだった頃、基本的な文法を学んだ段階でまず思ったことは、

「で、どうやってこれで本格的なWEBサイトを組み立てていけばいいの？」

ということでした。

書籍やインターネットを探してみても、簡単なサイトを作りながら本当に基礎的な部分を教えているものばかりで、

もう一歩上のレベルの事を説明してくれるものは見つかりませんでした。

「どういった知識が必要なのか？どのようにして本格的なサイトを組み立てていくのか？何を覚える必要があって、何を覚えなくていいのか？」

私が初学者の時にはそんなことを思っていました。

今になって思うと随分遠回りをしたと思います。

今だと一瞬でできることでも、どのようにして実現すればよいのかがわからない状態では、
全く適切でない方法で１週間くらいかかって開発を行っていた時もありました。

「誰か実践的な書き方や方法を教えてくれないかな～。」

当時の私はそんな風に思っていました。

「こちらのコースでは今の私が当時の私に伝えたい、CSSとJavaScriptの知識を凝縮しました。」

WEB開発では覚えることがたくさんあります。

一方、皆さんの時間は有限でとても貴重なものです。

馬鹿正直に使わないHTMLタグを覚える必要はありませんし、すべてのCSSのスタイルについて覚える必要はありません。もちろん、JavaScriptの関数やメソッドについても同様です。

それよりも、もっと根本的なところで、「なぜ、そのような動きになるのか？」「なぜそのように実装するのか？」「どういったところに気を付けて学んでいけばよいのか？」について、学んでいきましょう。

「なぜそうするのか？」がわかっていれば、状況に応じて自分で最善の解決法を実装がでるようになります。そして、基礎を固めましょう。CSS、JavaScriptの基礎がわかっているとWEB開発が何倍も楽になります。また、新しくJavaScriptフレームワークやCSSフレームワークを使う際にも、学習効率は何倍にもなるでしょう。

こちらのコースは基本的な事を学んだレベルのWEB開発者をプロレベルまで一気に引き上げます。

• もし、あなたが体系的にJavaScript、CSSの基礎について学びたいのであれば、こちらのコースを是非受けてみてください。

• もし、あなたがCSS、JavaScriptの実装が思い通りにいかず、悩んでいるのであれば是非こちらのコースを是非受けてみてください。

• もし、あなたがCSS、JavaScriptの実践的な記述方法からコードの最適化について学びたいのであれば、こちらのコースを是非受けてみてください。

• もし、あなたがCSS、JavaScriptの中級者レベルに最短でなりたいのであればこちらのコースを是非受けてみてください。

２０時間のコースを終えた時、あなたにはこれまでと違う世界が見えているはずです。

＊＊こちらのコースでは以下の内容については扱いませんのでご承知おきください＊＊

• サーバーとの通信やサーバーへのデータリクエストの方法については扱いません。

• JavaScriptを使ったフォームのチェックや非同期通信については扱いません。

• サーバー側の実装（バックエンド開発）については扱いません。

• JSフレームワーク（ReactやVue）やCSSフレームワーク（Bootstrap等）を使った実装については基本的に扱いません。

  ※一部、JSライブラリを使用します。

• こちらのコースではES moduleを使ったJavaScriptの整理は行いません。
  WebpackでのJSファイルのバンドルも行いません。
  ※こちらのコースではJavaScriptのコード整理にclassを使用しますので、私が別で出しているWebpackのコースを参考にして、こちらのコースで作成した成果物のバンドルを是非試してみてください。

• 本コースで使用するSassはDart Sassとなります。（2022年8月にLibSassからDart Sassにリニューアルしました。）

1. はじめに
2. コース紹介
3. ★重要★コース受講の準備を行おう Part.1
4. コース受講の準備を行おう Part.2
5. プロジェクトの構成とコースの進め方
6. Udemyでの学習方法のアドバイス
7. ChatGPTで疑問を解決しよう！！
8. 超初心者の方はここからスタート
9. HTMLとは？HTMLの概要と文法について
10. HTMLのこれだけは知っておいて！インライン要素とブロック要素の使い分け
11. CSSとは？CSSの概要と文法について
12. CSSのこれだけは知っておいて！詳細度について
13. コード記述の効率化を学ぼう
14. 【Tips】コードの自動補完を使おう
15. 【Tips】Visual Studio Codeのショートカットを使おう
16. CSSの基礎から始めよう（Transition編）
17. 【導入】セクション紹介
18. 【丁寧に解説】まずはボタンを作りながら、CSSプロパティーを設定してみよう！
19. Transitionプロパティーの使い方を学ぼう（ボタンにホバーアクションを追加！！）
20. 【Sass】CSSをSassで記述してみよう！
21. 【Tips】Chromeの開発ツールの使い方について学ぼう
22. 【おさらい】CSSセレクターとSassネスティング
23. SassからCSSへの変換がうまくいかない時の対処法
24. ★重要★Live Sass Compilerのトランスパイル対象フォルダ
25. ホバーで影ができるボタンを作ってみよう
26. 【演習】色々なエフェクトのボタンを作ってみよう
27. 【解答】色々なエフェクトのボタンを作ってみよう
28. Transformプロパティーの使い方をマスターしよう
29. PositionとZ-indexをマスターして思い通りのレイアウトを組もう！！
30. Transform, Position, Z-indexの復習！背景色がスライドするボタンを作ってみよう！
31. ::before?::after?疑似要素を使って無駄な記述を減らそう！
32. タイミングファンクション(a.k.a easing-function)でアニメーションをオサレにしよう！
33. 【発展】3Dアニメーションでより豊かな表現方法を身に着けよう
34. 【発展】【演習】3Dアニメーション ~ キュービックのボタンを作成してみよう
35. HTML要素を思った通りに配置するレイアウト方法まとめ
36. セクション修了！お疲れ様です！
37. CSSを極めよう（Animation編）
38. 【導入】セクション紹介
39. 【簡単！】アニメーションを使って簡単なローダーを作ってみましょう！
40. 【文法】AnimationとKeyframesの文法を学ぼう！
41. 【Sass】@Mixinを使った一歩上のSassコーディング！！
42. Mixinのファイルを分割して管理してみよう
43. 【Part.1】Sassファイルの分割方法について学ぼう
44. 【Part.2】Sassファイルの分割方法について学ぼう
45. ★重要★DartSassへの移行対応（以降のレクチャー前に一度ご確認ください）
46. 【Tips】疑似セレクターを使ってみよう！nth-childのハマりやすい罠とは！？
47. 【Sass】@for文で一歩上のSassコーディング！！
48. 【演習】Animationで色んなローダーを作ってみよう
49. 【解答 Part. 1】Animationで色んなローダーを作ってみよう
50. 【解答 Part. 2】Animationで色んなローダーを作ってみよう
51. 【実践】よく巷で見かけるオサレなやつ！メニューアイコンを作ってみよう！！
52. 【実践】オサレな文字列のアニメーションを作ってみよう！！
53. 【Sass】@Each文で配列をループ！フェードインアニメーションをサクッと作ってみよう！
54. 【Tips】今時の画像の表示方法まとめ ~ , , background-imageの使い分け
55. 【実践】画像にオサレなカバースライドアニメーションを適用してみよう！！
56. 【実践】画像にオサレなホバーアニメーションを適用してみよう！！
57. 【Tips】Background-imageを画像タグのようにアスペクト比を保ちながら表示する小技
58. 【Tips】アニメーションに最適なプロパティー
59. セクション修了！お疲れ様です！
60. JavaScriptの基礎を固めよう！
61. 【導入】JavaScriptとは？
62. 【文法編】変数の宣言方法とデータ型について学ぼう！
63. 【文法編】関数の定義と使い方！
64. 【文法編】メソッドとプロパティーについて学ぼう！
65. 【文法編】配列の使い方をマスターしよう！
66. 【文法編】オブジェクトを使ってデータを管理しよう！
67. 【文法編】ループの記述方法基礎
68. 【文法編】ループの記述方法（for inとfor of）
69. 【文法編】ループの記述方法（実践）
70. 【文法編】if文と判定処理の正しい記述方法について学ぼう！
71. 【文法編】アロー関数を使って省略記法をマスターしよう！
72. 【文法編】コールバック関数をマスターしよう！
73. 【文法編】コールバック関数とループ処理
74. 【文法編】配列とforEachメソッド
75. 【文法編】配列とreduceメソッド
76. 【文法編】reduce関数を作ってみよう
77. 【DOM編】JavaScriptでHTML参照・更新！セレクターAPIを学ぼう！
78. 【DOM編】画面に機能を追加！イベントリスナーでイベントを登録！
79. 【DOM編】超基礎！画面初期化時にコードを実行！DOMContentLoadedとLoadの違いについて学ぼう！
80. 【DOM編】【演習】文字列をHTMLタグに分割してみよう！！
81. 【レベルアップ】Classを使ったコードの整理方法！！クラスでコードの再利用性を高めよう！
82. 【レベルアップ】thisを学んでクラスやオブジェクトを変幻自在に操ろう！！
83. 【おさらい】Classとオブジェクト
84. 【おさらい】thisとオブジェクト
85. 【おさらい】thisとbindの関係
86. 【おさらい】TextAnimationクラスをもう一度見てみよう。
87. 【レベルアップ】クラス継承でコードを有効利用しよう！！不要なコードは書かないようにしましょう！
88. ★重要★TweenMaxのバージョンアップ方法について学ぼう
89. セクション修了！お疲れ様です！
90. JavaScriptのより実践的な記述について学ぼう！
91. 【導入】セクション紹介
92. 【Tips】スクロール検知の達人！IntersectionObserverを学ぼう！
93. 【実践】文字アニメーションをスクロールに合わせて発動しよう！
94. 【レベルアップ】スクロール監視クラスを作成してコードの最適化を行おう！
95. 【実践】スライドアニメーションをスクロールに合わせて発動しよう！
96. 【実践】クラスの記述に慣れよう！スマホメニューの作成 Part. 1！！
97. 【レベルアップ】BEMでCSSを記述してみよう！スマホメニューの作成 Part. 2！！
98. 【実践】スマホメニューを完成させよう！
99. 【実践】ページローダーでイライラ解消！ページローダーの作り方！
100. 【ライブラリ導入編】ヒーロースライダーでページをオサレにしよう！
101. ★重要★スライダー作成時の注意点！
102. 【実践編 Part.1】ヒーロースライダーでページをオサレにしよう！
103. 【実践編 Part.2】ヒーロースライダーでページをオサレにしよう！
104. 【実践編 Part.3】ヒーロースライダーでページをオサレにしよう！
105. セクション修了！お疲れ様です！
106. スマホでもキレイに見えるレスポンシブ画面の作り方
107. 【導入】セクション紹介
108. メディアクエリの適用方法について学ぼう
109. モバイルファーストの実装について学ぼう
110. 【Tips】ビューポートとは？メディアクエリが効かない時の対処法
111. メディアクエリの文法の意味について学ぼう
112. Sassでメディアクエリを汎用的な部品として作成してみよう
113. ユーティリティクラス（汎用的なフォントクラス）を作成してみよう
114. ユーティリティクラス（汎用的なレイアウトクラス）を作成してみよう
115. 本格的なWebサイトの作成
116. 【導入】セクション紹介
117. 本セクションの進め方
118. ヒーロースライダーの組み込みから始めて行こう！
119. 【Tips】最初にやっておくべきCSSのリセット処理！｜マルチブラウザ対応
120. 【Tips】Webフォントでデバイス間の表示を統一しよう！
121. まずはHouseセクションを作成してみよう（House Part. 1）
122. スライドアニメーションを組み込んでみよう（House Part. 2）
123. レスポンシブにレイアウトを切り替えよう（House Part. 3）
124. Popularセクションを作成しよう（Popular Part.1）
125. レスポンシブにレイアウトを切り替えよう（Popular Part.2）
126. Travelセクションを作成しよう（Travel Part.1）
127. レイアウトの微調整を行おう（Travel Part.2）
128. z-indexの使い方とアニメーションを付与してみよう（Travel Part.3）
129. 【実践】Flexboxでフッター作成！Part. 1
130. 【実践】Flexboxでフッター作成！Part. 2
131. 【ちょっと休憩】emとremについて
132. 【実践】ヘッダーを作ろう！Part. 1！
133. 【実践】ヘッダーを作ろう！Part. 2！
134. 【実践】サイドバーを作成しよう
135. 【実践】ページローダー追加
136. 【あともう一息です】JavaScriptのコードを整理しよう
137. サイドのアニメーションとページローダー完了後のアニメーションを追加しよう！
138. 【いよいよサイト完成です】サイトを完成させよう！
139. インターネットに公開してみよう
140. インターネット公開前の準備（リリース準備をしよう）
141. インターネットにWebサイトを公開しよう
142. さいごに
143. 【ボーナスレクチャー】さらにレベルアップしたい方へ。
144. 【リニューアル前のコンテンツ】Webサイト作成（序）
145. ★重要★本セクションはリニューアル前の内容となるため受講不要です。
146. 【導入】セクション紹介
147. 【スマホ対応】レスポンシブデザインとは？スマホでも見やすいサイトを作るために！
148. 【スマホ対応】レスポンシブデザインの基礎を学ぼう！メディアクエリとビューポートについて学ぼう！
149. 【スマホ対応】モバイルファーストCSSの実装方法を学ぼう！
150. ヒーロースライダーの組み込みから始めて行こう！
151. 【Tips】最初にやっておくべきノーマライズとは？｜マルチブラウザ対応
152. 【Tips】Webフォントでデバイス間の表示を統一しよう！
153. 【Tips】サイト表示に統一感を！共通クラスで記述を最小限に効果を最大限に！
154. 【リニューアル前のコンテンツ】Webサイト作成（完）
155. ★重要★本セクションはリニューアル前の内容となるため受講不要です。
156. あともう少しです！後半戦も頑張っていきましょう！
157. 【実装開始！】まずは以前作成したモジュールを移行してこよう！
158. スマホ画面から作成していこう！（Houseセクションの作成 Part.1）
159. Flexboxで超簡単にレスポンシブ画面を実装しよう！（Houseセクションの作成 Part.2）
160. 【復習】Flexboxを使ったレスポンシブ画面の実装の復習！！（Popularセクションの作成）
161. 【実践】Flexboxを使ったレスポンシブ画面の実装（Travelセクションの作成）
162. 【実践】Z-indexと疑似要素を使った実践的な記述方法について学ぼう！
163. 【実践】Flexboxでフッター作成！
164. 【ちょっと休憩】emとremについて
165. 【実践】ヘッダーを作ろう！Part. 1！
166. 【実践】ヘッダーを作ろう！Part. 2！
167. 【実践】サイドバーを作成しよう
168. 【実践】ベースデザインを完成しよう
169. 【実践】ページローダー追加
170. 【いよいよ完成へ！】JavaScriptを整理しよう！Part. 1
171. 【いよいよ完成へ！】JavaScriptを整理しよう！Part. 2
172. 【完】サイトを完成させよう

プログラミングを学んで、ITエンジニアを目指そう！

このコースは、プログラミング初心者の方がプログラミングや関連スキルを1から学び、ITエンジニアを目指すためのコースです。

想定する受講生

• 実務未経験からITエンジニアに転職したいですか？

• 自らウェブアプリケーションを開発して公開できるようになりたいですか？

• 駆け出しのウェブ開発者の方でさらにスキルアップしたいですか？

⇒ あなたの答えが１つ以上YESなら、これはまさにあなたが探しているコースです！

HTML, CSS, Bootstrap 5, JavaScript, MySQL, Ruby, Ruby on Rails 7, AWS Cloud9, Git, GitHubを用いたWebアプリケーション開発の方法を総合的に学べます。23時間超えの大型コースでお得に学べます。

☆☆コースの内容をしっかりと確認した上で受講をいただけるように、無料プレビューを30分公開しております。ぜひご覧ください！！☆☆

IT人材は、2030年に最大78万人不足すると経済産業省から発表がされました。

現在、ITエンジニアの転職市場は売り手市場です。また、自らWebアプリケーション開発ができるようになり、素早くアイディアを形にできれば、システム開発の費用が削減できて、起業への挑戦もハードルが下がります。

基本的なWebページの（HTML, CSS）の構築方法を学習したあと、画面サイズによって動的にレイアウトが変わるモバイルフレンドリーでレスポンシブ対応のWebサイトの作り方を学習します(Bootstrap)。

その後に、プログラミングを学習します。主にブラウザ側で動作させるJavaScriptと、サーバー側で動かすRubyを学習します。

よく使う機能が用意されていて、高速に開発が行えるWebアプリケーションフレームの使い方を学習します。スタートアップ企業でもよく使われるフレームワークを使用します（Ruby on Rails）。

Webアプリケーションを開発を行う上でキーポイントとなるデータを体系的に扱うデータベースの使い方を、学習します(MySQL)。

開発環境構築も丁寧に手順を追って説明します(AWS Cloud9)。

私は約10年の豊富なエンジニア経験があるとともに、初心者向けのプログラミング勉強会の講師や、エンジニア志望の大学生向けインターン講師、があるのが強みです。初心者の時によくつまずく箇所が分かっているので、講座では丁寧な解説をしています。

皆さんの今後の自己実現のためのお役に立てるコースとなれば幸いです。
それでは、皆さんとコースの中でお会いできることを楽しみにしております。

利用ソフトウェアとバージョン

下記を使用してWebアプリケーション開発を学習します。

• HTML5 ・・・Webページの文章を構造化して記述

• CSS3・・・Webページの見た目を整える

• JavaScript (ES2015・ES6以降)・・・Webページを動的に操作することができるプログラミング言語

• Bootstrap 5 ・・・よく使うWebぺージのデザインが簡単に設定できるCSSフレームワーク

• MySQL 8.0・・・データベース

• Ruby 3.0.2・・・サーバ側で動かすプログラミング言語

• Ruby on Rails 7・・・Webアプリケーションを高速で開発するためのフレームワーク

• AWS Cloud9・・・アマゾン ウェブサービスが提供するWebブラウザで動作開発環境（GitHub Codespacesの利用を試行中）

• Git 2.13・・・ソースコードのバージョン管理

• GitHub・・・Gitによるソースコード管理を行えるウェブサービス

• Visual Studio Code ・・・テキストエディタ

• Google Chrome ・・・ウェブブラウザ

学習環境について

• パソコン(Mac または Windows)が必要。

• 動画内ではmacOSを使用。Windows環境での学習については補足説明。

• インストールして使うアプリケーションとして、Webブラウザ Google Chromeとテキストエディタ Visual Studio Codeを使います。MacでもWindowsでもOK。無料。

• 一部のカリキュラムの開発環境には、AWS Cloud9というブラウザでWeb開発が行えるアマゾンのサービスを利用。無料枠で1年間学習可能。

• アマゾン ウェブ サービス（AWS）のアカウント作成が必要で、メールアドレス、クレジットカード、電話番号の用意が必要（認証のためクレジットカード登録が必要ですが、無料枠内で学習すれば課金発生しません。課金の管理は自己管理にてお願いいたします。無料枠についてはコース内で説明いたします。）

• GitHub 無料プラン

Q＆Aコーナーのご利用について

• 主に、カリキュラム通りに学習が進められない場合のアドバイスや、ディスカッションを行っております。

• 本コースの内容を超えるご質問にはお答えできませんので、あらかじめご了承ください。

• コース内で紹介する動作確認済みの手順以外は、サポート対象外とさせていただいております。

  
  

コースにご満足いただけない場合は？

• 受講するか迷っていますか？30日以内返金保証制度があるため安心です（Udemy ウェブサイトよりコースをご購入の場合）

旧版のコンテンツ（古いコンテンツ）について

• 学習中の方への配慮として、旧版のコンテンツを一定期間を視聴いただけるようにしていますが、メンテナンスとサポート（Q&A）は終了しています。使用バージョンが古くメンテナンスが困難なため、一定期間経過後に廃止します。

  
  

補足

• ウェブ開発初心者向けの講座です。実務経験豊富なITエンジニアの方にとっては、物足りない可能性があります。

• セクション「実践：ECサイトのコーディングをしよう」は、コースの難易度調整のために、β版のコンテンツとして試験的に公開中です。予告無く公開中止とする場合があります。

• セクション「Rubyの開発環境構築をしよう」は、別のUdemyコース「はじめてのRuby on Rails入門-RubyとRailsを基礎から学びウェブアプリケーションをネットに公開しよう」とコンテンツを共用している部分があります。

☆☆☆お知らせ☆☆☆

セクション17 「新・Rubyの開発環境構築をしよう」にて、開発環境構築に利用するAWS Cloud 9の新規顧客アクセスが終了されました。取り急ぎ、コース内にて、代替の開発環境構築方法（GitHub Codespaces利用）についてレクチャー動画を公開しています。もしAWS Cloud 9が使える方は、取り急ぎの対応は不要で、そのまま受講いただけます。

更新履歴

• 2024/4/9 セクションリニューアル「CSSの基本を習得しよう【第3版】」

• 2023/12/19 セクションリニューアル「学習の準備をしよう【第3版】」「HTMLの基本を習得しよう【第3版】」「新・HTMLステップアップ編【第3版】」

• 2023/8/15 動画確認済みのMySQLバージョンを8.0へ変更（旧：5.7）

• 2023/7/22 レクチャー「Cloud9の基本的なセットアップをしよう」を最新情報へアップデート

• 2023/5/31 レクチャー「IAMユーザーを作成しよう」を最新情報へアップデート

• 2022/12/19 セクションリニューアル「新・Git / GitHub入門 - ソースコードのバージョン管理をしよう」

• 2022/12/14 新規セクション試験公開「実践：ECサイトのコーディングをしよう」

• 2022/11/9 新規セクション追加「CSSグリッドレイアウトでタイル状のレイアウトを作成しよう」

• 2022/8/4 セクションリニューアル「MySQL入門」

• 2022/7/4 セクションリニューアル「JavaScript入門」(ES5 → ES2015・ES6以降へ)

• 2022/5/24 新規セクション追加「Flexboxの基本を習得しよう」

• 2022/3/3 新規セクション追加「ウェブ開発の概要を知ろう」

• 2022/3/1 セクションリニューアル 「Ruby on Rails」関連（Ruby on Rails7  へ対応。旧：Ruby on Rails 5）

• 2022/3/1 動作確認済みのRubyバージョンをv3.0.2へ変更（旧：v2.5.0）

• 2022/3/1 セクションリニューアル 「Rubyの開発環境構築をしよう」

• 2021/12/22【β版・試験的公開】ポートフォリオサイト - 作品紹介サイトを制作しよう

• 2021/10/07 HTMLの基本 のVisual Studio Codeのemmet設定のUI変更に対応(macOS, Windows)

• 2021/5/28  セクションリニューアル「Bootstrap5でフォトギャラリーを制作しよう」

• 2021/5/20 セクションリニューアル「Bootstrap」※Bootstrap5 対応

• 2021/1/22 セクションリニューアル「CSS入門」

• 2020/9/26 セクションリニューアル「実践：ウェブサイトのコーディング」

• 2020/6/2 セクションリニューアル「HTML入門」「HTMLステップアップ」

• 2019/6/25 「Atomの設定 不可視文字」 Windows版Atomの操作について補足

• 2019/6/6 フォントオーサム公式サイトの仕様変更に対応

• 2019/4/2 AWS請求アラートのUI変更（設定→Billling設定）に対応

• 2019/1/29 「Rubyのバージョン管理 1」rvmの設定手順を一部変更

• 2019/1/17 「AWS Cloud9による開発環境構築」セクション テキストエディタの設定レクチャーをアップデート

• 2019/1/5 「AWS Cloud9による開発環境構築」セクションの、RVMインストール手順を修正

• 2018/11/06 「HTML入門」セクションのコードの文字が小さい問題を修正

• 2018/8/28 セクション8 Bootstrap 4入門の「ナビゲーションバー」 class指定について補足

• 2018/8/8 実践：Webサイトのコーディング「CSSによるスタイルの設定 2」補足テロップ追加

• 2018/6/15 レクチャー新規追加「JavaScriptのエラーを自力で解決するための方法」

• 2018/5/22 動画アップデート 「コース紹介動画」

• 2018/5/16 レクチャー新規追加 「リモートリポジトリからプル」

• 2018/4/25 誤植修正 イントロダクション - Ruby入門

• 2018/4/2  レクチャー新規追加「ビデオ速度の変更」

• 2018/2/16 セクションを新規追加「Git/Git Hub入門」

1. コース概要
2. コース紹介
3. ウェブ開発の概要を知ろう
4. ウェブ開発関連の用語を知ろう
5. ウェブ開発入門の学習の流れを知ろう
6. 受講オリエンテーション（Udemyのご利用が初めての方向け）
7. 新・学習の準備をしよう【第3版】
8. イントロダクション - 学習の準備をしよう
9. Google Chromeをインストールしよう
10. Visual Studio Codeの概要を知ろう
11. 補足：Visual Studio Codeのウェブサイトについて
12. 【macOS】Visual Studio Codeのインストール
13. 【Windows】Visual Studio Codeのインストール
14. Visual Studio Codeを日本語化しよう
15. 新・HTMLの基本を習得しよう【第3版】
16. イントロダクション - HTMLの基本
17. HTMLの歴史を知ろう
18. HTMLの基本構文を知ろう
19. HTML文書の基本構造を知ろう
20. 【macOS】はじめてのHTMLを書こう①
21. 【macOS】はじめてのHTMLを書こう②
22. 【Windows】はじめてのHTMLを書こう①
23. 【Windows】はじめてのHTMLを書こう②
24. 技術ドキュメント MDNの使い方を知ろう
25. HTML文書のインデントと改行をしよう
26. 【macOS】Visual Studio Codeの設定 をしよう
27. 【Windows】Visual Studio Codeの設定 をしよう
28. Live Serverの使い方を知ろう
29. よくあるHTMLの記述間違いを知ろう
30. 演習：HTMLのエラーを取り除く
31. 演習解答：HTMLのエラーを取り除く
32. サンプルコードの活用方法を知ろう
33. よくあるご質問：要素の書き順
34. コメントを使おう
35. 改行をしよう
36. 区切り線を書こう
37. リストを使おう
38. 入れ子になったリストを使おう
39. 演習：リスト
40. 演習解答：リスト
41. 説明リストを使おう
42. 見出しを使おう
43. 属性を使って画像の表示をしよう①
44. 属性を使って画像の表示をしよう②
45. リンク記述しよう
46. 強調をしよう
47. 著作権表記をしよう
48. 情報のグループ化をしよう
49. span要素を使おう
50. 演習 : HTML基礎
51. 演習解答: HTML基礎
52. 新・HTMLステップアップ編【第3版】
53. イントロダクション - HTMLステップアップ編
54. はじめてのテーブルを書こう
55. 行と列の覚え方を知ろう
56. ヘッダーのあるテーブル
57. thead、tbody、tfootがあるテーブル
58. キャプションを使おう
59. セルの結合をしよう
60. 演習 : テーブル
61. 演習解答：テーブル
62. 演習：セルの結合
63. 演習解答：セルの結合
64. フォームの概要を知ろう
65. はじめてのフォームを書こう
66. お問い合わせフォームの制作をしよう① - 単一行のテキスト入力欄
67. お問い合わせフォームの制作をしよう② - プルダウンメニュー
68. お問い合わせフォームの制作をしよう③ - ラジオボタン
69. お問い合わせフォームの制作をしよう④ - テキストエリア
70. お問い合わせフォームの制作をしよう⑤ - チェックボックス
71. お問い合わせフォームの制作をしよう⑥ - 送信ボタン
72. お問い合わせフォームの制作をしよう⑦- ラベル
73. フォームバリデーションを使おう
74. 演習：フォーム
75. 演習回答：フォーム
76. CSSの基本を習得しよう【第3版】
77. イントロダクション - CSSの基本を習得しよう
78. CSSの基本をマスターしよう
79. 学習の準備をしよう1
80. 学習の準備をしよう2
81. はじめてのCSSを書いてみよう　下準備〜内部参照
82. はじめてのCSSを書いてみよう　外部参照
83. はじめてのCSSを書いてみよう　インライン
84. はじめてのCSSを書いてみよう　優先順位について
85. コメントアウトをしよう
86. 色の指定ができるようになろう
87. 背景を設定しよう
88. 演習：色と背景の指定
89. 演習解答：色と背景の指定
90. ボックスモデルの基本を理解しよう
91. マージンを設定しよう
92. マージンの相殺について理解しよう①
93. マージンの相殺について理解しよう②
94. パディングを設定しよう
95. ボーダーを設定しよう
96. ボックスモデルの横幅と高さを指定しよう①
97. ボックスモデルの横幅と高さを指定しよう② box-sizing
98. マージンとパディングの違いを学ぼう
99. 演習：ボックスモデル
100. 演習解答：ボックスモデル
101. 4つのセレクターを使えるようになろう
102. 結合子を使ったセレクタを指定しよう
103. 複数のセレクタを指定しよう
104. 演習：セレクター
105. 演習解答：セレクター
106. リンクで使用する疑似クラスを指定しよう
107. 演習：擬似クラスの指定
108. 演習解答：擬似クラスの指定
109. フォントを指定しよう
110. ウェブフォントを利用しよう
111. ウェブアイコンフォントを利用しよう
112. テキストに様々なスタイルを設定しよう
113. 演習：テキストの装飾
114. 演習解答：テキストの装飾
115. リストを装飾しよう
116. 演習：リストの装飾
117. 演習解答：リストの装飾
118. リセットCSSを設定しよう
119. Google Chrome Dev Toolsを使って、デバッグをしてみよう①
120. Google Chrome Dev Toolsを使って、デバッグをしてみよう②
121. Google Chrome Dev Toolsを使って、デバッグをしてみよう③
122. Google Chrome Dev Toolsを使って、デバッグをしてみよう④
123. 演習：Google Chrome Dev Tools
124. 演習解答：Google Chrome Dev Tools
125. Flexboxの基本を習得しよう
126. Flexboxとは？
127. 再掲：サンプルコードについて
128. Flexboxの基本的な書き方を知ろう
129. flex-directionプロパティで、子要素の並ぶ向きを指定しよう。
130. flex-wrapプロパティで、子要素の折り返しを指定しよう。
131. justify-contentプロパティで、子要素の水平方向の揃えを指定しよう。
132. align-itemsプロパティで、子要素の垂直方向の揃えを指定しよう。
133. align-contentプロパティで、子要素を複数行にした時の揃えを指定しよう。
134. flex-flowプロパティで、flex-directionとflex-wrapをまとめて指定してみよう。
135. セクションまとめ - Flexboxの基本を習得しよう
136. CSSグリッドレイアウトでタイル状のレイアウトを作成しよう
137. イントロダクション - CSSグリッドレイアウトとは？
138. 再掲：サンプルコードについて
139. CSSグリッドレイアウトの基本的な書き方
140. grid-template-columnsプロパティで、横の並びについての指定をしよう
141. grid-template-rowsプロパティで、縦の並びについて指定をしよう
142. gapプロパティで、余白を指定しよう
143. repeat関数で繰返しの指定をしよう
144. minmax()で、最小値、最大値を指定しよう
145. auto-fit/auto-fillで繰返しの数値を指定しよう
146. ポートフォリオサイト - 作品紹介サイトを制作しよう
147. イントロダクション-ポートフォリオ作品紹介サイト
148. 再掲：サンプルコードについて
149. ファイルの作成
150. HTMLのマークアップ①
151. HTMLのマークアップ②
152. HTMLのマークアップ③
153. HTMLのマークアップ④
154. HTMLのマークアップ⑤
155. CSSによるスタイル設定①
156. CSSによるスタイル設定②
157. CSSによるスタイル設定③
158. CSSによるスタイル設定④
159. CSSによるスタイル設定⑤
160. ファビコンを設定しよう
161. 実践：ウェブサイトのコーディングにチャレンジしよう
162. イントロダクション - 実践：新ウェブサイトのコーディング
163. よくあるご質問（必ずご確認ください）
164. 再掲：サンプルコードについて
165. ファイルの作成
166. 補足：placeholder.com公式ページについて
167. HTMLによるマークアップ①
168. よくあるご質問：ダミー画像が表示されない場合について
169. HTMLによるマークアップ②
170. HTMLによるマークアップ③
171. CSSによるスタイルの設定①
172. 【重要】アップデート情報：CSSによるスタイルの設定②
173. CSSによるスタイルの設定②
174. 補足説明：よくあるご質問（CSSによるスタイルの設定③）
175. CSSによるスタイルの設定③
176. CSSによるスタイルの設定④
177. レスポンシブ対応
178. 画像の設定
179. メタデータの設定
180. よくあるご質問 その2（本セクション）
181. 【β版・試験公開中】実践：ECサイトのコーディングをしよう
182. 補足：β版・試験公開中について
183. 【β版・試験公開中】イントロダクション - 実践：ECサイトのコーディングをしよう
184. 【β版・試験公開中】課題を確認しよう
185. 【β版・試験公開中】フォルダとファイルの準備
186. 【β版・試験公開中】【解説】フォルダとファイルの準備
187. 【β版・試験公開中】htmlやcssの準備をしよう
188. 【β版・試験公開中】【解説】htmlやcssの準備をしよう
189. 【β版・試験公開中】htmlの全体のレイアウトを作成しよう
190. 再掲：サンプルコードについて
191. 【β版・試験公開中】【解説】htmlの全体のレイアウトを作成しよう
192. 【β版・試験公開中】headerをマークアップしよう
193. 【β版・試験公開中】【解説】headerをマークアップしよう
194. 【β版・試験公開中】mainエリアをマークアップしよう
195. 【β版・試験公開中】【解説】mainエリアをマークアップしよう
196. 【β版・試験公開中】footerエリアをマークアップしよう
197. 【β版・試験公開中】【解説】footerエリアをマークアップしよう
198. 【β版・試験公開中】全体に共通のスタイルをあてよう
199. 【β版・試験公開中】【解説】全体に共通のスタイルをあてよう
200. 補足：AdobeXDのデザインスペックの確認方法について

この講義では、未経験・初心者の「あなた」がゼロからIT業界の即戦力となれることを目指しています。

本講座で扱うHTMLとCSS、JavaScriptなどの知識は、Web開発系の仕事以外にもアプリ開発やメディア制作、Web広告などIT業界のあらゆる仕事において必要となります。

しかし、実際に学習しようとすると、

何から始めればよいのか分からなかったり...

膨大なインプットの量に途中で挫折してしまったり...

かといって、プログラミングスクールは高額なため手が出しづらかったり...

もし、「ゼロからプログラミングをはじめてみたいけど、何からすれば良いかわからない」という方や、「過去に挫折した経験があって不安」という方は、ぜひ当コースをのぞいてみてください！

↓ ↓ ↓

<本コースの強み>

★全300レクチャー ＆ 35時間以上！

本コースは、全部で約300のレクチャーが用意されており、総時間は約35時間となっています。

しかし、最大でも１レクチャーは20分程度となっているため、無理のないペースで進めることが可能です。

★基礎の基礎からサイト公開まで一気通貫した講義

講義は大きく「概論編」と「実践編」に分かれています。

「概論編」を学ぶことで、単純に技術だけを学ぶのではなく、「HTMLが生まれた背景」や「HTMLやCSSの特徴」なども併せて学習することで、「タグとは何か？」「要素とは何か？」などといった基礎概念から、理解できるように構成されています。

そのため、「実践編」では受講したものを言われたままコーディングするのではなく、

「なぜこうなるのか？」という意味を理解しながら学習を深めることができます。

また、「実践編」は実際に「サービスページ」と「Webサイト」を最初から作成します。

開発で必要となる知識やスキルを一気通貫で学習することができるため、当コースだけで一連の知識と技術を習得することが可能です！

★生徒と講師で進めるマンツーマン方式

本コースでは、生徒役と講師役２名のマンツーマン形式で講義が進みます。

・講師役→大手企業様のWeb開発・保守・運用を務める現役エンジニアが担当します。

・生徒役→プログラミング初心者のWebマーケター（本当にプログラミング未経験者で、この講義の前まで全く知識がありませんでした。）

初心者だからこそ、講義内で出てくる質問は、ご覧いただく皆さんと近いものとなっていると思います。また、彼の成長具合にも注目してみてください。

実践編では皆さんにお渡しするデータを基に、実際に生徒役の画面を投影させながら講義を進めていきます。

よりリアルに一緒に進めていくことになるので、インプットとアウトプットが同時にできる仕組みとなっています。

それでは、コース内で一緒に学んでいけることを楽しみにしています！

1. コース概要
2. この講座を通して学ぶこと
3. そもそもHTMLとは？
4. そもそもHTMLとは？
5. 3つのマークアップ言語について
6. HTMLの歴史について
7. HTMLの歴史について
8. まとめ HTMLの歴史について
9. HTMLの基本構成について
10. Webページを構成する代表的な言語3つ
11. HTML/ CSS/ JavaScript は別々のファイルで管理する
12. HTMLの基本構造を覚えよう
13. Webページの基本構造を覚えよう
14. HTMLで文章を構造化するメリット
15. HTMLの「文字コード」について
16. HTMLの文字コードとは？
17. 正しい文字コードを設定しないと文字化けを起こしてしまう
18. 文字コードはhead内にmeta要素を使って指定する
19. HTMLをエディタはUTF-8が使用できるものを選ぶ
20. HTMLタグの種類と使い方
21. 全ての基本となるタグ
22. 文書情報を表すタグ
23. 特定のグループをまとめるタグ
24. コンテンツカテゴリモデルについて
25. 要素と属性・属性値について
26. HTMLタグの書き方について
27. 属性と属性値を理解する
28. マークアップ時の注意
29. マークアップ時に注意したい11個のポイント
30. ページの中に画像を表示する
31. imgタグについて
32. alt属性の必要性
33. width属性 height属性
34. 画像ファイルを指定する方法
35. 絶対パスについて
36. 相対パスについて
37. 画像のリンク切れについて
38. 画像ファイルサイズについて
39. 可逆圧縮と非可逆圧縮の違い
40. Webサイトでよく使われる画像ファイル形式一覧
41. 画像最適化について
42. まとめ
43. コメントについて
44. コメントアウトとは
45. コメントアウトの役割
46. コメントアウトの3つの書き方
47. コメントの注意点
48. フォームパーツについて
49. フォームパーツとは
50. 最低限覚えるフォームパーツを紹介
51. 作成したHTMLをチェックする
52. 記述したHTMLをチェックすることの重要性
53. HTMLの文法チェックツールについて
54. HTMLの基礎講座を終えて...
55. HTMLの基礎講座を終えて...
56. CSSの書き方の基本
57. そもそもCSSとは？
58. CSSはどこに書くの？
59. CSSの書き方の基礎
60. セレクタの基本的な書き方
61. プロパティと値の基本
62. CSSのメディアタイプとメディアクエリについて
63. レスポンシブWebデザインとは
64. メディアタイプとは
65. メディアクエリとは
66. メディア特性について
67. メディアクエリの基本的な使い方
68. CSSの優先度
69. 書いた順番による優先度
70. セレクタの詳しさによる優先度
71. インラインで書かれたCSSが最優先される
72. インラインよりも !important が優先される
73. CSSを書く時のコツ
74. id名、class名はわかりやすいものにする
75. コードの量はなるべく減らすようにする
76. CSSはなるべくHTML要素には書かず、基本的にclassに書く
77. セレクタを短くする
78. セレクタの詳細度を上げる
79. インラインスタイルはなるべく使わない
80. 環境設定をしよう
81. 必要なソフトを用意しよう
82. 必要なファイルとフォルダの準備をしよう
83. HTML/CSSに触れてみよう
84. HTMLを実際に触ってみよう
85. CSSで装飾してみよう
86. リンクや画像を追加してみよう
87. サイトの構造を理解しよう
88. ＜コラム＞検証ツールをつかってみよう
89. つまづきやすいCSS
90. 必要なファイルとフォルダの準備をしよう
91. 【padding / margin】余白を調整してみよう
92. 【display】レイアウトを調整してみよう①（block /inline/ none）
93. 【display】レイアウトを調整してみよう②（flex）
94. 【display】レイアウトを調整してみよう③（flex）
95. 【position】要素の配置を調整してみよう（absolute,relative,fixed）
96. 【z-index】要素の重なりを指定してみよう①
97. 【z-index】要素の重なりを指定してみよう②
98. 【before / after】疑似要素を使ってCSSだけで要素を追加しよう
99. 【background】背景を装飾しよう①
100. 【background】背景を装飾しよう②
101. 【実践編①】データのダウンロード
102. 【実践編①】ダウンロード用データ
103. 【実践編①】完成版データ
104. 【実践編①】WEBページを制作する準備をしよう
105. デザインデータを確認しよう
106. 素材をダウンロードしよう
107. index.htmlファイルの中身を確認しよう
108. style.cssファイルの中身を確認しよう
109. 【実践編①】HTMLとCSSでヘッダーを作ろう
110. ヘッダーを作ろう①ロゴの配置
111. ヘッダーを作ろう②ロゴ をCSSで調整
112. ヘッダーを作ろう③ハンバーガーメニュー
113. ファーストビューに仮のキービジュアルを設置しよう
114. 基本レイアウトを作ろう
115. 共通パーツの見出しタイトルを装飾しよう
116. ＜コラム＞エディタの表示を分割しよう
117. 【実践編①】HTMLとCSSで導入部分を作ろう
118. クラスを追加してセクションに色を付けてみよう
119. ふきだしを作ろう①マークアップ
120. ふきだしを作ろう②横に並べる（display:flex;）
121. ふきだしを作ろう③余白調整
122. ふきだしの装飾を疑似要素で作ろう
123. ふきだしの装飾を調整しよう
124. キャッチコピーを作ろう①
125. キャッチコピーを作ろう②
126. キャッチコピーを作ろう③
127. 【実践編①】HTMLとCSSでサービス紹介部分を作ろう
128. サービスの項目を作ろう①横に並べる（display:flex;）
129. サービスの項目を作ろう②横に並べる（display:flex;）
130. サービスの項目を作ろう③枠を作る
131. サービスの項目を作ろう④要素の高さを揃える
132. 強みの紹介部分を作ろう①
133. 強みの紹介部分を作ろう②
134. 各種WEB広告部分を作ろう①リストで構築（ul・li）
135. 各種WEB広告部分を作ろう②リストをCSSで調整（ul・li）
136. 各種WEB広告部分を作ろう③基本レイアウトの調整（max-width）
137. 料金表を作ろう①表をHTMLで構築（table）
138. 料金表を作ろう②表のCSS調整（table）
139. 料金表を作ろう③表を完成させる
140. 料金表を作ろう④表の下の注釈部分
141. サービス開始までの流れの部分を作ろう①基本レイアウト
142. サービス開始までの流れの部分を作ろう②リストで構築（ol・li）
143. サービス開始までの流れの部分を作ろう③CSS調整
144. サービス開始までの流れの部分を作ろう④疑似要素で装飾・お問合せボタン
145. サービス開始までの流れの部分を作ろう⑤お問合せボタンのホバーアニメーション
146. 共通パーツの見出しタイトルの余白を共通化しよう
147. 【実践編①】HTMLとCSSで会社概要部分を作ろう
148. 背景画像で奥行きを表現してみよう（パララックス）①HTML構築
149. 背景画像で奥行きを表現してみよう（パララックス）②CSS調整
150. 背景画像で奥行きを表現してみよう（パララックス）③CSS調整（text-indentなど）
151. お問合せフォームを作ろう①定義リスト（dl,dt,dd）
152. お問合せフォームを作ろう②フォームパーツ（input,select）
153. お問合せフォームを作ろう③CSSで装飾
154. お問合せフォームを作ろう④CSSの調整・必須項目の疑似要素
155. お問合せフォームを作ろう⑤疑似要素で▼を作る
156. お問合せフォームを作ろう⑥送信ボタン（submit）
157. 会社概要部分を作ろう
158. 【実践編①】HTMLとCSSでフッター・ファーストビューを作ろう
159. フッターを作ろう①HTMLで構築
160. フッターを作ろう②CSSで調整
161. フッターを作ろう③Googleフォント
162. ファーストビューを作ろう①仮画像からHTML化
163. ファーストビューを作ろう②CSSで装飾
164. ファーストビューを作ろう③余白調整
165. ファーストビューを作ろう④ロゴの余白調整
166. ファーストビューを作ろう⑤スクロールマークの設置
167. 【実践編①】レスポンシブに挑戦しよう
168. 基本レイアウトを調整しよう（main-width）
169. ファーストビューをレスポンシブ化しよう①
170. ファーストビューをレスポンシブ化しよう②
171. ファーストビューをレスポンシブ化しよう③
172. パソコンのときだけホバーが有効になるようにしよう
173. ヘッダーをレスポンシブ化しよう①
174. ヘッダーをレスポンシブ化しよう②ロゴ調整
175. 基本レイアウトと共通パーツを調整しよう（section・section_title）
176. 導入部分をレスポンシブ化しよう①ふきだし
177. 導入部分をレスポンシブ化しよう②疑似要素
178. ご提供できるサービスをレスポンシブ化しよう①
179. ご提供できるサービスをレスポンシブ化しよう②
180. 当社の3つの強みをレスポンシブ化しよう①
181. 当社の3つの強みをレスポンシブ化しよう②
182. 各種WEB広告をレスポンシブ化しよう①
183. 各種WEB広告をレスポンシブ化しよう②
184. サービス内容・料金をレスポンシブ化しよう
185. はみ出した要素を隠そう（overflow: hidden;）
186. サービス開始までの流れをレスポンシブ化しよう①
187. サービス開始までの流れをレスポンシブ化しよう②
188. 私たちの存在意義の部分をレスポンシブ化しよう
189. お問い合わせ部分をレスポンシブ化しよう
190. 会社概要部分をレスポンシブ化しよう
191. フッターをレスポンシブ化しよう①
192. フッターをレスポンシブ化しよう②
193. 【実践編①】最後の仕上げをしよう
194. ヘッダーを画面上部に固定しよう
195. ハンバーガーメニューを作成しよう①
196. ハンバーガーメニューを作成しよう②
197. ハンバーガーメニューを作成しよう③
198. ハンバーガーメニューを作成しよう④
199. ハンバーガーメニューを作成しよう⑤
200. 疑似要素を使って細かいデザインを表現しよう①