このレッスンについて

世の中に無数にあるウェブサイト（ホームページ）は、どんなにきらびやかでも、その中身は「コード」と言われる「文字」でできています。


図 1 こんなデザイン✨のページも...

図 2  一皮むけば、こんなコードでできています。このコードでどの素材をどこに配置するのかを決めています。

このコードを作る専門家のことを「マークアップエンジニア」と言い、コードを書くことを「コーディング」と言います。 コーディングには HTML とCSSという２種類のコンピューター言語を用いますので、マークアップエンジニアになるにはこの２つを習得することになります。

マークアップエンジニアはウェブサイトを実装するHTML/CSSの専門家として業務に携わります。 どんなにすぐれたデザインがあっても、それをページ化するマークアップエンジニアが居なくてはウェブサイトは成り立ちません。  ウェブサイトの数だけマークアップエンジニアの仕事があります！

このレッスンではマークアップエンジニアになるための基礎知識を身に着け、更に具体的なウェブデザインを実装する経験を積み、キャリアの入口に立つところまでを目指します。

各パートについて

1. 1カリキュラムへようこそ（イントロダクション）

2. 2カリキュラムの進め方

3. 3受講準備をする

4. 41. Web、HTMLパート１

5. 5【補足】1.3.1. 新規の「HTML5の最小基本構文」を作成する

6. 6【補足】1.5.2.1. 画像のパス表記例

7. 7昇段試験【1. Web、HTMLパート１】

8. 82. HTMLパート２

9. 9【補足】2.2. 参考：「コンテンツモデル」について

10. 10昇段試験【2. HTMLパート２】

11. 113. CSSの基本

12. 12昇段試験【3. CSSの基本】

13. 134. CSS - ボックスモデル

14. 14昇段試験【4. CSS - ボックスモデル】

15. 155. CSS - 背景、float、実例:ナビメニュー

16. 16昇段試験【5. CSS - 背景、float、実例:ナビメニュー】

17. 176. CSS - Flexbox、Grid

18. 18【補足】6.1. Flexbox（フレキシブルボックス）

19. 19昇段試験【6. CSS - Flexbox、Grid】

20. 207. CSS - Position

21. 21昇段試験【7. CSS - Position】

22. 228. お茶サイト

23. 23【補足】お茶サイトコーディング攻略法

24. 24昇段試験【8. お茶サイト】

25. 259. マルチデバイスに対応したサイト作り

26. 26昇段試験【9. マルチデバイスに対応したサイト作り】

27. 2710. 総合試験とポートフォリオ制作

28. 28総合試験

29. 29ポートフォリオを提出する