【HTML /CSS知識０から3ヶ月で可能】独学でWebサイトを作り、ネットに公開できるまでの最短7ステップ（副業で稼げる）

こんにちは、ミナミです。

と考えている人は多いと思います。

僕も同じような思いを持っていました。

そして、独学で自分でプログラミングを必死に勉強して、Webサイトを作れるようになりました。

自分で作ったWebサイトをネットに公開できるようになると、自分でお金を稼げるようになります。

しかし、どうやって知識０から自分で作ったWebサイトを公開できるようになるかはわからない人もいるはずです。

独学で自分て作ったWebサイトを公開できるまでの道のりはとても大変です。

僕もいろいろ試行錯誤しながら、勉強してWebサイト公開まで辿り着きました。

そこで、今回はHTML/CSSを独学で学んで、Webサイトを作り、ネットに公開させる方法7ステップを紹介します。

自分で作ったWebサイトを公開できるようになるメリット３選

「そもそも、なんで自分で作ったWebサイトを公開する必要があるの？　」

と思った人もいるかもしれません。

自分で作ったWebサイトを公開できるようになるとたくさんのメリットがあります。

そのメリットはこちらです▼

自分のポートフォリオや実績を作ることができる

Webサイトを公開できるようになると、自分のポートフォリオや実績を作れて、他の人に見てもらうことができる

もし、Webサイトを作る仕事がしたい場合は、自分のポートフォリオや実績を持つことが必須になります。

自分のポートフォリオや実績を作ると、仕事を依頼する人がポートフォリオなどを見て、「この人に仕事を任せようかな」となります。

そのため、

自分のポートフォリオなどのサイトを作ってをネットに公開できると、ネット上で簡単に多くの人にポートフォリオを見てもらい、仕事に繋がりやすい

さらに、自分で作った仮想のサイトをいくつも公開できると、実績が多くの人の目に止まります。

その結果、Webサイトを作って欲しい人が、仕事を頼みやすくなります。

フリーランスや副業で稼げるようになる

自分で作ったサイトをネットに公開できることはサーバーやドメイン、FTPの知識が身に付き、稼げるようになります。

自分でWeb制作やコーディングの仕事をする場合は、依頼されて作ったWebサイトをクライアントのサーバーにアップしなければならない場合があります。

サーバーにアップすることにより、作ったWebサイトをネットで見られるようになります。

これは、自分でWebサイトをネットに公開させるのと同じ方法になります。

つまり、

自分でネットにWebサイトを公開できるようになると、「この人はサーバーに、作ったサイトをアップできる人だ」とクライアントに思われ、仕事を頼まれやすくなる

Webサイトをネットに公開させる方法を知っているか、知らないかはフリーランスや副業する人にとって大きな差があります。

自分のブログを持つことができる

自分でサイトを公開できるようになると、サーバーなどの知識が身に付き、自分でブログを持つことができます。

ブログを持つことはたくさんのメリットがあります。

ブログをすることはWeb制作で後々、必要になってくる知識を身つかせることができます。

僕が今、書いているのもWordPressで作ったブログです。

Webサイトを公開できると、自分のブログを持つことができて、お金を稼げるかもしれないです。

稼げなくても、Web関係の知識がとても身に付くので、Webサイトの公開はできるようになったほうがいいですね。

Webサイトを作るために必要な学ぶべき言語

「何を学べばWebサイトって作れるようになるの？」と疑問に思うかもしれません。

Webサイトを作るために必要な言語はこの３つです。

See the Pen html by minamide kosei (@__kosei) on CodePen.

上の「HTMLとは？」がHTMLでは、h1となり、これはタイトルようなものです。

このようにHTMLはWebページにタイトルや見出しをつけたり、文章やリンクを入れたりすることができる言語です。

しかし、このままだとWebページにただ文字やリンクを入れただけです。

色をつけるなどの装飾を行うのが次のCSSの役割になります。

CSSはHTMLで作成した文章などに色をつけたりできます。

また文章の場所を移動させたりなどの、配置を変更することもできます。

他にも、CSSにはいろんなことができるので、おもしろい言語だと思います。

具体的にCSSの役割はこのようになっています▼

See the Pen Untitled by minamide kosei (@__kosei) on CodePen.

先ほどのHTMLだけで作ったWebページよりも色を変えたり、文字を中央に配置したりなどを行いました。

これがCSSの役割になります。

