HTML CSS のおすすめの教材8選！ 【 2023年3月 最新版】

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の開発環境を整えよう（Windows編）
4. Webの開発環境を整えよう（macOS編）
5. 入会フォームを HTML/CSSで作成しよう
6. サンプルファイルのダウンロード
7. 簡単なHTMLを作ってみよう
8. Visual Studio CodeでのHTML編集
9. テキストフィールドを作ろう
10. ボタンを作ろう
11. headタグの中に記述する決まり文句
12. CSSで見た目を調整しよう
13. CSSの内部参照でページ内の共通パーツのスタイルを調整しよう
14. CSSの外部参照で複数ページに共通のスタイルを記述しよう
15. sanitize.cssでブラウザーのデフォルトCSSをリセットしよう
16. divタグと class属性で要素を区分けしよう
17. marginプロパティの autoを使ってエリアを中央に揃えよう
18. box-shadowプロパティで浮いたボタンを作ろう
19. 適切な HTMLタグを利用しよう
20. spanタグで「必須」ラベルを作ろう
21. レスポンシブWebデザインで、スマホ対応のサイトを作ろう
22. HTML/CSS：CDアルバムの紹介ページを作ろう
23. HTML：セクショニングコンテンツ（header, section）
24. CSS：タイトルの CSSを整える
25. CSSのセレクターの種類
26. 画像を配置しよう - img
27. CSS：floatを使った回り込み
28. CSS：clearで回り込みを解除する
29. HTML： リンクを張る aタグ
30. HTML：「実体参照」でコピーライト表記を追加する
31. CSS：Webフォントを使う
32. CSS：レスポンシブWebデザイン（RWD）のレイアウトを作る（メディアクエリー・リキッドデザイン・ブレイクポイント）
33. CSS：CSSアニメーションを使う（Transition）
34. Bootstrapで素早く Webページを作ろう【2021年版】
35. このセクションで作るものを確認しよう
36. Bootstrapを CDN（Content Delivery Network）で利用しよう
37. Bootstrapの Containerを使って画面をレイアウトしよう
38. スタイルシートを調整しよう
39. Bootstrapのグリッドシステムで画面をレイアウトしよう
40. Bootstrapのフォームコントロールを使おう
41. プレイスホルダー（placeholder）の使い方
42. ドロップダウンリストを追加しよう
43. チェックボックスを追加しよう
44. ラジオボタンを追加しよう
45. テキストエリアを追加しよう
46. バッヂを使って、必須項目を示そう
47. JavaScriptで今日の日付を表示しよう
48. HTML/CSS：画面を作り上げよう
49. JavaScript：オブジェクト・メソッド・パラメーター
50. JavaScript：文字列・数字と四則演算、文字列連結
51. JavaScript：変数の扱い
52. JavaScript：オブジェクトとインスタンス
53. JavaScript：Dateオブジェクトを使ってプログラムを仕上げよう
54. イベントドリブンな、ストップウォッチプログラムを作成しよう
55. HTML/CSS：画面の見た目を作成しよう
56. JavaScript：getElementByIdとプロパティで要素を書き換えよう
57. JavaScript：if構文で条件に沿ったプログラムを作ろう
58. JavaScript：function（関数）定義をしよう
59. JavaScript：イベントドリブンなプログラムを作成しよう
60. JavaScript：setIntervalで定期的に実行されるプログラムを作ろう
61. JavaScript：変数のスコープを理解しよう
62. JavaScript：秒数から、分と時を計算しよう
63. JavaScript：thisを使って、STOPボタンを実装しよう
64. Ajax通信でフォトライブラリーを作成しよう
65. HTML/CSS：ページを形作っていこう1 - position: fixed
66. HTML/CSS：ページを形作っていこう2 - position: relative, absolute
67. JavaScript：JSONデータを配列で操ろう
68. JavaScript：createElementと appendChildで HTML要素を作ろう
69. JavaScript：for構文で繰り返し処理をしよう
70. 【補足】利用した画像ファイルは次のレクチャーでも利用してください
71. JavaScript：Ajax通信を行なおう
72. JavaScript：Ajax通信で受信したデータを処理しよう - 論理演算子
73. JavaScript：画面を仕上げよう
74. JavaScriptライブラリーを利用しよう
75. jQuery：jQueryを使ってみよう
76. jQuery：Ajax通信を行なってプログラムを仕上げよう
77. Vue.js：Vue.jsを使ってみよう
78. Vue.js：Vue.jsで画面を作り上げよう

--

