おにちゃん塾の商品一覧

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

HTMLとCSSを独学で習得するためのロードマップ【本・サイトも紹介】
URLをコピーする
URLをコピーしました!
  • 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ヶ月しないくらいで習得できる言語でもあります。

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

  1. 格安or無料教材が充実している
  2. そんなに難しくない
  3. シンプルに楽しいから


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

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

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

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

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

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

  • 僕のような大学生:暇なので1日10時間HTML・CSSの独学ができる→2週間
  • 忙しい社会人:帰宅後の1時間だけHTML・CSSの独学を頑張る→3ヶ月
おにちゃん

早く習得できても大したメリットはありませんので、社会人の方はとにかく毎日コードに触れることを意識してみてください。


結論:初心者かつ独学で始めるのであればこの言語が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の独学におすすめの本一覧

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つを総合的に学ぶことができます。

おにちゃん

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


おにちゃん塾がHTMLとCSSの独学で活用したサイト記事一覧

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

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

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

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

CSSのpositionを総まとめ!absoluteやfixedの使い方は?

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


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

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

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

  1. どんな方にHTML&CSSがおすすめですか
  2. JavaScriptの勉強はどうすればいいですか
  3. HTML・CSSの独学で辛かったところ

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


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

完全未経験の方です

おにちゃん

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

まずはHTML&CSSを始める

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

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


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

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

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

役割理解

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

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

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


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

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

  • HTML・CSSができる人が周りにいなかった
  • CSSの細かい所が分からない
おにちゃん

僕はスクールには通わず、独学で習得したので上記の点で苦戦しました。力


まとめ:HTMLとCSSの独学

HTMLとCSSの独学まとめ
HTMLとCSSの独学まとめ

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

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

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

おにちゃん

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

読者におすすめの記事

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる