HTML/CSS

HTMLとCSSを独学で1カ月勉強してみた結果【超成長した】

2019年6月21日

HTMLとCSSを独学で1カ月勉強してみた結果【超成長した】と書かれた画像

 

あなた
HTMLとCSSって独学でも勉強できるの?

 

僕は最初はHTMLとCSSを独学で勉強してたよ!
てんし君

 

この記事を読んでわかること

①HTML・CSSの独学勉強方法

②HTML・CSSの独学のきつい点

③HTML・CSSを勉強した後にエンジニアになった僕の話

 

こんな方におすすめ

  • プログラミング初心者の方
  • HTML・CSSを独学で勉強したい方

 

HTMLとCSSは独学でも意外とできる

 

こんにちは。

僕は初めてHTMLとCSSを勉強したときは完全に独学でした。

この記事では僕がHTMLとCSSを独学で習得した時の方法や流れを説明しています。

 

HTMLとCSSを独学で勉強した結果から言うと1カ月で「超成長」しました。

こんなことができるようになりました。

 

・Webサイトの制作(フルスクリーンページ・2カラム・3カラム・お問い合わせページ)

・スマホ対応のページ作成

 

もちろん完全に習得したわけではないですが上記のようなことは独学でもできるようになりました。

もともとはパソコンすらまともに触ったことのない僕がここまでできるようになるとは思ってませんでした。

 

パソコンを触った事がある方なら全然できると思います。

 

HTML・CSSの独学が可能な理由

 

てんし君

HTMLとCSSは独学でも意外とできる

これは事実です。理由を紹介していきます。

 

理由1:教材が充実している

 

勉強を始めて感じたことは、優れた教材も情報もたくさん提供されているということです。

ネット記事でも、Youtubeでも、本でもHTMLとCSSの勉強法について発信してくれている人はたくさんいます。

 

もちろん直接指導を受けることもいいと思いますが、自分でできる人はどんどん調べてできると思います。

 

必要なものがインターネットに接続できるパソコンだけでいいというのがこれまた嬉しいですよね。

またHTMLとCSSを編集するツールも無料でダウンロードできるので環境に関してはマジでほとんどの人が初期投資0円で整えれます。

 

理由2:そもそもそんなに難しくない

 

基本的に覚えることは少ないし決まりもはっきり決まっているのでそんなに複雑ではありません。

どちらかというと「慣れ」のほうが大事かなと思います。

 

大抵の人は続けていけばHTMLとCSSを使った職で活躍するのは可能だと思います。

 

理由3:楽しい

 

シンプルな理由ですが楽しいです。

特にCSSでうまくデザインできた時は嬉しいです。

 

HTMLではシンプルなWebページの構造しか作れません。

CSSと組み合わせることでWebページを充実させることが出来ます。

 

楽しさを感じるのには個人差はあるかもしれませんが、、

比較的しんどさは少ないと思います。

 

初心者には嬉しいですよね。

 

てんし君
最初からめちゃくちゃ難しいとなえるからカンタンで良かった!

 

HTML・CSSの独学が可能な理由

・教材が充実している

・難しく無い

・楽しい

 

HTMLと CSSの独学スケジュール

 

僕が初めてHTMLと CSSをコーディングした時は、職に就くわけでもなく学校にも行っているわけではなかったので時間はめちゃくちゃありました。

 

その中でも勉強時間は多くても1日5時間ぐらいでした。

大体午後の中で5時間ぐらい勉強するっていう感じです。

 

てんし君

強制感が出るのは嫌だったので、楽しめるペースでやってました。

 

もし学校や仕事と両立してHTMLとCSSを勉強しようとしている方は、もう少し時間の使い方を工夫する必要はあるかなと思います。

 

・1日5時間の学習を1ヶ月続けました

 

具体的なHTMLとCSSの独学方法

具体的なHTMLとCSSの独学方法と書かれた画像

 

まず最初は大手プログラミングスクールのテックアカデミーが提供してくれている無料教材で基本的なプログラミングの仕組みや用語を勉強しました。

 

そもそもパソコン自体が初めての僕にとってはHTMLとCSSの用語の意味から理解したかったのでとても助かりました。

 

無料で教材を提供してくれるテックアカデミーに感謝です、、

>>テックアカデミーのHTMLとCSSの無料教材を手に入れる

 

※追記:HTMLとCSSを使ったサイトを公開できるまでの無料学習カリキュラムを公開しました

なんと、当サイトでHTMLとCSSを学べる無料学習カリキュラムを公開しています。

実際にコードを書いて、サイトをアップロードするところまで学習できます。

HTMLとCSSがどのようなものなのか知るという点において、わりと勉強になるかと思います。

よかったらどうぞです。

 

>>【完全無料】HTMLとCSSの学習ステップ一覧

HTMLとCSSの学習ステップ一覧と書かれた画像
【完全無料】HTMLとCSSの学習ステップ一覧

  てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。   ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...

続きを見る

 

続きです。

無料教材で基本的な用語を理解した後は3日間ほどとりあえず買った本を読みました。

 

全て覚えるわけではなく「大体こんな感じね」と8割の理解を目指していました。特に暗記もしませんでした。

実際に僕が使っていたのがWebデザイナーManaさんの

 

1冊ですべて身につくHTML&CSSとWebデザイン

でした。

 

この本は本屋でHTMLとCSSについての本を探していた時に発見したのですが、本当に素晴らしかったです。

HTMLとCSSの基本から学べますし、応用したWebデザインについても勉強できます。

 

これさえあればとりあえずHTMLとCSSについての知識は問題ないかと思います。

 

注意ポイント

教材は自分に合ったものを利用すればいいと思いますがあれこれ手を付けることはやめましょう。

1つの教材を完璧にした方が全然習得は早いです。

 

本を1通り読み終えた後の1週間は実際のWebページの制作に取り掛かってみました。

 

HTMLとCSSの見本のコードを見ながらコードエディターに打ち込んで作っていました。

 

てんし君
地道だったけどWebサイトを作る感覚が得れたのがよかったかなと思います。

特に難しいことは考えず、コードを写して、表示を確認しての繰り返しでしたなぁ

 

次の1週間は作ったWebサイトのコードを紙に書き出して、暗記して、見本を見ずにエディターに打ち込む練習をしました。

エディターの使い方から学習の始め方までこちらの記事で紹介しています。

 

check
アメリカ書籍ボックス
【HTML】初心者が独学で勉強を始めてみた時の話【意外と出来る】

  あなた HTMLってたまに目にするけど何?HTMLって初心者でも勉強できるの?   こんな風に思ったことありませんか? 突然ですが「まず行動」がモットーの僕が挑戦した時の話をし ...

続きを見る

 

てんし君
ここが少し難しかったです。

見本を見ながら打ち込むのと、覚えて打ち込むのは全然違ってすぐにはできませんでした。

何回も紙に書き出して覚えました!

寝る前はコードを見て眠りに落ち、起きたらまず前日覚えたコードの確認をしました。

 

何とかWebサイトの基本のコードを8割方覚えた次の週は、YoutubeでDarkCodeというチャンネルのHTMLとCSSを使った編集動画を見本に勉強しました。

(バックミュージックがやけにパリピ気味なので気になる方は消音にしましょう)

 

この時の手順もとりあえずコードを写して表示させて楽しむ→見本のコードを紙に書き出す→暗記する→見本を見ずにエディターに打ち込んで表示させる練習をするという流れでした。

 

てんし君
わからないときはわからなかった部分を紙にマークしていました!

見本を見ずにコードを打ち込むときは「このコードを使うことでこう表示されるんだな」とイメージしながら取り組むことで成長速度は上がると思います。

最終的な理想の段階は

イメージ→コードを書く

ですからね!!(ここは僕もまだ修行が必要です。)

 

【まとめ:HTML・CSSの独学方法】

・本を読む

・実際に見本をみながらコードを書いてみる

・見本を見ずにコードを書く

 