HTMLとCSSの言語が書けるようになると簡単なWebサイトは作ることができます。

独学でWebサイトを作り、ネットに公開できるまでの7ステップ

それでは、本題の独学でWebサイトを作り、ネットに公開できるまでの7ステップはこちらです▼

時間が取れる人だと3ヶ月あれば、知識が０の状態からWebサイトを作って、ネットに公開することができます。

と言ったものの、人それぞれ学習できる時間が違います。

なので、

3ヶ月でできなくて当たり前なので、気にせずに自分のペースで継続して学習しましょう。

ステップ1　Progate（プロゲート）でHTML/CSSの基礎を学習

最初のステップはProgate（プロゲート）でHTML/CSSの基礎を学んでいきます。

HTML/CSSを学べば、簡単なWebサイトを作れるので、最初はProgate（プロゲート）のHTML/CSSの基礎を学びましょう。

jQuery(javascript)はまだ最初の段階では学習する必要はありません。

HTML/CSSを理解して、コードが書けるようになってからでOKです！！

Progate（プロゲート）はプログラミング知識が０の人が、学び始めの第一歩としてとてもおすすめです。

月々1,078円でかかりますが、1,078円を払う価値はあるサービスです。

１ヶ月だけ入って、学習をしっかりして解約することもできます。

Progate（プロゲート）を無料で学習できる部分もあります。

そのことについて詳しく知りたい人はこちらの記事へ▼

Progate（プロゲート）がおすすめな理由

僕も最初はProgate（プロゲート）でHTML/CSSを学びました。

プログラミング知識がまったくなかった僕でも、Progate（プロゲート）はHTMLやCSSがどんな言語なの理解できました。

実際に解説を見ながら、手を動かてWebサイトを少しずつ作っていくので、楽しかったですね。

しかし、

Progate（プロゲート）だけしていても、あまりスキルアップはできないので、注意が必要

Progate（プロゲート）はあくまでも、「プログラミング言語を使ってこんなことができますよ」という体験ができるサービスです。

例えば、

• HTMLだと、ここにh1タグを入れたら、タイトルになる
• CSSだと、ここにfont-weight:bold;を入れたら、文字が太くなる

というふうにHTML/CSSの体験ができるのが、Progate（プロゲート）です。

なので、Progate（プロゲート）で学んだからと言って、すぐに学んだプログラミング言語が使えるようになるかと言われれば違います。

次のステップに進んで、0からプログラミングを使って、Webサイトを作る必要があります。

反対に、

何もプログラミングを知らない人が、どんなふうにプログラミングを使うのか体験したい人には、Progate（プロゲート）はとてもオススメ

詳しくはこちらの記事で解説しています▼

Progate（プロゲート）はどこまですればいい？

Progate（プロゲート）で学ぶべきコースはHTML/CSSコースです

HTML/CSSコースは

となっています。

このHTML/CSSコースをとりあえず、１周しましょう。

１周しても、あまりHTML/CSSを理解できないかもしれません。

僕も１周しただけでは、あまり理解できませんでした。

答えを見ながら、コードを書いていましたね。

１周しただけでは、あまり理解できなかった人は、もう１周HTML/CSSを学習する

または、わからないところだけ学習してもいいかもです。

しかし、

わからないからと言って、Progate（プロゲート）をHTML/CSSコースを何周もするのは絶対ダメ！！

このことは注意してください。

何周もProgate（プロゲート）をしても意味がないからです。

先ほども言いましたが、Progate（プロゲート）はプログラミングを体験するサービスです。

実践的なことはあまり身につかないので、わからなくても、次のステップに進んだ方が早く成長できます。

次のステップに進んで、自分でコードを書いていく方が早く成長できるので、Progate（プロゲート）は何周もしなくてOKです。

ステップ2　HTML/CSSをテキストで学習

HTML/CSSの学習はProgate（プロゲート）だけでなく、HTML/CSSのテキストで学習しましょう。

テキストで学習するときは、先ほどのProgate（プロゲート）をやりながらでも、OKです。

テキストがあることで、わからない部分がすぐに調べられるます。

「このHTMLってどうやって書けばいいのかわからない」ていうときでも、テキストを見て解決することがあります。

これは僕の実体験です。

手元に置いておくだけで、簡単にテキストを見ることができるので、１冊は持っておくことをオススメします。

Progate（プロゲート）とテキストでHTML/CSSの基礎を学習して、次のステップに進みましょう。

