未経験でも『10日で出来る‼︎』ホームページ制作（動画教材+サンプルコード付き）【HTML,CSSでプロ級サイトを作ろう！】

現在割引期間中！
正規料金6800円 → 20部まで2480円
ぜひ、この機会にお試していただければ幸いです☆

はじめに

この教材は、HTML,CSSでプロ級サイトをこれから作っていきたいとお考えの初心者の方を対象としてます。

HTML,CSSを利用したホームページ制作の
「基礎〜初中級レベル」までの知識を身に付ける事ができます。

全「21ステップ」のカリキュラムを1日2時間程度を10日間続けていただけば、下記の画像と同じサイトを作れるようになります。

目標のサイト

このサイトを作るために使用する技術は

・HTML
・CSS
・少しjQuery

を利用して、上記の画像と全く同じレイアウトのWEBページを制作することができるようになります。

HTML,CSSはホームページを作るにあたって、必須技術となりますので、ぜひこの機会にご受講いただければ幸いです。

カリキュラムの内容はエンジニアスクールに通われた場合、7〜10万円ほどするレベルのカリキュラム内容となっております。

なぜ、HTML,CSSを学ぶべきなのか？

ここ最近、コロナ騒ぎがありオンラインでの業務が一気に増えてきました。遠隔での業務はいろいろありますが、その中で「WEB制作」は遠隔でのお仕事の中で高額な収益を得ることができる業種の一つだからです。

さらに、ホームページを作る程度でしたら未経験から3ヶ月もあれば業務に就くことも可能です。

ですが完全に独学で勉強をすると、

・わからない用語が多い
・どこから学べばいいかわからない
・エラーが起きた時の対処法がわからない

結局、ほとんどの方が身につかないうちに挫折してしまうのです。

ちなみに高卒、未経験の私が３３歳から始めても、WEBの業務をすることができています。

それはなぜか？？

その理由は、私は「薄く」「長く」「しぶとく」勉強を続けてきたからです。
（たいだい3年くらいかかりました。。汗）

どうしてこれほど時間がかかったかと言うと、

・一人ではやる気も起きない
・自分がやっていることが正しいのか不明

結論、２０回くらい挫折したと思います。。。。

そこで！

私みたいに挫折しないで

未経験からでも「最速で楽しく学べる教材が作れないか！！」

と思い、この「オンラインHTML,CSSの教材」を制作させていただきました！

この教材の特徴

01.未経験から学べる
02.動画で学べる
03.完成版のサンプルコードがあるため誰でもサイトを完成されることができる

私はいままで１０００人以上の生徒様にHTML,CSSの基礎を教えてきました。
そのため、初心者の方がつまずくところをよ〜くわかります。

さらに、挫折しないで覚える方法を日々研究してきました。

この「HTML,CSSの教則」では、そんな私のいままでの経験を凝縮いたしました。

ぜひ、お試しいただければ幸いです。

制作環境について

WindowsでもMacもでこの動画を見てホームページを制作していくことが可能です。

ですが、すごく古いパソコンだったり、あるいはその他のことが原因で制作ができない可能性もあります。

無料でも途中まで学べるようにしておりますので、不安な方は「STEP4」まで着手してみてください。

その時点で問題なければ、最後まで学ぶことが出来ます★

では、早速始めていきましょう！

■STEP_01：「環境構築」

まずは、環境構築を行っていきましょう！

HTML,CSSでホームページを制作する際に、テキストエディタというソフトが必要になりますので、ホームページ制作に利用するパソコンにインストールしましょう！

1-01:Visual Studio Codeの設定

下記の動画でインストール方法を解説しています⬇︎

Visual Studio Codeダウンロードページはこちら

Visual Studio Codeの設定説明ページはこちらをクリック

1-02:開発用ブラウザの準備「Chrome」のインストール

次にChromeブラウザを制作に使用するパソコンにインストールしましょう！

インストール方法はこちらの動画をご確認ください⬇︎

Chromeのダウンロードページはこちら

