Programming

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

HTMLとCSSを独学で習得するためのロードマップ【本・サイトも紹介】
  • HTML/CSSとは
  • 独学で習得する方法を知りたい
  • 独学で学ぶ上で経験者の話を聞きたい

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

 

本記事の内容

  1. HTMLとCSSとは
  2. 独学で習得する方法
  3. 独学におすすめの本
  4. HTMLとCSSを学べる参考サイト

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

結論から言うと、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に関しては独学でも習得可能です。

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

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

おにちゃん
おにちゃん

早い人だと1ヶ月しないくらいで習得できる言語でもあります。

 

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

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

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

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

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

 

結論:初心者はこの言語が1番おすすめ

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

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

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

  1. サイトの細かい修正
  2. LP制作
  3. ホームページ制作

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

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

おにちゃん
おにちゃん

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

 

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

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

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

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

  1. Progateを一周する
  2. 自分のオリジナルサイトを作る
  3. レスポンシブデザインを身につける

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

 

大前提:独学ではググる力が重要です

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

独学で勉強するのであれば、ググる力が必要です

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

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

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

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

おにちゃん
おにちゃん

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

 

Progateを一周する

手順1はProgateのHTMLとCSS講座を一周しましょう。

  • 分からない単語をまとめておく
  • 完全に理解しようとしない
  • コピペせずに自分で書く

Progateで現れる分からない単語はまとめまておきましょう

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

分からない単語をまとめたら、次はググりましょう。この時の検索は『〇〇とは』と検索しましょう。

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

 

自分のオリジナルサイトを作る

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

おにちゃん
おにちゃん

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

おにちゃん塾ではアウトプットの場=自分のオリジナルサイトと位置付けています。

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

  1. レンタルサーバーを借りる
  2. レンタルドメインを借りる
  3. FTPソフトを使ってファイル転送

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

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

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

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

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

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

【プログラミング初心者】おしゃれなポートフォリオの作り方【大公開】
【プログラミング初心者】おしゃれなポートフォリオの作り方【大公開】プログラミング初心者向けのおしゃれなポートフォリオサイトの作り方について詳しく解説しています。...

 

レスポンシブデザインを身につける

Progateでも少しだけ触れたはずです。

おにちゃん塾では下記を活用してレスポンシブデザインを実現しています。

  • メディアクエリ
  • フレックスボックス
  • ブートストラップ

独学でここまで来れた方であれば、簡単に習得可能な機能です。

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

おにちゃん
おにちゃん

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

 

悲報:絶対に挫折します

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

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

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

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

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

これを繰り返します。

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

 

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

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

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

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

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

ググるだけだと、断片的な知識しかない状態です。

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

おにちゃん
おにちゃん

僕は『スラスラ分かるHTML&CSSの基本』の一冊だけで点と点が繋がりました。

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

 

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

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

HTMLとCSSでの参考サイト

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

  1. 侍エンジニア塾
  2. サルワカ
  3. おにちゃん塾

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

 

侍エンジニア塾

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

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

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

侍エンジニア塾

 

サルワカ

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

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

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

サルワカ

 

おにちゃん塾

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

おにちゃん塾ではブログ×プログラミング×Webデザインの3つを総合的に学ぶことができます。

おにちゃん
おにちゃん

暇な時に、サーフィンしてみて下さい。

 

おにちゃん塾が活用したサイト記事一覧

おすすめの格安サービス

  • プロゲート
  • ドットインストール
  • Udemy

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

 

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

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

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

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

  • どんな方にHTML&CSSがおすすめですか
  • JavaScriptの勉強はどうすればいいですか

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

 

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

完全未経験の方です

おにちゃん
おにちゃん

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

まずはHTML&CSSを始める

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

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

 

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

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

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

役割理解

  • HTML:マークアップ
  • CSS:スタイルを整える
  • JavaScip:動きをつける

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

おにちゃん
おにちゃん

遅かれ早かれWeb制作で使う場面があるので、その時に学べば良いと思います。

 

HTMLとCSSの独学まとめ

HTMLとCSSの独学まとめ

HTMLとCSSの独学まとめ

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

HTML&CSSの独学ロードマップ
  • Progateを一周する
  • 自分のオリジナルサイトを作る
  • レスポンシブデザインを身につける

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

おにちゃん
おにちゃん

本記事は以上です。

 

ABOUT ME
アバター
鬼澤龍平(20)
Twitterにて役立つ情報を掲載しております。
関連記事