ステップ3　模写コーディング（HTML/CSS)

次のステップは模写コーディングです。

模写コーディングはWebサイトを作るための実践的な学習方法です。

Progate（プロゲート）とテキストでHTML/CSSを学んでも、実際にコードを書くのは難しいです。

コードを書くことに慣れるために、模写コーディングが必要になってきます。

模写コーディングはこのようにたくさんのメリットがあります。

模写コーディングができるようになると、自分で簡単なWebサイトを作れるので、コーディングが楽しくなりますよ！

模写コーディングのポイントはこちらです▼

何回もいろいろなサイトを、模写コーディングして、HTML/CSSを書くことに慣れることが大切

模写コーディングするまでの手順

模写コーディングを始めるまでの手順や模写コーディングのやり方はこちらの詳しく、わかりやすく記事で解説しています。

これから模写コーディングを始める人は見てください。

1 | コードを書くエディタを用意する

コード書くための専用のエディタを用意しましょう。

エディタとはこのようなコードを書くためのソフトです。

なんとなく見たことがあるかもしれません。

僕はこのエディタにコードを書くことに憧れがありましたね。

エディタは無料で使える「Visual Studio Code」を使えばOKです。

多くの人がこの「Visual Studio Code」を使っているので、わからないことがあってもネットで調べることができます。

僕も「Visual Studio Code」を使っています。

2 | 模写するサイトを決める

模写するサイトは最初からネットにあるサイトを模写するのは難しいです。

なので

模写コーディングを学べるサイトにある、サイトを模写していくのがオススメ

模写コーディングを無料で練習できるサイトは、こちらの記事で紹介しています▼

その中でも、模写コーディングを学べるサイトでおすすめなのがCodestepです。

Codestepは模写コーディングやデザインカンプからのコーディング学習をするために作られたサイトです。

模写するサイトも

• 入門
• 初級
• 中級
• 上級

と分かれていて、自分のレベルに合ったサイトを模写することができます。

模写するサイトが18サイトあり、様々なパターンのサイトを模写することができます。

これが無料で学習できるので、codestepはとても評判がいいです。

Codestepの評判についてはこちらの記事で詳しく解説しています▼

僕もcodestepのおかげでコーディングができるようになりました。

3 | ファイルを作成

コーディングする前に、何のデータかわかるようにフォルダに1つファイルを用意します。（上の画像だとsampleの部分）

そのファイルの中に、

• index.html　（HTMLを書く場所）
• style.css　 （CSSを書く場所）
• img　 （画像を置く場所）　

を用意します。

この3つがあれば、HTML/CSSの模写コーディングができようになります。

4 | コーディングしていく

実際にコーディングしていきます。

1. HTMLのheadタグ
2. HTMLのヘッダー
3. HTMLのメイン
4. HTMLのフッダー
5. CSS

という順番でコードを書いていきます。

CSSは「ヘッダー書いたあとすぐにCSSを書く」というように部分ごとに書いていってもいいです。

先にHTMLを全て書いてからCSSを書く、セクションごとにHTMLとCSSを書く、などやりやすい方をしましょう。

模写コーディングは難しい・できないと感じるのは当たり前

模写コーディングをしていると難しい・できないという壁に突き当たります。

これは誰もが通るものです。

「自分は向いていないのではないか」

「全然できそうにない」

と思うかもしれません。

しかし、多くの人が同じように思って、それを乗り越えてきています。

大事なのは、難しい・できないと感じても模写コーディングを続けること

模写コーディングは慣れです。

僕も初めはまったく模写コーディングできませんでしたが、今ではできるようになりました。

それは諦めずに続けてきたからだと思います。

模写コーディングの難しい・できないという壁を乗り越えられると、コーディングスキルが身につき、自分でWebサイトを作られるようになります。

それでは、なぜ模写コーディング難しい・できないと感じでしまうのか、その理由はこちらです▼

模写コーディングが難しい・できないと感じている人は上の理由があてはまるかもしれません。

そんな人に、模写コーディングのコツがあります。

模写コーディングをするときは上のことを気にして、コードを書くようにしましょう。

詳しくはこちらの記事で解説しています▼

ステップ4　Progate（プロゲート）でjQuery(javascript)の基礎を学習

模写コーディングでHTML/CSSが理解できるようになったら、次はProgate（プロゲート）でjQuery(javascript)を学びましょう。

「なぜ、最初にProgate（プロゲート）をしたときに、jQuery(javascript)を学習しなかったのか？」