■STEP_02：「HTML,CSSとは」

必要なアプリのインストールが済んだところで、さっそく本題に入っていきたいと思います。

HTMLとCSSの役割について知っておきましょう！

2-1：「HTML」と「CSS」の違いなどをざっくり解説

一言で説明すると

HTML　→　骨組み
CSS　→　骨組みに対して肉付け、装飾

HTMLだけでも多少はデザインができるのですが、現在はCSSだけでデザインを行うことが主流になっています。

例：「HTMLとCSS」でデザインをした時⬇︎

例：上の画像の「CSS」を外した時（HTMLだけの時）⬇︎

どうでしょうか？
CSSの力って凄くないですか？

さらに画像もCSSで読み込んでいますので、CSSを外してHTMLだけにすると文字だけになってしまうんです。

■STEP_03：「HTMLの基礎の基礎」を解説

では、早速HTMLを触っていきましょう！

この「STEP３」ではあまり細かいことは説明しないで、HTMLの使い方をざっくり解説させていただきます。

3-1：HTMLをブラウザで表示しよう！

3-2：HTMLの基本的なタグを少しご紹介

STEP3のサンプルファイルダウンロード

ここまでの動画で制作してきたデータをダウンロードすることができます⬇︎

HTML基礎.zip

1.48 KB

ファイルダウンロードについて

ダウンロード

STEP3で利用するHTMLタグ一覧

head      -- 基本的には表示されない。システム的なことを入力する
title     -- サイトのタイトル（タブなどに表示される）
body      -- ブラウザに表示される領域
hr        -- 横線を引く
br        -- 改行
p         -- 段落
h1〜h6    -- 見出し
a         -- リンク
ul,li     -- 箇条書き(点)
ol,li     -- 箇条書き(数字)​

■STEP_04：「CSSの基礎」

STEP4では「CSSの設定」と「CSSの使い方」を解説させていただきます！

4-1：「リセットCSS」と「CSS」の設定

リセットCSSのタグ↓

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">

YahooのリセットCSS公式サイトはこちら

ここまでのサンプルデータダウンロードはこちら⬇︎

初期設定.zip

1.37 KB

ファイルダウンロードについて

ダウンロード

4-2：基本のCSSを使ってみよう

このSTEP４で利用するCSSプロパティ一覧

h1{
   margin: 20px; /* 外側の余白 */
   padding: 10px; /* 内側の余白 */
   width: 500px; /* 横幅 */
   height: 500px; /* 縦幅 */
   font-size: 30px; /* 文字サイズ */
   font-weight: bold; /* 太文字 */
   color: #fff; /* 文字の色 */
   text-align: center; /* 中央寄せ */
   line-height: 500px; /* 行間 */
   background: blue; /* 背景色 */
   border: 5px solid red; /* 外枠（外枠の太さ、外枠種類、外枠の色） */
   border-radius: 30px; /* 角丸 （正方形の場合、40%にすると円になる） */
   box-shadow: 5px 5px 5px #999; /* 影 (右、下、フワッと加減、影の色) */
}

■Level_01：「練習問題」

ここまで学んできた知識を使った、練習問題に着手していきましょう！

問題を着手する時の注意点

①まずは、模擬解答を見ないでご自身で考えて着手してください。
解答を先に見ると覚えが悪くなります。

・思い出す
・「どうやってやるのか？」と考える
・何がわからなかったのかを明確にさせる

この３つの作業を行うことで、解決能力が付き、さらに記憶に定着させることができます。

②答えは１つではない

１つのデザインを作るに当たって、数パターン方法があります。
模擬解答では、その数パターンの方法の１つを模擬解答として提示をしております。

③この段階では見本のデザインと完全に一致する必要がありません。

下記の問題の見本のデザインは、あくまでも参考です。
だいたい近いデザインになればOKです。

また、やり方を覚えたらいろいろな形を自分で考えて作ってみると、能力がアップされていきます。

まずは、楽しんでくださいね☆