\ こちらではHTMLとCSSを含むWEB制作を学べるスクールをランキング化しています /

>>【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

wordpress
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

  あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。   ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...

続きを見る

 

【ここがきつい】HTML・CSS独学の辛い点

【ここがきつい】HTML・CSS独学の辛い点 と書かれた画像

 

あなた
じゃあ結構HTMLとCSSの勉強は簡単ってこと?

 

てんし君
簡単、、といいたいところだけどやはりキツイ点もあります

 

聞ける人がいない

 

HTMLとCSSの独学できついところは「すぐに聞ける人がいない」というところでしょう。

 

てんし君
正直僕も「うわ、ここわかんないや。。誰か先生が欲しい。。」

ってなるときもありました。

 

正直完璧主義の方はしんどいと思います。

調べてもどうしてもわからないところも出てきますからね。

 

結論から言うと独学で「完璧」を求めることはなかなか難しいと思います。

 

HTMLとCSSの完全なマスターは仕事として実務経験をして初めてできるものだと思っています。

ただ独学でも8割の習得を目指すことは可能です。

 

「完全なマスターが出来ない」点は辛いところではありますが、将来HTMLとCSSを使った仕事をしたい方は早めに勉強をしておいて損はないですし、就職やフリーランス挑戦のアドバンテージになると思います。

 

独学でHTMLとCSSの習得を目指す方は「8割習得」を心にとめて独学することをおすすめします。

 

HTMLの理解はなかなかにスムーズにできるがCSSが難しい

 

あくまで僕が1か月独学しての感想ですが、HTMLの理解はCSSよりはスムーズにできると思います。

理由としては「覚えることが少ない」ことと「型が決まっている」ことです。

 

Webページの土台部分なのでそんなに大きく変化することもなく、型も決まってるんですよね。

コードを書く練習を繰り返していれば早い段階で覚えることが出来ると思います。

 

一方CSSは意外と難しいです。

Webページの土台部分がHTMLならばCSSは飾りつけです。

作り手の美術センスや知識の豊富さが問われるところだと思います。

 

正直僕もこの点に関してはまだまだ上達の余地があると思っています

むしろこのCSSに関しては勉強すれば勉強するほどやりたいことも、デザインの幅も広がって組み合わせも増えていくのでゴールはないのではないかなんて思っています。

 

HTML/CSS学習を今すぐ始めたい方はコチラ

>>【完全無料】HTMLとCSSの学習ステップ一覧

HTMLとCSSの学習ステップ一覧と書かれた画像
【完全無料】HTMLとCSSの学習ステップ一覧

  てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。   ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...

続きを見る

 

結論:HTMLとCSSは独学でも可能

 

あらためてまとめると「HTMLとCSSはスクールに通わなくても独学で8割習得が可能」です。

今後も他のプログラミング言語を学びながら、HTMLとCSSの知識をどんどんつけてくつもりです。

 

CSSの知識をいっぱいつけていく中でデザインの勉強もしたいなぁとも思っています。

Webページの構成からデザイン、そして機能的な面でのプログラムが出来ればなんだかWebページ作成を制することが出来る気がするんですよね。

 

僕の今の目標はこんな感じです。

皆さんの目標は何ですか?

 

これからも楽しんで勉強していきます。これから独学を始める方は一緒に頑張りましょう!!

 

【追記】

エンジニアになりました

>>【エンジニア最高】エンジニアになって4ヶ月たったので感想をまとめます

 

この頃はHTMLとかCSSを独学で書いていたのかぁと感傷に浸りながら追記分を書いています。

HTMLやCSSを独学で身につけた後、僕はもっとプログラミングを勉強してエンジニアになりたいと思いプログラミングスクールに通ってエンジニアになりました。

現在は2社目のWEB系の自社開発企業で働かせていただきます。

 

【おまけ】HTMLとCSSを独学したあとエンジニアになるためにプログラミングスクールに通った僕の話

 

実はHTMLとCSSを独学で学んだ後に本格的にエンジニアになりたいなと思ってプログラミングスクールに通いました。