と疑問に持った人はいるかもしれません。

それは、

jQuery(javascript)はHTML/CSSに比べて単純に難しいから

jQuery(javascript)は最初にも話したようにWebサイトに動きを加えることができる言語です。

ある程度、HTML/CSSの基礎ができていないと、jQuery(javascript)は理解できないです。

そのため、HTML/CSSに慣れてから、Progate（プロゲート）でjQuery(javascript)を学びます。

上の2つのコースをProgate（プロゲート）でやりましょう。

ここでも大事なのが、何周もProgate（プロゲート）をしないことです。

jQuery(javascript)は難しいですが、Progate（プロゲート）でやるなら、2周くらいにしましょう。

Progate（プロゲート）でやるよりも、実際に自分でコードを書いていく方が自分の力になります。

ステップ5　模写コーディング（jQuery/javascript)

Progate（プロゲート）でjQuery(javascript)を学んだら、再び模写コーディングをしていきます。

jQuery(javascript)を使っているWebサイトを模写していきます。

jQuery(javascript)を使っているWebサイトは具体的にいうと、

• ハンバガーメニュー
• スクロールすると、コンテンツが動き出す
• タブメニュー
• スライダー
• ページ内クリックしたときに流れるような動き

などなどです。

jQuery(javascript)を使っているWebサイトは先ほど紹介した、codestepの模写コーディング練習サイトでもあります。

codestepの中級編から、jQuery(javascript)を使っているサイトがある

jQuery(javascript)を使っているサイトを何度も模写コーディングして、ハンバガーメニューやスライダーのコードの書き方に慣れましょう。

ステップ6　デザインカンプからのコーディング

模写コーディングができるようになってきたら、デザインカンプからのコーディングを行います。

デザインカンプからのコーディングは模写コーディングよりもレベルが上がります。

しかし、

デザインカンプからのコーディングができるようになると、Webサイトが作れるようになり、仕事が受けられます。

デザインカンプからのコーディングは模写コーディングよりも、実務に近いやり方です。

ぜひ頑張りましょう。

デザインカンプからコーディングには、デザインソフトが必要

オススメはAdobe XDです。

デザインデータの多くはAdobe XDで作られていることが多いです。

そのため、Adobe XDを使って、デザインカンプからのコーディングに慣れましょう。

デザインデータからのコーディングのやり方はこちらです▼

詳しくはこちらの記事で解説しているので、見てください▼

ステップ7　Webサイトを公開

最後のスッテプ、Webサイトの公開です。

デザインカンプからコーディングしたWebサイトをネットに公開させましょう。

最初にも話しましたが、Webサイトを公開させるメリットはたくさんあります。

自分でオリジナルで作ったWebサイトでもいいですし、既存のデザインデータからコーディングしたサイトでもいいです。

自分のポートフォリオを作った人もいると思います。

一から自分でせっかく作ったWebサイトを公開させないのはもったいないです。

自分の実績として、ネットに公開させましょう。

Webサイトの公開方法はこちら▼

知らない単語が出てきて、難しそうですよね？

安心してください。

とてもわかりやすく、誰でも簡単にコーディングしたWebサイトを公開させる方法を解説した記事があるので、そちらも見てください▼

自分でWebサイトを公開させた後はそのサイトを使って、営業をして仕事をとってきたり、自分で作ったサイトで何か発信してもいいです。

次のステップである、PHPやWordPressについてさらに勉強することもできます。

自分で作ったサイトを公開できるくらいのレベルがあれば、何でもできますね。

独学でWebサイトを作り、ネットに公開できるまでの最短５ステップ　まとめ

今回は知識０の状態から、独学でプログラミングを学び、作ったサイトをネットに公開できるまでの７ステップ解説しました。

改めて、7つのステップがこちら▼

知識０の状態から、ネットにサイトを公開させるのはとても難しいです。何ヶ月もかかります。

でも、諦めなければ、スキルは身についてきます。

僕も自分で作ったWebサイトをネットに公開するまでに4ヶ月くらいかかりました。

時間はかかりますが、学習する価値はあります。

Webサイトを自分で作って、公開できる人なんて周りにいますか？

いないと思います。

それだけWebサイトを作って、公開できることはそれだけ希少なスキルです。

ぜひ、学習頑張ってほしいですね。

独学でWebサイトを作って、ネットに公開させたい人の参考になってもらえればと思います。