本コースは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. 超初心者の方はここからスタート
8. HTMLとは？HTMLの概要と文法について
9. HTMLのこれだけは知っておいて！インライン要素とブロック要素の使い分け
10. CSSとは？CSSの概要と文法について
11. CSSのこれだけは知っておいて！詳細度について
12. コード記述の効率化を学ぼう
13. 【Tips】コードの自動補完を使おう
14. 【Tips】Visual Studio Codeのショートカットを使おう
15. CSSの基礎から始めよう（Transition編）
16. 【導入】セクション紹介
17. 【丁寧に解説】まずはボタンを作りながら、CSSプロパティーを設定してみよう！
18. Transitionプロパティーの使い方を学ぼう（ボタンにホバーアクションを追加！！）
19. 【Sass】CSSをSassで記述してみよう！
20. 【Tips】Chromeの開発ツールの使い方について学ぼう
21. 【おさらい】CSSセレクターとSassネスティング
22. SassからCSSへの変換がうまくいかない時の対処法
23. ★重要★Live Sass Compilerのトランスパイル対象フォルダ
24. ホバーで影ができるボタンを作ってみよう
25. 【演習】色々なエフェクトのボタンを作ってみよう
26. 【解答】色々なエフェクトのボタンを作ってみよう
27. Transformプロパティーの使い方をマスターしよう
28. PositionとZ-indexをマスターして思い通りのレイアウトを組もう！！
29. Transform, Position, Z-indexの復習！背景色がスライドするボタンを作ってみよう！
30. ::before?::after?疑似要素を使って無駄な記述を減らそう！
31. タイミングファンクション(a.k.a easing-function)でアニメーションをオサレにしよう！
32. 【発展】3Dアニメーションでより豊かな表現方法を身に着けよう
33. 【発展】【演習】3Dアニメーション ~ キュービックのボタンを作成してみよう
34. HTML要素を思った通りに配置するレイアウト方法まとめ
35. 【参考】開発ツールでの編集のローカルファイルへの自動反映方法
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. 【完】サイトを完成させよう

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. 作業の流れを確認 - Webサーバーを作ってみよう
70. EC2にログイン - Webサーバーを作ってみよう
71. EC2にファイルをアップロード・ダウンロード - Webサーバーを作ってみよう
72. NGINXをインストール - Webサーバーを作ってみよう
73. NGINXの設定ファイルを更新 - Webサーバーを作ってみよう
74. ファイルのアップロード・動作確認 - Webサーバーを作ってみよう
75. まとめ - Webサーバーを作ってみよう
76. STEP3.6. 【PHP】Webページに動きを与えてみよう（PHP編） - 自分でWebシステムを公開する
77. 概要説明 - Webページに動きを与えてみよう（PHP編）
78. PHPのインストール（macOS用）その1 brew インストール
79. PHPのインストール（macOS用）その2 php インストール
80. PHPのインストール（Windows用）
81. PHPコマンドを使って基礎を理解する
82. Quizのテンプレートファイルを準備（その1）
83. Quizのテンプレートファイルを準備（その2）
84. PHPの基本文法（その1）
85. PHPの基本文法（その2）
86. Quizをテンプレートで出力できるように実装する
87. PHPでファイルの操作 - Quizのコンテンツをファイルで管理する
88. CSVファイルの作成 - Quizのコンテンツをファイルで管理する
89. CSVファイルをPHPから読み込む - Quizのコンテンツをファイルで管理する
90. CSVから取得したデータの出力 - Quizのコンテンツをファイルで管理する
91. セキュリティ対策 - Quizのコンテンツをファイルで管理する
92. コードの整理 - Quizのコンテンツをファイルで管理する
93. GETやPOSTの基礎 - クライアントから送信されてきたデータを処理する
94. PHPのエラーについて（php.ini を変更して画面上にエラーを表示させる方法）
95. Quizの問題をURLパラメータで切り替え - クライアントから送信されてきたデータを処理する
96. Quizの解答チェックをPHPで実装 - クライアントから送信されてきたデータを処理する
97. 概要説明 - JSでリクエスト処理を実装
98. Quizの解答チェックをするリクエストを送信
99. JSでレスポンスを処理する
100. エラーレスポンスを実装
101. テンプレート読み込み処理を整理 - Quiz一覧の実装
102. Quizアプリを完成させる - Quiz一覧の実装
103. まとめ - Webページに動きを与えてみよう（PHP編）
104. PHP 実装までのサンプルコードについて
105. STEP3.7~8 【AWS EC2 / php-fpm】WebサーバーをPHPが動く環境にする - 自分でWebシステムを公開する
106. 概要説明
107. サーバーにPHPをインストール
108. NGINXとphp-fpmの通信の方法について（UNIXドメインソケット）
109. NGINXとphp-fpmの設定を確認
110. NGINXとphp-fpmの動きについて解説
111. vimの操作練習
112. php-fpmの設定ファイルを書き換え
113. まとめ - WebサーバーをPHPが動く環境にする
114. WebサーバーでQuizアプリを確認 - Webサーバーの動作確認
115. まとめ - Webサーバーの動作確認
116. STEP3.9. 【DNS / SSL/TLS / AWS ALB&Route53&ACM】独自ドメインの取得と設定 - 自分でWebシステムを公開する
117. ドメインとサーバーとIPアドレス
118. 固定IPの設定
119. ドメイン取得
120. 概要説明 - SSL/TLS設定
121. SSL証明書を発行（ACM設定） - SSL/TLS設定
122. ALBの設定（その1） 概要説明 - SSL/TLS設定
123. ALBの設定（その2） ターゲットグループの作成 - SSL/TLS設定
124. ALBの設定（その3） セキュリティグループの作成 - SSL/TLS設定
125. ALBの設定（その4） ALBの作成と動作確認 - SSL/TLS設定
126. DNSの設定変更 - SSL/TLS設定
127. まとめ - 独自ドメインの取得と設定
128. STEP3. まとめ - 自分でWebシステムを公開する
129. 各リソースの後片付け
130. まとめ - STEP3全体
131. STEP4. 【Git / Github】ファイルを効率よく管理する
132. 概要説明 - ファイルを効率よく管理する
133. ファイルの管理方法について考える - ファイルを効率よく管理する
134. 概要説明 - GitとGithub
135. Gitのインストール（macOS用） - GitとGithub
136. Gitのインストール（Windows用） - GitとGithub
137. GitHub登録 - GitとGithub
138. GitHubの接続設定 - GitとGithub
139. 概要説明 - GitとGitHubでバージョン管理してみよう
140. 変更内容を記録する方法(コミット)に慣れる（概要説明） - GitとGitHubでバージョン管理してみよう
141. 変更内容を記録する方法(コミット)に慣れる（実践） - GitとGitHubでバージョン管理してみよう
142. ブランチ操作に慣れる（概要説明） - GitとGitHubでバージョン管理してみよう
143. ブランチ操作に慣れる（実践） - GitとGitHubでバージョン管理してみよう
144. コンフリクト（衝突）を解消する（概要説明） - GitとGitHubでバージョン管理してみよう
145. コンフリクト（衝突）を解消する（実践） - GitとGitHubでバージョン管理してみよう
146. コンフリクト（衝突）を解消する（補足説明） - GitとGitHubでバージョン管理してみよう
147. リポジトリの操作に慣れる（概要説明） - GitとGitHubでバージョン管理してみよう
148. リポジトリの操作に慣れる（実践） - GitとGitHubでバージョン管理してみよう
149. 「GitHubFlow」で、快適Gitライフ！（概要説明） - GitとGitHubでバージョン管理してみよう
150. 「GitHubFlow」で、快適Gitライフ！（実践） - GitとGitHubでバージョン管理してみよう
151. Sourcetree紹介
152. まとめ - ファイルを効率よく管理する
153. STEP5.1~3 【Docker】開発環境を整える - 先人が作った機能を利用して開発を加速させる
154. 概要説明 - 先人が作った機能を利用して開発を加速させる
155. OSSとは - 先人が作った機能を利用して開発を加速させる
156. 概要説明 - 開発環境を整える
157. 開発環境について - 開発環境を整える
158. Dockerの概要説明 - 開発環境を整える
159. コンテナのステータスについて - 開発環境を整える
160. DockerDesktopのインストール(macOS用) - 開発環境を整える
161. DockerDesktopのインストール(Windows用) - 開発環境を整える
162. イメージを取得/確認/削除 - DockerでNGINXを動かす
163. コンテナを作成/起動/停止/削除 - DockerでNGINXを動かす
164. イメージを作成 - DockerでNGINXを動かす
165. コンテナの詳しい操作 - DockerでNGINXを動かす
166. docker-composeについて- DockerでNGINXを動かす
167. 概要説明 - WordPressを動かしてみよう
168. 実践1 - WordPressを動かしてみよう
169. 実践2 - WordPressを動かしてみよう
170. STEP5.4~6 【Laravel】Laravelを使ってみよう - 先人が作った機能を利用して開発を加速させる
171. Webフレームワークとは
172. 概要説明 - Laravelを使ってみよう
173. LaravelのサンプルプロジェクトをDockerで動かす - Laravelを使ってみよう
174. 概要説明 - LaravelでQuiz管理アプリをつくってみよう
175. 環境準備 / 起動 / 停止
176. Laravelを利用する際にインストールしておきたいVSCodeの拡張
177. routeとblade基礎（Viewの実装）
178. 各ページのテンプレートを作成（Viewの実装）
179. 削除ボタンの実装（Viewの実装）
180. リンクの修正（Viewの実装）
181. Controllerの作成（Controllerの実装）
182. 入力データのバリデーション（Controllerの実装）
183. ローカリゼーション（日本語化）（Controllerの実装）
184. DB基本（Modelの実装）
185. Laravelでテーブル作成（Modelの実装）
186. Modelクラスを使ったデータ操作（保存）（Modelの実装）
187. Modelクラスを使ったデータ操作（参照）（Modelの実装）
188. Modelクラスを使ったデータ操作（削除）（Modelの実装）
189. まとめ - Laravelを使ってみよう
190. まとめ - 先人が作った機能を利用して開発を加速させる
191. STEP6.1~2 【WebAPI】 LINEボットを作ってみよう - 他のサービスと自分のプログラムを連携させる
192. 概要説明 - 他のサービスと自分のプログラムを連携させる
193. APIとは？ - 他のサービスと自分のプログラムを連携させる
194. 概要説明 - LINEボットを作ってみよう
195. 全体構成 - LINEボットを作ってみよう
196. LINEDevelopers登録と設定（開発ドキュメントの確認）
197. LINEDevelopers登録と設定（開発者登録とチャネル設定）
198. 環境作成（実装1）
199. LINEのSDKを追加（実装2）
200. 全員にメッセージ送信（実装3）

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

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

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

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

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

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

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

