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】初心者が独学で勉強を始めてみた時の話【意外と出来る】

  てんし君 ちなみにHyper Text Markup Language (ハイパー・テキスト・マークアップ・ランゲージ)の略で「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の初心者は何をすべき?【経験をもとに解説】

その他HTML/CSSに関する記事

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

 

続きを見る

【最新】HTML/CSSを習得できるプログラミングスクールランキングと書かれた画像
HTML/CSSを習得できるプログラミングスクールランキング

  あなたすいません、まだHTML/CSSについてよくわかっていないのですが、そもそもどんなものなのでしょうか?   こんな疑問に簡単に答えていきます。   WEBサイト ...

続きを見る

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

 

続きを見る

テックアカデミーでHTMLとCSSを無料で学ぶ技【初心者必見】と書かれた画像
テックアカデミーでHTMLとCSSを無料で学ぶ技【初心者必見】

  あなた簡単に無料教材を手に入れることができました!でも少し質問があるのですがいいですか?   この章ではテックアカデミーの無料教材についてよくある質問に対して答えていきます。 ...

続きを見る

HTMLとCSSの意味をエンジニアの僕が解説【1から学べる】と書かれた画像
HTMLとCSSの意味をエンジニアの僕が解説【1から学べる】

  あなたHTMLの意味とCSSの意味はわかりました。2つを使うと何ができるんでしょうか?   HTMLとCSSの意味を理解して2つを使えるようになると以下のことができます。 ・W ...

続きを見る

HTMLとCSSのオススメ教材を紹介【無料あり】と書かれた画像
HTMLとCSSのオススメ教材を紹介【無料あり】

  てんし君 大手プログラミングスクールのテックアカデミーが自社アピールのために提供しています。 大手の会社の教材なので情報も正確で信頼できます。   無料教材を手に入れる方法はコ ...

続きを見る

HTMLとCSSの入門方法【現役エンジニアの僕が解説】と書かれた画像
HTMLとCSSの入門方法【現役エンジニアの僕が解説】

  あなた本当に0円なの?急に有料になったりしない?   このように思う方もいると思いますが安心してください。 まったく料金はかかりませんし、無料教材を手にいれたからと言って本コー ...

続きを見る

HTMLとCSSの初心者は何をすべき?【経験をもとに解説】と書かれた画像
HTMLとCSSの初心者は何をすべき?【経験をもとに解説】

 

続きを見る

HTMLとCSSが難しいと感じた時に僕がとった行動と書かれた画像
HTMLとCSSが難しいと感じた時に僕がとった行動

 

続きを見る

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

  てんし君   この記事を読んでわかること ①HTML・CSSの独学勉強方法 ②HTML・CSSの独学のきつい点 ③HTML・CSSを勉強した後にエンジニアになった僕の話 &nb ...

続きを見る

HTMLとCSSの初心者は模写をしよう【僕もやりました】と書かれた画像
HTMLとCSSの初心者は模写をしよう【僕もやりました】

 

続きを見る

HTMLとCSSの資格はあるの?必要?【現場の声を伝えます】と書かれた画像
HTMLとCSSの資格はあるの?必要?【現場の声を伝えます】

  てんし君実践的なテスト内容が特徴ですね。 実務経験者が腕試しで受けるのはいいかもしれませんが、初心者の方は特にこの試験のために頑張る必要はないかなと思います。 この資格を持ってる方も見た ...

続きを見る

僕がHTMLとCSSのアウトプットに使った方法を紹介【必見】と書かれた画像
僕がHTMLとCSSのアウトプットに使った方法を紹介【必見】

  あなたアウトプットの方法はわかりました。でもインプットのタイミングはどうすればいいのでしょうか?   ここまではHTMLとCSSのアウトプットの方法をメインに解説してきました。 ...

続きを見る

-HTML/CSS
-,

Copyright© エンジニアてんし君ブログ , 2021 All Rights Reserved.