このレッスンについて

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


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

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

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

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

このレッスンではマークアップエンジニアになるための基礎知識を身に着け、更に具体的なウェブデザインを実装する経験を積み、就職活動ができるようになるところまでを目指します。

各パートについて

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

   このレッスンについての説明です。 まずは上記の動画をご覧ください。 下記にある「カリキュラムへようこそ（ガイドブック・イントロダクション）」を読みましょう。 これを読むことで、マークアップエンジニアの業務内容や役割のイメージを掴んでいただく事ができます。 また、学習を開始するにあたって必要な心構えもまとめてあります。 これから学んでいく内容とともに、必要な情報を習得しておきましょう。 マークアップエンジニア（コーダー）の役割、HTML/CSSの習得方法、そして 実践的なコーディングへのステップアップを段階的に説明しています。 レベル1から10までのカリキュ…

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

   PCについて Windows、Mac ともに受講可能ですが、テキストやガイドブックはWindows の場合のみ記載しています。Mac をお使いの方はご自身でやり方を調べながら進めていただくようにお願いします。（ご不明な点は、講師のわかる範囲で質疑応答の中で対応させていただくことも可能ですのでご活用下さい。） カリキュラムの内容 HTML/CSSの専門家（マークアップエンジニア）として就職するためのカリキュラムです。実践力を養うための具体的なコーディング教材と、ポートフォリオサイトを作成するためのガイドを含んでいます。 ご自身のコーディング能力を育てるカリキュラムとして非常に有効で、また…

3. 3受講準備をする

   本レッスンを受講するにあたり、まずはPCの様々なセットアップが必要です。 こちらのパートでは、準備について詳しく記載しています。 ウェブサーバーを用意する では、有料ではありますがなるべく早い段階から使い慣れてほしいという観点から ウェブサーバーをレンタルしていただくようにお願いします。 ウェブサーバーの準備とFileZillaを使ったファイルアップロード、そしてブラウザでの確認方法、さらにZoomを使ったオンラインミーティング参加のための準備手順を詳細に解説しています。特に、ポートフォリオ作成のためにウェブサーバー（レンタルサーバーを推奨）の利用を促し、その設定から…

4. 41. LEVEL1 Web、HTMLパート１

   このレベルでは、 ウェブ（Web）上の文書形式であるHTMLの基本的な書き方を学びます。 ウェブとは何かから紐解いてその中でのHTMLの位置付けを明確にし、HTMLの基礎を扱います。 HTMLではセマンティクスと呼ばれるそれぞれの要素毎の意味理解が大変重要です。各要素の意味をしっかり理解しながら進めて下さい。 キーボードショートカット を用いた効率的な学習方法から始まり、 Web、HTML、CSSの基本概念、HTMLタグの書き方とセマンティクス、ファイル名やファイルパスのルール、画像ファイル形式、リンクの作り方といったWebサイト制作に必要な基礎知識が、段階的に解説…

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

   1.3.1. 新規の「HTML5の最小基本構文」を作成するについて補足説明しています。

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

   1.5.2.1. 画像のパス表記例についての補足説明です。

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

   昇段試験を受け、指示に従ってファイルを提出して下さい。合格した際に発行されるパスワードを以下の選択肢から選択して下さい。

8. 82. LEVEL2 HTMLパート２

   LEVEL1では HTML の基本といくつかの要素を学びました。 LEVEL2では HTML の残りの要素を学び、 HTML の学習を終了します。 LEVEL2で最も注視すべきカリキュラムは「2.3. ページの大規模構造を作る 」です。 HTMLの基本要素に加え、表タグ、大規模なページ構造を構築するためのセマンティックタグ、フォーム要素などといった高度な要素の使い方を解説しています。 特に、セマンティックタグを用いたウェブサイトの大規模構造の構築と、各タグの適切な使用方法、入れ子構造の重要性に重点が置かれています。 さらに、デベロッパーツールを用いたHTML/CSSの検証方法や、昇段…

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

   2.2. 参考：「コンテンツモデル」についてにおけるコンテンツモデル（コンテンツカテゴリー）についての補足説明です。

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

    昇段試験を受け、指示に従ってファイルを提出して下さい。合格した際に発行されるパスワードを以下の選択肢から選択して下さい。

11. 113. LEVEL3 CSSの基本

    いよいよページの見栄えを良くするスタイリングの方法を学びます。 ページのスタイリングにはCSSという、HTMLとは書き方も考え方も全く異なる新しい言語を使用します。 前半では、CSSの基本的な構文と、セレクタ（要素の指定）、プロパティ（スタイルの指示）、値（スタイルの具体的な内容） の役割を解説し、実践的な演習を通してCSS記述の感覚を掴ませます。 後半では、様々なセレクタの種類（タイプセレクタ、ユニバーサルセレクタ、クラスセレクタ、IDセレクタ、子孫セレクタなど）とそれらの優先順位、さらにCSSの記述場所（インライン、内部、外部）について説明しています。こちらでは、 外部CSS…

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

    昇段試験を受け、指示に従ってファイルを提出して下さい。合格した際に発行されるパスワードを以下の選択肢から選択して下さい。

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

    CSSの根幹をなすのが「ボックス」という概念です。 CSSの世界では全てをこのボックス単位で考えることになります。 そしてそのボックスには「ボックスモデル」という多層構造があります。 CSSの基礎として欠かすことのできない「ボックスモデル」の概念を身に着けましょう。 ボックスモデルは、コンテンツ、パディング、ボーダー、マージンの4層構造から成る各要素の基本構造であり、レイアウトは、 通常のフロー、float、position、flex、gridといった様々な方法を用いて実現されます。 テキストでは、ボックスモデルの各プロパティ（margin、padding、borderな…

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

    昇段試験を受け、指示に従ってファイルを提出して下さい。合格した際に発行されるパスワードを以下の選択肢から選択して下さい。

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

    CSSの背景機能は意外にリッチで、複数の背景を敷くことも可能です。 floatプロパティは本の挿絵のように画像の周りに文章を回り込ませることができるレイアウトの道具です。実例としてナビメニュー（便利なリンク集）の組み方も学びます。 背景画像の扱い（色や画像の重ね合わせ、繰り返し、配置、サイズ調整）、floatプロパティによるレイアウト（画像の回り込み、親要素との関係、clearfix）、リスト要素やoverflowプロパティの使い方、そしてナビゲーションメニューの作成について解説しています。 さらに、ショートハンドプロパティの注意点、ブロックレベル要素とインライン要素、CSSの継承…

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

    昇段試験を受け、指示に従ってファイルを提出して下さい。合格した際に発行されるパスワードを以下の選択肢から選択して下さい。

