レッスンの概要
全30回のレッスンで基礎からホームページの作り方を学ぶレッスンです。レッスン受講後に、HTMLとCSSを用いて課題のサイトを制作して、メンターから評価をもらえます。
レッスンの受講方法は簡単。いつでも、どこからでも受講可能で、好きな時間に受講できます。期間は最長で1年間。1年の間に課題のサイトをスマホ対応のサイトへ作り上げていくことができます。
その間、メンターが疑問や質問にお答えしますので、無理なくスキルが身につきます。
本レッスンの講師は現役のウエブ制作会社のデザイナーですので、制作現場で使われる実践的な手法をお教えします。
レッスンに使用するアプリケーションはOSに標準搭載されているアプリケーションと、インターネットから入手できる無料ソフトだけですので、PCを持っていればどなたでもホームページが作れるレッスンになっています。
こんな方におすすめです
働いているけど、リスキリングで何か学びたい
将来、ウエブサイトのコーダーとして独立したい
家事の合間に副業として、コーディングで稼ぎたい
1年間、メンターとしてウエブ制作会社の講師が並走しますので、
現場で通用する実践スキルが身につきます
Webの基本は今も昔も変わらずHTMLとCSS
インターネットの世界は進歩がとても速く、次々に新しい技術や手法が出てきています。ホームページ制作手法もアプリケーションを使っての制作、CMSで構築されるもの、フレームワークという技術を使ったものまでさまざまです。
ただ、どの手法を使ったとしても、ホームページ制作はHTMLとCSSという技術があり、その2つの習得は今も昔もホームページ制作の基本です。
このレッスンでは、そんなHTMLとCSSの技術を基本から習得できます。
レッスンの内容
下記のとおり、全30の項目を3つのセッションに分けてレッスンを行います。
まずは「HTMLとCSSを学ぶための準備」としてWebの仕組みやHTMLとCSSの概要ついて解説します。
次は、基礎的な「HTMLの基礎知識」として、HTML5のタグについて解説します。その次に、「CSSの基礎知識」としてCSS3のプロパティによる装飾について解説します。
レッスン受講後に、HTMLとCSSを用いて課題のサイトを制作して、メンターから評価をもらいます。
レッスンに使用するアプリケーションはOSに標準搭載されているアプリケーションと、インターネットから入手できる無料ソフトだけですので、PCを持っていればどなたでもホームページが作れるレッスンです。
HTMLとCSSを学ぶための準備
Webの仕組み、HTMLとCSS
Webサイトとは? どのようにして作られているのか？ ブラウザーとは? を解説します
Visual Studio Codeのインストールと設定
HTMLとCSSを記述する準備として、エディター（Visual Studio Code）のインストールと設定について解説します。
HTMLの基礎知識
HTMLでHello World!を表示する
HTMLを記述してブラウザー上で表示してみましょう。
ページのメタデータタグ
<head>内に記述する基本的なタグを解説します。
文章の見出しと段落タグ
「見出し」を指定するh1〜h6タグ、「段落」タグのpタグの使い方を解説します。
文章内で使うタグ
HTMLの文章内で使うタグを紹介します。
画像を表示するタグ
ページに「画像」を表示するimgタグの使い方を解説します。
リンクを設定するタグ
別の文章やファイルを繋ぎ合わせ、ファイル間を自在に遷移するaタグについて解説します。
htmlの要素を指定するタグ
ページの要素を明示的に指定するタグについて解説します。
内容を明示的に指定するタグ
コンテンツを囲って文章構造をわかりやすくするためのタグについて解説します。
ナビゲーションであることを表すタグ
ナビゲーションであることを表すタグ「nav」について解説します。
リストのタグ
箇条書きリスト・番号リスト・説明リストのタグについて解説します。
表組みレイアウトを表すタグ
「表組み」レイアウトを表すtableタグについて解説します。
ブロック要素とインライン要素
文章構造に影響しないタグ「div」タグについて、使い方やタグの必要性などを解説します。
HTML5のコンテンツモデル
各HTML要素（タグ）が内包できるコンテンツ（要素）を定義した配置ルールについて解説します。
CSSの基礎知識
CSSの参照方法と文法
CSSを記述するファイルを作成し、文法について解説します。
文字の色を指定する
文字（テキスト）の色の変更について解説します。
文字のスタイルを指定する
文字を太くしたり、斜めにしたり、下線を引く方法を解説します。
文字の大きさを指定する
文字の大きさを指定する「font-size」について解説します。
文字揃えと行間を指定する
文字揃え「text-align」と行間「line-height」について解説します。
背景色と背景画像を指定する
背景に色や画像を設定する「background」について解説します。
横幅と高さを指定する
要素に横幅を指定する「width」と、高さを指定する「height」について解説します。
要素の表示形式を変更する
要素の表示形式を指定する「display」について解説します。
要素に余白を空ける
要素に余白をつくる「margin」と、「padding」について解説します。
要素に枠線をつける
要素に枠線をつけるための「border」について解説します。
要素を横並びにする
要素を柔軟に横並びにする「flexbox」について解説します。
要素を自由に配置する
要素を自由に配置する「position」について解説します。
要素の角を丸くする
要素の角を丸くする「border-radius」について解説します。
要素や文字に影をつける
要素や文字に影をつけて、立体的なデザインにする方法について解説します。
疑似要素について
要素をCSSで擬似的にHTMLに追加する方法について解説します。
制作課題
上記、全30回のレッスンで学んでいただいた知識で最終制作課題に挑戦してもらいます。提出後、メンターがメークアップについて評価します。
チートシートが同梱されていますが、できる限りチートシートを見ずに解決してください。それがあなたの力強い経験になります。まずは、マークアップして思い通りに表示されるかどうか試してください。
「どうしてもうまく表示されない」など疑問や質問は随時、メンターがお答えしますので、じっくり取り組んでください。
1年間、メンターとしてウエブ制作会社の講師が並走しますので、
現場で通用する実践スキルが身につきます
課題としてfigmaのレイアウトデータと雛形のHTMLとCSSからこのページをマークアップします。
運営企業について
私がメンターとしてテクニックをお教えします。
WEB STUDIESは株式会社アットワークによって運営されています。創業25年のプロダクションで紙面のデザインからウエブデザイン・実装・構築までカバーしております。代表者がメンターとして皆さんをフォロー。これまでに培ったデザイン・コーディングの技術をすべてお教えします。