カテゴリー

  • Tech
  • 英語学習
  • セブ島・留学準備
  • キャリア
  • Kredo
KredoのIT留学
スタッフ募集中
留学体験談
無料相談はこちら
セブ島IT留学の「Kredo」が運営するメディア「Kredoblog」
  • TECH Tech
    • Web・プログラミング

      Web・プログラミング

    • テクノロジー

      AI・テクノロジー

  • ENGLISH 英語学習
    • 英語学習法

      英語学習法

    • 英語表現・フレーズ

      英語フレーズ

  • STUDYABROAD セブ島・留学準備
    • 語学留学

      語学留学

    • IT留学

      IT留学

    • セブ島情報

      セブ島情報

  • CAREER キャリア
    • ITキャリア

      ITキャリア

    • 転職・海外就職

      転職・海外就職

    • インタビュー

      インタビュー

  • KREDO Kredo
    • ニュース・キャンペーン情報

      ニュース・キャンペーン情報

    • CEO・STAFFブログ

      CEO・STAFFブログ

    • IT×英語留学体験談

      IT×英語留学体験談
      [Kredo公式サイトへ]

5月申し込み限定授業料半額 kredo it留学オンライン
  • TOP
  • Tech
  • Web・プログラミング
  • htmlの独学勉強は難しい?おすすめ勉強方法と使えるサイト・本10選

htmlの独学勉強は難しい?おすすめ勉強方法と使えるサイト・本10選

Kredo編集部
Kredo編集部
公開日:2019.12.10
更新日:2019.12.10
Web・プログラミング |
  • ツイート
  • シェア
  • はてな
  • ポケット

WEBデザインに欠かせない言語の1つといえば、HTMLですよね。

HTMLは構文が理解しやすく、プログラミング初心者さんにとっても比較的勉強しやすい言語の1つです。

そんなHTMLですが、プログラミング初心者さんのなかには

少年

どのように勉強を進めればいいのか分からない…

少女

おすすめの教材が知りたい

という方も、多くいらっしゃるのではないでしょうか。

そこで今回は、HTMLの独学勉強をするときにおすすめの進め方から、具体的なおすすめ教材までたっぷりと紹介していきます。

HTMLの勉強方法に迷っている方、使う教材選びに悩んでいる方はぜひ参考にしてみてください。

記事のもくじ

  • 《全3ステップ》htmlを独学で勉強するときのおすすめ進め方
    • htmlの独学勉強ステップ1:学習サイト・本を利用して基礎を学ぶ
    • htmlの独学勉強ステップ2:サイトを模写して感覚をつかむ
    • htmlの独学勉強ステップ3:自分でサイトを作る
  • htmlの独学勉強におすすめのサイト6選
    • htmlの独学勉強おすすめサイト1:ドットインストール
    • htmlの独学勉強おすすめサイト2:Schoo
    • htmlの独学勉強おすすめサイト3:Progate
    • htmlの独学勉強おすすめサイト4:CODEPREP
    • htmlの独学勉強おすすめサイト5:Udemy
    • htmlの独学勉強おすすめサイト6:CodeAcademy
  • htmlの独学勉強におすすめの本4選
    • htmlの独学勉強おすすめ本1:スラスラわかるHTML&CSSのきほん
    • htmlの独学勉強おすすめ本2:いちばんよくわかるHTML5&CSSデザインきちんと入門
    • htmlの独学勉強おすすめ本3:いちばんやさしいHTML5&CSS3の教本
    • htmlの独学勉強おすすめ本4:HTML5&CSS3デザインブック
  • まとめ:HTMLは独学での勉強も可能。学習サイト・本を利用して計画的に勉強しよう。

《全3ステップ》htmlを独学で勉強するときのおすすめ進め方

英語学習ステップ

HTMLの独学勉強は、下記3つのステップに分けて進めていくのがおすすめです。

