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の入門方法【現役エンジニアの僕が解説】

 

無料教材で基本的な用語を理解した後は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を学べるスクールをランキング化しています/

>>HTML/CSSを習得できるプログラミングスクールランキング

HTMLとCSSの無料教材を手に入れる方法を公開しました。

>>テックアカデミーでHTMLとCSSを無料で学ぶ技【初心者必見】

 


【ここがきつい】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の独学のツライ点

・聞ける人がいない

・CSSは難しい

 

HTML/CSS学習の具体的な始め方を知りたい方はコチラ

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

初心者の方で悩んでいる方はコチラ

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

【追記】

エンジニアになりました

 

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

 

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

 

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

 

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

 

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

 

実はHTMLとCSSを独学で学んだ後に本格的にエンジニアになりたいなと思って

プログラミングスクールに通いました。

 

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

 

・毎日学びがある

・服装や髪型が自由

・給料もいい

・今後も伸びていく業界

 

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

 

プログラミングスクールに通ってエンジニアになったら最高の働き方を手に入れることができた

 

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

 

独学ではなくプログラミングスクールでHTMLとCSSを学べば信頼性も技術も上がるので在宅でWebサイトのコーディングの仕事なども獲得できます。

 

・学習したことでお金を稼ぎたいならスクールにいくべき

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

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

 

こちらでは僕がプログラミングのスキルを身につけるために通ったスクールを紹介しています。おかげでリモートワークもできているのでHTMLとCSSのスキルをつけて稼ぎたいという方も参考になるはずです。

 

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

>>HTML/CSSを習得できるプログラミングスクールランキング

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

 

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

 

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

 

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

 

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

しかもエンジニアになるための他の言語も学べるなんて、、

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

 

と思ったのです。

 

もしエンジニアなりたくてHTML・CSSも勉強したい方は最初からスクールに通うことをおすすめします。

 

\僕がプログラミングをマスターするために通ったスクールを紹介しています/

>>HTML/CSSを習得できるプログラミングスクールランキング

 

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

>>テックアカデミーでHTMLとCSSを無料で学ぶ技【初心者必見】

 

>>プログラミングとは何なのか?これから学習を始めるあなたにわかりやすく解説

 

>>WEBエンジニアってどんな仕事?【現役エンジニアの僕が解説】

 

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

 

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

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

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

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

続きを見る

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

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

続きを見る

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

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

続きを見る

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

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   エンジニアを目指すにあたってまず最初に自社開発企業への転職を希望する方がほとんどです。 ...

続きを見る

プログラミンングスクールに無料で通うならココ【現役エンジニアおすすめ】と書かれた画像
プログラミンングスクールに無料で通うならココ【現役エンジニアおすすめ】

  あなたプログラミングスクールに通いたいけどどのスクールも何十万もして通えません。コスパよくエンジニアになれるスクールはありますか?   今回はコスパが良いどころか完全に無料でプ ...

続きを見る

-HTML/CSS
-,

© 2021 エンジニアてんし君ブログ