↓ ↓ ↓

<本コースの強み>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML5プロフェッショナル認定試験レベル1は、基礎レベルのWebデザイナー・エンジニアに求められるスキルを評価する国内有数の認定資格です。本講座では模擬試験を6回分実施することで、資格取得に必要な十分な知識と試験慣れをしていただく講座です。最終更新に記載された、最新の内容に対応しています。Ver2.5にも対応済みです。

• HTML5を使ってWebコンテンツを制作することができる。

• ユーザー体験を考慮したWebコンテンツを設計・制作することができる。

• スマートフォンや組み込み機器など、様々なデバイスに対応したコンテンツ制作ができる。

• HTML5で何ができるのか、どういった技術を使うべきかの広範囲の基礎知識を有する。

HTML5プロフェッショナル認定試験レベル1では以下の内容が問われます。

1.1 Webの基礎知識

• 1.1.1 HTTP, HTTPSプロトコル（重要度：8）

• 1.1.2 HTMLの書式（重要度：9）

• 1.1.3 Web関連技術の概要（重要度：6）

1.2 CSS

• 1.2.1 スタイルシートの基本（重要度：7）

• 1.2.2 CSSデザイン（重要度：9）

• 1.2.3 カスケード（優先順位）（重要度：2）

1.3 要素