【3ステップ】
  1. 学習サイト・本を利用して基礎も学ぶ
  2. サイトを模写して感覚をつかむ
  3. 自分でサイトをつくる

それぞれのステップについて、詳しく紹介していきます。

htmlの独学勉強ステップ1:学習サイト・本を利用して基礎を学ぶ

HTMLを勉強するときにまず実施することは、作法や型を学ぶことです。

学習サイトや本を利用して、基本的な知識を学んでいきましょう。

できるだけお金をかけずに勉強したいのなら、無料で学べる学習サイトを使うのがおすすめです。

のちほどおすすめのサイト・本を全部で10種類紹介するので、ぜひこれからHTMLの独学勉強を始めようと思っている方は、チェックしてください。

htmlの独学勉強におすすめのサイト6選

htmlの独学勉強ステップ2:サイトを模写して感覚をつかむ

学習サイト・本を利用してHTMLの基礎を学んだら、実際のWEBサイトの模写をしてみましょう。

模写を行うことで、学習サイト・本では学びきれないテクニックや技術などを知ることができます。

なお、模写を行うときにはテキストエディタの準備が必要です。

テキストエディタについては下記記事の「テキストエディタを用意しよう」で紹介しています。

【おすすめの関連記事】

HTMLでホームページを作成するには?方法や必要なものをカンタン解説

基礎勉強と比較するとグッと難易度が高くなりますが、ぜひチャレンジしてみてください。

htmlの独学勉強ステップ3:自分でサイトを作る

最後のステップでは、ご自身の力で1からWEBサイトを作ってみましょう。

WEBデザイナーやプログラマーとして仕事をしていくのであれば、自分の力でゼロから作れるようになる必要があります。

ご自身のWEBサイトを作れば、そのままポートフォリオサイトとして活用することもできるのでおすすめです。

模写とは異なり、自由度が非常に高いため悩むことも多いかと思いますが、HTML学習の総括として取り組んでみてください。

htmlの独学勉強におすすめのサイト6選

ここからはさきほどお話した通り、HTMLの独学勉強におすすめのサイトを紹介します。

今回紹介するのは、下記の6つです。

【おすすめのサイト6選】
  1. ドットインストール
  2. Schoo
  3. Progate
  4. CODEPREP
  5. Udemy
  6. CodeAcademy

6つともプログラミングを勉強する上での定番サイトではありますが、無料で受講できたり、英語も一緒に学ぶことができたりと、サイトによって特徴が大きく異なります。

1つ1つ詳しく紹介していくので、ぜひご自身にはどのサイトが合いそうか、どれから始めてみようか考えながら読み進めてみてください。

htmlの独学勉強おすすめサイト1:ドットインストール

ドットインストール

ドットインストールは、動画を見て勉強をすすめていくタイプのサイトです。

1つの動画は3分で構成されているので、忙しい学生・社会人でも通勤・通学時間や休み時間を利用してサクッと勉強できます。

HTMLについては全14回の講座で学ぶことができるようになっており、14回すべてが無料で視聴可能です。

すぐに利用できるサイトなので、気になる方は、まずチェックしてみるとよいでしょう。

htmlの独学勉強おすすめサイト2:Schoo

Schoo

月額980円(税込)で365日配信されている生放送の授業と、4,600以上の動画で、様々な仕事に活きる知識・スキル・考え方を身につけることができるのがSchooです。

動画系のサイトである点ではドットインストールと同様ですが、Schooには、ほかの受講生と交流ができるという特徴があります。

1人では続けにくい勉強も、ほかの学生と交流をすることでモチベーション管理がしやすくなることでしょう。

また、生放送では、本物の授業のようにリアルタイムで質問をすることもできるのも便利です。

HTMLに関する動画だけでも様々な方が授業を行っているので、自分に合う先生を見つけられるのではないでしょうか。

htmlの独学勉強おすすめサイト3:Progate

Progate

Progateは、スライドで概要を学んだのちに、実際にコードを書きながら勉強する、学習と実践を兼ね備えたサイトです。

