HTMLとCSSを独学で習得するためのロードマップ【本・サイトも紹介】

本記事では『HTMLとCSSを独学で習得したい方』に向けて記事を制作しています。

このような流れで詳しく解説していきます。

結論から言うと、HTMLとCSSを独学で習得したい方は自力で考えたコードを書き続けましょう。

『自分』というキーワードが独学では大切です。

この点をしっかり抑えることができると、HTMLとCSSの独学を高い確率で成功させることができます。

この点を語っているブログメディアが少なかったので、本記事ではこの点を詳しく解説していきます。

独学の前に：HTML/CSSとは

HTML/CSSとは、ホームページを作成するための言語です。

HTML：HyperText Markup Language
CSS：Cascading Style Sheets

初心者の方は『HTML＝文字や画像情報を作るための言語、CSS＝デザインを整える言語』と理解しておきましょう。

HTMLとCSSは独学で習得可能です

HTMLとCSSに関しては独学でも習得可能です。

理由は、HTMLとCSSは初心者の方でも理解しやすい言語だからです。

真剣に学べば、遅くても3ヶ月程度である程度の領域まで達することができるはずです。

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

HTMLとCSSを独学で習得できるまでの期間はどのくらい

HTMLとCSSを独学で習得できる期間は人によって異なります。

早い人：2週間
遅い人：3ヶ月

こんな感じだと思います。

最低でも1日3時間勉強していれば、1ヶ月以内には習得可能な言語です。

学習期間に関しては、人によって変わります。

結論：初心者かつ独学で始めるのであればこの言語が1番おすすめ

初心者にはHTML&CSSをおすすめします。

システムを作りたい・iOSアプリを作りたいなどの目的があれば、HTMLとCSSはおすすめしません。

ただ、お金を稼ぎたいという目的だとすると、HTMLとCSSはおすすめの言語です。

初心者でも簡単に案件を獲得できる案件には必ずHTMLとCSSが含まれてきます。

稼ぐという観点で考えると、初心者にはHTMLとCSSがおすすめです。

ただ、HTMLとCSSの独学学習手順を間違えてしまうと、失敗してしまう可能性がありますので、正しい手順を本記事で学んでいって下さい。

【3つの手順】HTMLとCSSを独学で習得する方法

HTMLとCSSを独学で習得する手順は下記の通りです。

HTMLとCSSの独学手順

１つずつ詳しく解説していきます。

大前提：HTMLとCSSの独学ではググる力が重要です

詳しい手順を解説する前に知っておいて欲しいことがあります。

『HTMLやCSSをを独学で勉強するのであれば、ググる力が必要です』

当然、HTMLとCSSを独学で習得しようとすると分からないことが沢山現れます。

その時に、独学で始める方は自力で解決しなくてはいけません。

独学最大のデメリット：分からないことを誰にも聞けない

このデメリットは理解しておきましょう。

ただ、HTMLやCSSに関してはググれば必ず答えが見つかるので、諦めずに検索してみてください。

HTMLとCSSの独学手順①Progateを一周する

手順1はProgateのHTMLとCSS講座を一周することです。

Progateで学習する際には下記の点を意識してみてください。

レスポンシブ、フロート、フレックスボックス、

分からない単語をまとめたら、次はググりましょう。

最初は用語の意味を理解しましょう。使い方などは後々、自分で書くようになったらでいいと思います。

HTMLとCSSの独学手順②自分のオリジナルサイトを作る

独学で大事なことはアウトプットです。

残念ながら、スクールとは違い独学では自分でアウトプットの場を作る必要があります。

当サイトではアウトプットの場＝自分のオリジナルサイトと位置付けています。

オリジナルサイトの作り方は下記の通りです。

初心者の方にとって、サーバー周りを理解するのは難しいと思います。

ただ、ここを理解できないとHTML&CSSでお金を稼ぐことは不可能に近いです。

難しいと思いますが、ググりながら挑戦してみてください

ヒントを出しておきます。

このサービスを活用して、サイトを構築してみてください

HTMLとCSS独学でサイト構築は難しいという方は下記の記事を参考にしてください

HTMLとCSSの独学手順③レスポンシブデザインを身につける

Progateでも少しだけ触れるのですが、多くの案件ではレスポンシブデザインがマストで要求されます。

当サイトでは下記を活用してレスポンシブデザインを実現しています。

HTML・CSSの独学でここまで来れた方であれば、簡単に習得可能な技術です。

