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を学習する

 

こちらでは無料体験で学べる内容を僕の体験を元にまとめています。

>>僕がテックアカデミーの無料体験を受けた時の話【内容を詳しく公開】

 

 

無料体験で基本的な用語を理解した後は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の独学方法

・本を読む

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

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

 

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

>>オンラインプログラミングスクールのオススメ3選【通いました】

 

【ここがきつい】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の知識をどんどんつけてくつもりです。

 

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

 

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

 

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

 

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

 

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

 

【追記】

エンジニアになりました

 

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

 

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

 

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

 

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

 

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

 

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

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

 

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

 

・毎日学びがある

・服装や髪型が自由

・給料もいい

・今後も伸びていく業界

 

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

 

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

 

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

 

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

 

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

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

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

 

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

 

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

>>オンラインプログラミングスクールのオススメ3選【通いました】

 

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

 

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

 

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

 

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

 

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

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

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

 

と思ったのです。

 

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

 

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

>>オンラインプログラミングスクールのオススメ3選【通いました】

 

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

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

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

 

関連記事

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

 

続きを見る

プログラミングを独学で習得する3つの方法|現役プログラマーの僕が解説と書かれた画像
プログラミングを独学で習得する3つの方法|現役プログラマーの僕が解説

  てんし君   プログラミングの学習を始めるにあたって多くの人が気にすることがプログラミングは独学でも習得できるのかどうかということです。   この記事では現役のプログ ...

続きを見る

エンジニアの志望動機を聞かれたらなんと答えるのがベストなのか【現役エンジニアが真剣に考えてみた】と書かれた画像
エンジニアの志望動機を聞かれたらなんと答えるのがベストなのか【現役エンジニアが真剣に考えてみた】

  あなたエンジニアの面接のときに志望動機を聞かれたときの良い答えってありますか?   この章ではエンジニア面接の際の良い志望動機の答え方を紹介していきます。   【この ...

続きを見る

SES企業とWEB系自社開発企業どっちがいいの?【転職してわかったことをまとめる】と書かれた画像
SES企業とWEB系自社開発企業どっちがいいの?【転職してわかったことをまとめる】

  あなたSESはよくないってこと?   ここまで読み進めてくださっている方は「SESにいいところないじゃん」と思っているかもしれませんがその考え方は間違っています。 SES企業に ...

続きを見る

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

  実はエンジニアになって4ヶ月経ちました。 今回はぶっちゃけエンジニアになってどんな感じ?と気になる方に向けてエンジニアになって数ヶ月経った僕の感想を紹介していきます。   この ...

続きを見る

-HTML/CSS
-,

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