スライドはイラスト中心に作られているので、難しいプログラミングでも直感的に理解できるようになっています。

なお、コードはブラウザ上で入力できるので、特別なアプリ・ソフトのインストールは必要ありません。

Progateでは、「HTML&CSSコース」でHTMLを学ぶことができます。

初級・中級・上級と3つのコースに分かれているので、自分のレベルにあったところから勉強を進められるのが便利です。

htmlの独学勉強おすすめサイト4:CODEPREP

CODEPREP

実際に自分でコードを書きながらHTMLについて学んでいくのが、CODEPREPです。

1つの講座が1冊の本形式になっており、1冊の学習にかかる時間はわずか10分と、かなりの短時間で完了させることができます。

穴埋め形式でコードを記入していく形なので、まったくの未経験の方でも安心して進められるはずです。

なお、編集したコードはダウンロードもできるので、習ったコードをもとに、オリジナルな編集を加えることもできます。

さらに、CODEPREPには、「ディスカッションボード」という機能があり、ユーザー同士で、質問・教え合いができるので、ともに切磋琢磨しながら学ぶことができます。

ただし、残念ながらスマホには対応していないので、PCを持っていない方は要注意です。

htmlの独学勉強おすすめサイト5:Udemy

Udemy

Udemyは、特にアメリカで人気を集めている、世界中のトップ講師の動画を視聴することができるサイトです。

基本的には動画単位で支払いが必要になってしまうものの、なかには無料で視聴できる講座もあります。

なお、有料講座については、1度購入さえしてしまえば、視聴期限はありません。

ブラックフライデーなど、イベントのタイミングでセールを実施しているときもあるので、習いたい講座がある方は要チェックです。

htmlの独学勉強おすすめサイト6:CodeAcademy

CodeAcademy

CodeAcademyもUmedy同様に、アメリカで人気のあるオンライン教材サイトです。

7年間で4,500万人ものサービス利用者を誇る人気のサイトで、会員登録さえ済ませてしまえば、無料で学習を進めることができます。

実際にコードを書きながら覚えていく形式のCodeAcademyですが、コードはブラウザ上で書くことができるので、アプリ・ソフトのインストールは必要ありません。

基本的には英語のサイトなので、英語に自信のある方、もしくは基礎的な英語力があり、さらに英語力を高めたい方におすすめです。

htmlの独学勉強におすすめの本4選

おすすめのサイトに引き続き、HTMLの勉強に使える本も合わせて紹介していきます。

【おすすめの本4選】
  1. スラスラわかるHTML&CSSのきほん
  2. いちばんよくわかるHTML5&CSSデザインきちんと入門
  3. いちばんやさしいHTML5&CSS3の教本
  4. HTML5&CSS3デザインブック

上記のなかには完全初心者向けのものから、「サイトでの勉強が終わってしまった」「もう少しレベルを上げた教材が欲しい」という方にも使えるものもあります。 HTMLの学び直しをしようと考えている方も、要チェックです。

htmlの独学勉強おすすめ本1:スラスラわかるHTML&CSSのきほん

スラスラわかるHTML&CSSのきほん

「スラスラわかるHTML&CSSのきほん」は、累計4万部を突破している、HTMLおよびCSSのベストセラー本です。

図解が多いだけでなく、難しい用語もしっかりと説明がついているので、初心者さんでも簡単読むことができます。 本としてもそこまで分厚くないので、「勉強するぞ!」と気合をいれなくても読み進められるのが、この本ならではのメリットです。 HTMLの基礎から、Webサイトの完成まで流れで学ぶことができ、初心者がつまずきやすいポイントもしっかりと解説しているので、1冊しっかりと読み切れるはずです。

htmlの独学勉強おすすめ本2:いちばんよくわかるHTML5&CSSデザインきちんと入門

いちばんよくわかるHTML5&CSSデザインきちんと入門