現在は働き方も自由でお金も満足するぐらいもらいながら、エンジニアとして働く事ができています。

 

・毎日学びがある

・服装や髪型が自由

・給料もいい

・今後も伸びていく業界

 

正直いいところしかありません。

ちなみに、エンジニア受講したスクールは【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】にまとめています。

 

HTMLとCSSをスクールで学べば在宅ワークができるようになる

 

独学ではなくプログラミングスクールでHTMLとCSSを学べば信頼性も技術も上がります。

在宅でWebサイトのコーディングの仕事なども獲得できます。

 

あなたが「エンジニアになりたい」「Web制作の副業でしっかり稼ぎたい」と思っているのなら、スクールに通ったほうがいいかなと。

中には受講後に案件を紹介してくれるスクールもありますからね。

 

まとめると以下のような感じ。

 

・副業やエンジニア転職など、学習したことでお金を稼ぎたいならスクールにいくべき

・HTMLとCSSを学べば在宅ワークも可能

・自己満足で終わるなら独学でも十分

 

Web制作の副業で稼ぎたい方向けのスクールは以下で紹介しています。

優良スクールを厳しくランキング化しているので、かなり参考になるはず。

 

>>【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

※受講後の案件紹介保証もあります

 

【補足】プログラミングスクールのHTML・CSSの教材がめちゃくちゃわかりやすかった

 

HTMLとCSSを学んでからスクールに入った僕ですが、あらためてHTMLとCSSの内容もありました。

そこでの教材にも感動したので一応共有です。

 

最初は「ふーんHTMLとCSSもあるんだ、まぁ独学で習得したしもう一回習うか」という感じでした。

しかし、実際に習ってみると

 

なんだこれは全然理解度が違う、、めちゃくちゃわかりやすい

それに「WEBの仕組み」「ホームページの作り方」「WEBアプリの作り方」も学べるなんて、、

最初から受講しておけば良かった、、

 

と思ったのです。

 

もちろん独学も可能ですが、本格的にHTML・CSSも勉強したい方は最初からスクールに通うことをおすすめします。

今回は以上です。

 

>>【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

※HTMLとCSSを本気で学習したい方向け。受講後の案件紹介保証もあります。

 

>>【完全無料】HTMLとCSSの学習ステップ一覧

HTMLとCSSの学習ステップ一覧と書かれた画像
【完全無料】HTMLとCSSの学習ステップ一覧

  てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。   ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...

続きを見る

※この後すぐに学習開始できます

 

\こちらの記事もよく読まれています/

>>HTMLとCSSの入門方法【現役エンジニアの僕が解説】

>>HTMLとCSSの初心者は何をすべき?【経験をもとに解説】

プログラミングスクールに関する情報

【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】と書かれた画像
【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

  あなたプログラミングスクールに通いたいけどたくさんありすぎてどこがいいのかわかりません。   最近はエンジニアブームということもありプログラミングスクールが増えました。 一方でたくさんありすぎてど ...

続きを見る

返金保証ありのプログラミングスクールランキング【エンジニアが選びました】と表示されたパソコンの画面
【転職保証つき】返金保証ありのプログラミングスクールランキング【エンジニアが選びました】

  あなた返金保証がついているオススメのプログラミングスクールってありますか?   結論から話すと、返金保証つきのプログラミングスクールランキングは次の通りです。   1位:DMMWEBキャンプ  【 ...

続きを見る

wordpress
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

  あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。   ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...

続きを見る

フリーランス
無料あり:フリーランスを目指せるプログラミングスクールランキング【体験をもとに徹底分析しました】

  あなたフリーランスエンジニアを目指すことができるプログラミングスクールってありますか?   最近では、高年収や働きやすさの魅力からフリーランスエンジニアを目指す方も増えてきました。 結論から話すと ...

続きを見る

WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】と書かれた画像
WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   結論から話すと、WEB系自社開発に行きやすいスクールのランキングは以下の通り。   第1位:テックアカデミー ...

続きを見る

-HTML/CSS
-,

S