• 1.3.1 要素と属性の意味（セマンティクス）（重要度：10）

• 1.3.2 メディア要素（重要度：6）

• 1.3.3 インタラクティブ要素（重要度：7）

1.4 レスポンシブWebデザイン

• 1.4.1 マルチデバイス対応（重要度：7）

• 1.4.2 メディアクエリ（重要度：5）

1.5 APIの基礎知識

• 1.5.1 マルチメディア・グラフィックス系API概要（重要度：5）

• 1.5.2 デバイスアクセス系API概要（重要度：4）

• 1.5.3 オフライン・ストレージ系API概要（重要度：4）

• 1.5.4 通信系API概要（重要度：3）

試験概要は以下の通りとなります。

• 試験名：HTML5プロフェッショナル認定試験レベル1

• 出題数：約60問／90分（試験後の簡単なアンケートの時間を含む）

• 認定証：受験後、約3週間でお手元に届きます。

• 有意性：有効期限はありませんが、「有意性の期限（再認定ポリシー）」があります。

• 試験実施方式：コンピュータベーストテスト（CBT）

1. HTML5レベル1模擬試験1
2. HTML5レベル1模擬試験2
3. HTML5レベル1模擬試験3
4. HTML5レベル1模擬試験4
5. HTML5レベル1模擬試験5
6. HTML5レベル1模擬試験6