「いちばんよくわかるHTML5&CSSデザインきちんと入門」は、「スラスラわかるHTML&CSSのきほん」と同じ著者が書いている本です。

「スラスラわかるHTML&CSSのきほん」と同様に読みやすさが抜群なだけでなく、スマートフォン向けのHTML&CSSについても詳しく記述されているので、より新しい情報を知りたい方には適した本と言えるでしょう。

たっぷりと説明量があるので、しっかりと頭で理解したい方には特におすすめの1冊です。

htmlの独学勉強おすすめ本3:いちばんやさしいHTML5&CSS3の教本

いちばんやさしいHTML5&CSS3の教本

人気講師たちによる講義と、実習の組み合わせで制作されているのが「いちばんやさしいHTML5&CSSの教本」です。

ソースコードと画像を見ながら、Webサイトを作る流れに沿ってHTMLを学ぶことができます。

初心者向けの本ではありますが、基本的なタグを知っている方がこの本を読んで学習することで、よりHTMLの理解を深められるはずです。

htmlの独学勉強おすすめ本4:HTML5&CSS3デザインブック

HTML5&CSS3デザインブック

「HTML5&CSSデザインブック」は、HTMLの基礎的なことを学んだ上で読むのにおすすめの本です。

具体的なレイアウトなど、デザインに関することを、より掘り下げて学ぶことができます。

ブログの作り方なども掲載されているので、自分のWebサイトを持ちたいと考えている方は、ぜひこの本を読んでみてはいかがでしょうか。

まとめ:HTMLは独学での勉強も可能。学習サイト・本を利用して計画的に勉強しよう。

今回は、HTMLを独学で勉強するにあたってのおすすめの進め方から、具体的に使えるサイト・本を紹介していきました。

HTMLはプログラミング初心者さんでも分かりやすく、独学でも比較的勉強が進めやすい言語の1つです。

ぜひ今回紹介した内容を参考に、ご自身に合いそうなサイト・本を利用しながら勉強を進めてください。

「これからの時代、プログラミングと英語が必要そう…」
それは、間違いではありません。

あと10〜20年の間に、人間が行う仕事の約半分が機械に奪われると言われています。
そのような未来がきたとき、自分自身、そしてあなたの大切な人を守れますか?

セブ島 IT×英語留学の「Kredo」では、
政府公認ITカリキュラム
大学教授レベルのフィリピン人IT教員
スピーキングに特化した英語クラス
日本人スタッフによる学習サポート
などによって、 これからの時代に必要なIT×英語のスキルが
初心者からでも最短で身につきます。

KredoのIT留学で人生を変えてみませんか?

\プログラミングと英語が同時に身につく!/
KredoのIT留学について詳しくみる

  • ツイート
  • シェア
  • はてな
  • ポケット
この記事を書いた人
Kredo編集部
Kredo編集部

Kredo編集部です!Tech、英語学習、キャリア、セブ島留学の情報を発信していきます。

関連記事

  • Web・プログラミング

    初心者必見!Pythonの詳しい導入手順を徹底解説【Windows・Mac別】

    2020.10.19
  • Web・プログラミング

    Rubyで開発?Ruby開発に向いているもの&開発に必要なことまで解説

    2020.09.26
  • 【2020年版】Ruby on Railsの習得度別おすすめ学習本10選!
    Web・プログラミング

    【2020年版】Ruby on Railsの習得度別おすすめ学習本10選!

    2020.09.25
  • 【初心者向け】Ruby on Railsの開発環境の基礎からおすすめ統合開発環境6選!
    Web・プログラミング

    【初心者向け】Ruby on Railsの開発環境の基礎からおすすめ統合開発環境6選!

    2020.09.11
kredo it 英語 留学