17. 176. LEVEL6 CSS - Flexbox、Grid

    CSSの大きな役割の一つは所定の要素を任意の場所に「レイアウト」することですが、CSSの歴史を振り返ると、このレイアウトのための具体的な道具が正式にサポートされない期間がずいぶんと長かったものです。 満を持して現れた本格的なレイアウトの道具がFlexboxとGridです。 この中でも特にFlexboxは活用の場面の広い、CSSの中でも最重要級の道具になっているので「どんなことができるのか？」と楽しみながら習得して下さい。 Flexboxセクションでは、フレキシブルボックス（Flexbox）の基本概念、display: flex;によるフレックスコンテナの作成、アイテムの配置や折り返しを…

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

    6.1. Flexbox（フレキシブルボックス）で扱うflexboxを学習する時に知っておきたい小技、flexbox攻略法をお伝えします。

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

    昇段試験を受け、指示に従ってファイルを提出して下さい。合格した際に発行されるパスワードを以下の選択肢から選択して下さい。

20. 207. LEVEL7 CSS - Position

    CSSの中の「レイアウト」を担当する道具の最後はPositionプロパティです。 このプロパティを使うと要素を特定の基準点から「ずらす」事が可能になります。 また、ずらした結果他の要素と重なるようになるため、どの要素を手前に表示するかといったコントロールが必要になります。 これら一式を学んでいきましょう。 positionプロパティのrelative、absolute、fixed、stickyといった値の使い分け、z-indexによる重なり順の制御、画面いっぱいの高さにする方法などが説明されています。 さらに、floatレイアウトとの比較や、角丸、影、グラデーションなどのCSS…

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

    昇段試験を受け、指示に従ってファイルを提出して下さい。合格した際に発行されるパスワードを以下の選択肢から選択して下さい。

22. 228. LEVEL8 お茶サイト

    これまでにHTMLとCSSを一通り学びました。 このレベルでは具体的なウェブサイト（お茶サイト）制作を通して、学んだことを確認し、活きた用例を見て理解を深めましょう。 ここからは実践編です。はっきりと難易度が高くなりますので、これまでの学習のやり方とは戦術を変える必要が出てきます。 わかっていないことはそのままにせず、理解できるようになるまで試行錯誤する慎重さが求められます。 テキストの指示に応じてコピペで作業を行うと、この章全体の学習にはそこまで時間はかかりません。 しかし大切なのはそこからです。コピペしたコードの意味を研究し、今度は自分で書けるようになるまで繰り返し訓…

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

    お茶サイトのコーディングを身につけるのは非常に難しいですよね。 教科書に書かれたCSSプロパティを眺めると気が遠くなりそうです。 しかし、その必要はありません。 もっと具体的に効率よくCSSを習得する方法があるのです。 ここではその小技についてお伝えします。

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

    昇段試験を受け、指示に従ってファイルを提出して下さい。合格した際に発行されるパスワードを以下の選択肢から選択して下さい。

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

    現代のウェブはPC以外にスマートフォンへの対応が重要となります。 これをマルチデバイス対応と言い、そのために必要な基礎知識や具体的な技術を学ぶ必要があります。 このレベルのポイントは、数多く出てくる用語への理解です。 スマートフォンに対応するだけでこんなにたくさんの概念が出てくるのかきっと驚くと思いますが、ひとつずつの用語を丁寧に理解してクリアしていってください。 最終的に学ぶマルチデバイス対応の具体的な方法は、そこまで難しいものではないのでリラックスして学んでください。 レスポンシブウェブデザインを中核テーマとし、メディアクエリーによるCSS切り替え、ビューポート設定、リキッ…

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

    昇段試験を受け、指示に従ってファイルを提出して下さい。合格した際に発行されるパスワードを以下の選択肢から選択して下さい。

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

    LEVEL10では総合試験として3種類のデザインのコーディングに取り組んでいただきます。 総合試験は、レスポンシブ対応の3種類のウェブデザインコーディングであり、合格後にはポートフォリオを作成し提出する必要があります。 ポートフォリオ制作では、過去の課題や総合試験の作品を掲載し、自己PRも記載します。 さらに、デベロッパーツール活用法やFigmaの使い方、就職活動に向けた学習継続についても触れています。 総合試験の課題に合格し、ポートフォリオを制作して就職活動に望みましょう。 10. LEVEL10 総合試験とポートフォリオ制作を読む ガイドブックを読むには以下のパスワードを…

28. 28総合試験

    総合試験を受け、指示に従ってファイルを提出して下さい。合格した際に発行されるパスワードを以下の選択肢から選択して下さい。

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

    ポートフォリオを提出し、指導を受けてください。指導に合格したら、合格した際に発行されるパスワードを以下の選択肢から選択して下さい。