上記のスキルを学んだ方は、ご自身のオリジナルサイトに落とし込んでみてください。

苦戦すると思いますが、これができるとサイトの幅が広がります。

独学で努力してきた向け：今の自分の実力を知るために下記の記事を参考にしながら模写コーディングをしてみてください。

自分がどのくらいの力量なのかが分かるはずです。

悲報：HTMLとCSSの独学では絶対に挫折します

ここまでを躓かないで来れる方は数%です。

私を含めたほとんどの方が挫折しています。

挫折して辛いと感じた時は、言語から離れましょう。

それでやる気が戻らないのであれば、HTMLとCSSが向いていなかっただけです。

大体の方が、挫折→少し期間を空ける→挑戦する→上手くできる

これを繰り返します。

『絶対に挫折する』→この点を理解しておくだけでも、かなり楽になるはずです。

HTMLとCSSの独学におすすめの本一覧

Progateだけを使って独学をしてきた方は『知識に穴がある状態』です。

穴を埋めるのには、本を活用しましょう。

ググるだけだと、断片的な知識しか手に入りません。

この状態を早く脱するために2000円ほど自己投資しましょう

弊サイトおすすめ：スラスラわかるHTML＆CSSのきほん 第2版

HTMLとCSS独学に役立つ有料動画

HTMLとCSS独学に役立つ有料動画をまとめておきました。

HTMLとCSS独学で挫折した方はスクールもあり

HTMLとCSS独学で挫折した方は下記のスクールがおすすめです。

HTMLとCSSを独学を習得する上で参考にしたいサイト

独学で学ぶのであれば、下記の３サイトをおすすめします。

HTMLとCSS独学参考サイト

１つずつ解説していきます。

HTMLとCSS独学参考サイト①侍エンジニア塾

私が1番参考にしているサイトです。

良いライターが多いので、記事がサクサク読める点が非常に良いです。

HTML&CSSを独学で学んでいる方であれば、ほぼ確実に閲覧している記事です。

侍エンジニア塾

HTMLとCSS独学参考サイト②サルワカ

言わずと知れたサルワカさん

このブログは最強ですね。

デザイン面＋内容度を考えると、頭ひとつなけたサイトです。

サルワカ

HTMLとCSS独学参考サイト③当サイト

すいません。弊サイトを紹介させて頂きます。

当サイトではブログ×プログラミング×Webデザインの３つを総合的に学ぶことができます。

当サイトがHTMLとCSSの独学で活用したサイト記事一覧

ググっても詳しい内容が出なかったものに関しては下記に記しておきます。

CSSで中央寄せする9つの方法（縦・横にセンタリング）

【HTML入門】パンくずリストとは？作り方作り方とCSSデザイン例5選

CSSのpositionを総まとめ！absoluteやfixedの使い方は？

【コピペOKのサンプル付き】Flexboxはこの5パターン覚えておけば大丈夫！

HTMLとCSSの独学でよくある質問

HTMLとCSSの独学でよくある質問は下記の通りです。

*随時情報は追加していきます。

どんな方にHTML&CSSの独学がおすすめですか

完全未経験の方です。

最近は、最初からPythonなどを始める方がいますが、よほど優秀な方じゃない限りほぼ100%挫折します。

まずはHTML&CSSを始める

その後、自分が進みたい分野のプログラミング言語を学ぶほうが効率的だと思います。

私はPHP、JavaScriptを学習しています。

JavaScriptの勉強はどうすればいいですか

個人的にはJavaScriptをおすすめしています。

ただ、HTML・CSSをしっかり学習してから始めるべきです。

役割理解

動きのあるサイトのほとんどがJavaScriptを活用しています。

HTML・CSSの独学で辛かったことはありますか

独学で辛いことはありました。

まとめ：HTMLとCSSの独学

本記事では『HTMLとCSSを独学で習得するためのロードマップ【本・サイトも紹介】』について詳しく解説してきました。

独学で躓いた方はTwitterなどのDMで相談して下さい。

本記事は以上です。最後までご覧くださりありがとうございました。

読者におすすめの記事

HTMLとCSS独学の次はWordPressです。

HTMLとCSSの独学をクリアできた方はWordPressの学習を始めましょう。

このレベルまで行くと、月5万円ほどを稼げるレベルになるはずです。

詳しい内容は下記の記事で解説していますので、ぜひ参考にしてみてください。