よく読まれている記事

  • 2020.12.03

    【1/6&1/7 無料オンラインセミナー】なぜ今、プログラミング × 英語を身につけるべきなのか?

  • Kredo CEO横田猛夫さん
    2019.06.26

    IT×英語を学ばなければ取り残される!Kredo CEOが日本衰退とIT業界の未来を解説

  • バックエンドエンジニアのコーディングのイメージ画像
    2019.06.05

    未経験でも習得できる実務レベルのプログラミングを学ぶコツを紹介!

  • ショッピングを楽しんでいる男女のイメージ画像
    2019.02.12

    海外就職を成功させたい人へ!経験者が教えるメリットとデメリット

  • 熱心にプログラミングを教えるフィリピン人講師と日本人留学生

    【日本語で学んでいる場合じゃない】“英語”でIT・プログラミングを学ぶメリットとは?

IT留学オンライン
kredo 留学

まずはお気軽にカウンセラーへご相談ください!

無料カウンセリングを予約する

IT×英語留学体験談

  • 10代
  • 20代
  • 30代
  • 40代~
  • 1〜4週間の短期留学
  • 5〜23週間の中期留学
  • 24週間以上の長期留学
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース

Kredo Blog

Tech 英語学習 セブ島・留学準備 キャリア Kredo
クレドページ
学校案内
  • Kredoの想い
  • Kredoが選ばれる理由
  • なぜ今、ITと英語なのか
  • 卒業実績
施設案内
  • 校舎・宿泊施設
  • セブ島・生活環境
留学準備
  • お申し込みまでの流れ
  • ご留学までの準備
  • 現地到着後の流れ
  • 留学中の1日のスケジュール
留学コース・料金[コース概要]
  • コース一覧
  • あなたに合ったコース選び
  • ITクラス・カリキュラム・教員
  • 英語クラス・カリキュラム・教員
  • 留学料金一覧
留学コース・料金[各コース一覧]
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース
  • 無料留学プログラム
  • 海外ITインターン留学(LIG)
  • 海外ITインターン留学(Sprobe)
  • 海外ITインターン留学(Alliance)
  • 親子留学 Kredo Kids
その他
  • Kredo Blog
  • Kredoスタッフ
  • 留学体験談
  • よくある質問
  • お問い合わせ
  • 法人のお客様
  • 会社概要
  • KREDO JAPAN株式会社
  • 特定商取引法に基づく表示
  • 採用情報
  • プライバシーポリシー
学校案内
  • Kredoの想い
  • Kredoが選ばれる理由
  • なぜ今、ITと英語なのか
  • 卒業実績
施設案内
  • 校舎・宿泊施設
  • セブ島・生活環境
留学準備
  • お申し込みまでの流れ
  • ご留学までの準備
  • 現地到着後の流れ
  • 留学中の1日のスケジュール
留学コース・料金 [コース概要]
  • コース一覧
  • あなたに合ったコース選び
  • ITクラス・カリキュラム・教員
  • 英語クラス・カリキュラム・教員
  • 留学料金一覧
[各コース一覧]
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース
  • 無料留学プログラム
  • 海外ITインターン留学(LIG)
  • 海外ITインターン留学(Sprobe)
  • 海外ITインターン留学(Alliance)
  • 親子留学 Kredo Kids
その他
  • Kredo Blog
  • Kredoスタッフ
  • 留学体験談
  • よくある質問
  • お問い合わせ
  • 法人のお客様
  • 会社概要
  • KREDO JAPAN株式会社
  • 特定商取引法に基づく表示
  • 採用情報
  • プライバシーポリシー
セブ島IT×英語留学の「Kredo」

14th Floor Central Bloc Corporate
Center Tower 1, Block 10, Geonzon St.,
Cebu IT Park, Apas Cebu City

セブ島医療専門の英語学校・看護留学の「HLCA」(姉妹校)

14th Floor Central Bloc Corporate
Center Tower 1, Block 10, Geonzon St.,
Cebu IT Park, Apas Cebu City

スクールやコースをもっと知りたい人へ 資料請求・お問い合わせ

  • fb
  • tw
  • ig

Copyright© 2019 KREDO IT ABROAD INC. All rights reserved.