ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。
実際にあなたのオリジナルサイトを公開できます。
✔ HTMLとCSSの知識が身についている
✔ WEBの仕組みがわかっている
✔ サーバーにファイルをアップロードする方法がわかっている
✔ 副業で稼ぐための事前知識は十分についている
このロードマップを全て完了すると、あなたは上記のような状態になりますよ。
ではさっそくロードマップに入っていきましょう。
（少し長旅なので、何日かにわけて学習するのもありだと思います）
学習をスタートさせよう
step
1
教材を用意しよう！
-
HTMLとCSSのオススメ教材を紹介【無料あり】
あなたHTMLとCSSの学習を始めようと思っています。オススメの教材はありますか？ HTMLとCSSの学習を始めるにあたっては必ず教材が必要になります。 教材はあなたのHTMLとCSSの学習の ...
続きを見る
step
2
HTMLとCSSの意味を理解しよう！
-
HTMLとCSSの意味をエンジニアの僕が解説【1から学べる】
あなたHTMLとCSSの意味って何でしょうか？言葉は聞いたことがあるのですが実際の意味がわかりません。 HTMLとCSSの学習をスタートしようとしているあなたは「そもそもHTMLとCSSの意味 ...
続きを見る
step
3
HTMLとCSSを使って開発できる環境を整えよう！
-
HTMLとCSSのエディタ紹介【これさえあればOK】
あなたHTMLとCSSの初心者です。HTMLとCSSのおすすめエディタが知りたいです。 HTMLとCSSを使って何かを作ろうと思ったときに必要なものが「エディタ」です。 この記事ではHTMLと ...
続きを見る
step
4
HTMLとCSSを使ってWEBページを表示させてみよう！
-
HTMLとCSSとWEBページの関係性【理解できます】
あなたHTMLとCSSとWEBページってどんな関係性なんでしょうか？ HTMLとCSSの勉強を始めるとHTMLとCSSを使ってWEBページをつくることができるというような言葉をよく見ますよね。 ...
続きを見る
step
5
HTMLでCSS読み込む方法を理解しよう！
-
HTMLでCSSを読み込む方法
あなたHTMLでCSSを読み込むにはどうしたら良いのでしょうか？ 【この記事でわかること】 ✔ HTMLでCSSを読み込む方法 【この記事の信頼性】 この記事を書いている僕は ...
続きを見る
step
6
HTMLの要素の意味を理解しよう！
-
HTMLの要素を理解しよう
あなたHTMLのそれぞれの部分の意味は何ですか？ 前回はHTMLでCSSを読み込む方法を解説しました。 前回：HTMLでCSSを読み込む方法 しかしまだまだHTMLファイルには見慣れない文 ...
続きを見る
step
7
HTMLのタグの書き方を理解しよう！
-
HTMLのタグの書き方【だれでもわかるように解説】
あなたHTMLのタグってどのようにかけばいいですか？ 前回はHTMLを要素として見る方法を学びました。 前回：HTMLの要素を理解しよう 今回は上記のような疑問に答えるべく、HTMLのタグ ...
続きを見る
step
8
HTMLのお決まりのタグの書き方を理解しよう！
-
HTMLで表示するための決まり文句のタグの意味を理解しよう
前回はHTMLのタグの書き方について説明しました。 前回：HTMLのタグの書き方【だれでもわかるように解説】 あなたHTMLファイルの!doctype...みたいなタグってどのような意味がある ...
続きを見る
step
9
HTML要素をCSSでデザインできるようになろう！
-
CSSでHTML要素を指定してデザインする方法
前回はHTMLの決まり文句のタグの書き方について解説しました。 前回：HTMLで表示するための決まり文句のタグの意味を理解しよう HTMLの書き方についてはだいぶ理解が深まってきたかと。 ...
続きを見る
step
10
headタグを書けるようになろう！
-
HTMLのhead要素を理解して記述できるようになろう
あなた大体HTMLとCSSの関係やWEBサイトの仕組みがわかってきたのでこんどは具体的なコードの意味が知りたいです。 前回はHTML要素を指定してCSSでデザインする方法を学びました。 前回： ...
続きを見る
step
11
bodyタグを書けるようになろう！
-
HTMLのbody要素とは？【メイン部分を実装していこう】
これまではプログラミング未経験者の方に向けてHTMLとCSSの意味やWEBページの基本を解説してきました。 前回はHTMLのhead要素について解説しましたね。 前回：HTMLのhead要素を理解 ...
続きを見る
step
12
タイトルをデザインしよう！
-
WEBサイトのタイトルをCSSでデザインしてみよう【大きさや場所を変更】
あなたHTMLのBody要素を表示させるところまではできました。いい感じに見た目を調節していきたいです。 これまではプログラミング未経験者の方に向けてHTMLとCSSの意味やWEBページの基本 ...
続きを見る
step
12
ナビメニューをデザインしよう！
-
HTMLのナビメニューをCSSで装飾する方法
あなたHTMLのナビメニューがいまのままだとダサいのでいい感じにしたいです。 これまではプログラミング未経験者の方に向けてHTMLとCSSの基礎からWEBページの作る流れを解説してきました。 ...
続きを見る
step
13
サイドメニューをデザインしよう！
-
CSSでサイドメニューを装飾しよう【コード付きで紹介】
あなたサイドメニューが今のままだと見にくいので見やすくしたいです。 これまではプログラミング未経験者の方に向けてHTMLとCSSの基礎からWEBページの作る流れを解説してきました。 前回はWE ...
続きを見る
step
14
メインコンテンツのレイアウト崩れを修正しよう！
-
CSSでWEBサイトのメイン要素のレイアウト崩れを修正しよう
あなたWEBページを作っているのですが、メインのレイアウトが崩れてしまっています。 修正方法を教えて下さい。 これまではプログラミング未経験者の方に向けてHTMLとCSSの基礎からWEBページ ...
続きを見る
step
15
画像の位置を調整しよう！
-
CSSで画像を縦並び＆右寄せしよう【すぐにできる】
あなた画像を右寄せしたいです。 どうしたらいいですか？ これまではプログラミング未経験者の方に向けてHTMLとCSSの基礎からWEBページの作る流れを解説してきました。 前回はメインコンテンツ ...
続きを見る
step
16
フッターを修正しよう！
-
CSSでフッターを整えよう【WEB制作の基本です】
あなたWEBサイトのフッターを修正したいです。 どうすればいいですか？ 前回はCSSで画像を縦並びにする方法について解説してきました。 前回の記事：CSSで画像を縦並び＆右寄せしよう【すぐにで ...
続きを見る
step
17
サーバーにアップロードしよう！
-
【サイト公開】HTML/CSSファイルをエックスサーバー上にアップロードする方法
あなたローカル環境のWEBサイトを、誰でも閲覧できるようにしたいです。 どうすればいいですか？ 前回はCSSでフッターを整えてローカル環境でWEBサイトを完成させました。 前回の記事：CSSで ...
続きを見る
\ お疲れさまでした！本格的にWeb制作で副業をしたい方はこちらを参考にさらに学習を進めましょう /
-
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】
あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの？ スクール選びで失敗はしたくないです。 ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...
続きを見る
