ホームページを構築するなら、HTMLの基本知識は確実に知っておいたほうがいいでしょう。
HTMLは変化が早く、言語の仕様が変更されることが多いためなるべく最新の情報に触れることが重要となります。

今回は、HTMLを中心に、オンラインでコーディング技術を学習できるサービスをご紹介します。
オンラインならではの情報の速さと好きな時に学習できるという特徴を最大限に活かして、自分のペースで学習を進めていきましょう。

このニュースを読んだあなたにオススメ

HTMLの基本構造を学ぼう
意外とわからない？読みづらいHTMLタグ・属性20個の読み方まとめ
ホームページ制作初心者のためのHTMLタグの基礎知識・書き方がわかる記事5選

HTMLをオンラインで学習できるWebサイト10選

1.schoo

schoo.png
https://schoo.jp/

開発言語：HTML/CSS/JavaScript/jQuery/PHP/MySQLなど
料金プラン：3プラン

・オープン
料金：無料
できること：生放送の受講、録画授業の受講(チケット1枚につき1授業)、録画授業の倍速再生

・プレミアムプラン
料金：980円/月
できること：すべての授業が受講可能、プレミアム限定生放送、ターミナルへの参加

・プレミアムプラスプラン
料金：1,980円/月
できること：プレミアムプランの全機能、スライド資料のダウンロード、動画授業と連動したノート機能、続きから再生可能機能

IT系を中心とした、すぐに使えるスキルが身につく学習動画が提供されているサービスです。
「プログラミング学部」や「Webデザイナー学部」で、ゼロから独学でWebサービスやアプリ等の開発ができるようになる動画が公開されています。
他のサービスとは異なり、生放送を受講すればわからないときにその場で講師に質問し解決することができますので、つまずきが少なく効率よく学ぶことができます。

2.ShareWis

ShareWis.png
https://share-wis.com/
App store
開発言語：HTML/CSS/PHP/JavaScript
料金プラン：無料

IT系を中心に、さまざまなビジネススキルを学ぶことができる学習サービスです。
アプリもリリースされていますので、隙間時間にサクッと学ぶことができます。
ゲーム感覚で学習することができるので飽きてしまいがちな難しい学習でも楽しみながら進められることが、このサービスの一番の魅力です。
隙間時間を有効活用して楽しみながら学習するなら、一押しのサービスです。

3.ドットインストール

ドットインストール.png
http://dotinstall.com/
開発言語：HTML/CSS/JavaScript/jQuery/MySQL/PHP/WordPress/Ruby/Python/Java/Perl/objective-cなど
料金プラン：2プラン

・一般
料金：無料
できること：無料レッスンの視聴、学習履歴の管理

・プレミアム
料金：880円/月
できること：プレミアムレッスンの視聴、動画文字起こしの閲覧、ソースコードの閲覧、ソースコードからの検索などすべての機能が利用可能

「３分動画でマスターするプログラミング学習サイト(初心者向け)」というコンセプトの学習サイトです。
レベルに応じたレッスンがあるので、初心者〜実践的な内容を学習したい方まで利用可能です。
1動画の再生時間は3分程度ですので、隙間時間を活用して学習することができます。

アプリ開発なども動画でまとめられていますので、プログラミングを学習するなら1度は見ておくことをオススメします。

4.Progate

Progate.png
http://prog-8.com/
開発言語：HTML/CSS/PHP/jQuery/Ruby on Rails
料金プラン：2プラン

・ベーシックプラン
料金：無料
できること：基礎レベル5レッスン

・プラス会員
料金： 980円/月
できること：基礎レベル5レッスン＋応用・実践レベル13レッスン

基礎から丁寧に解説してくれる学習サービスです。
前半でスライド式の講義を受講し、後半では実際にHTMLを書く演習を行うという2部構成になっています。

スライドは内容を詰め込み過ぎていないため、初心者の方でもサクサク読み進められます。
演習ではプレビューで確認しながらコーディングしていくので、間違いにすぐ気がつくことができます。
さらにHTMLとCSSがセットになっていますので、効率良く両方を学習することができます。

5.Codecademy

Codecademy.png
https://www.codecademy.com/learn
開発言語：HTML/CSS/Ruby/Python/PHP/JavaScript/jQuery
料金プラン：無料

英語表記のサービスですが、多くの開発言語に対応している学習サービスです。
Webサイトを作るという実践に近いコーディングを学習することができます。
ある程度英語力があるなら、オススメです。

6.Skill hub

Skill_hub.png
http://skillhub.jp/
開発言語：HTML/CSS,/WordPress,/Illustrator
料金プラン：4プラン

・無料プラン
料金：無料
できること：7つの講座(HTML、CSS、イラストレーターなど)の受講

・フリーランス・就職支援プラン
料金：135,800円/サポート期間90日
できること：最短3ヶ月でフリーランスデビューできるように実際に稼働するサイトを2つリリースする(マネタイズまでカバー)

・【早朝】Webプログラミング・ブートキャンプ
料金：159,800円/サポート期間60日
できること：平日の朝2時間(早朝6時から)を使用したブートキャンプ、マンツーマンの担当制で最初から最後まで学習をサポートしてくれる

・Web起業サポート・プラン
料金：199,800円/サポート期間180日
できること：最短1が月でWebサービスを作成するスキルを身につける(マネタイズまでカバー)

Webサイト構築はもちろん、Webデザインまで実践的に学習することができるサービスです。
初心者の方でも、オシャレなWebサイトを完成させることができるレベルまで解説されています。
ただ動画をみて学習するだけではなく、課題の提出もある参加型の講座が開設されていますので、短期間で効率よく学習することができます。

7.LiveGap Editor

LiveGap_Editor.png
http://editor.livegap.com/index.php?lan=ja#fid=3d96nm5fzn514&pid=h9lmkko0qp514
開発言語：HTML/CSS/JavaScript
料金プラン：無料

実践的なコーディングができるサービスです。
特に、基本をある程度押さえた方にオススメです。
一から実践をするにはwebサーバをインストールしたりエディタを準備したりなど意外と手間がかかります。
このサービスでは開発環境がすべてととのっていますので、HTMLを書いてすぐにプレビューで確認することができます。
英語表記ですが、直感的に使用できますので英語が得意でなくても心配ありません。

8.シラバス

シラバス.png
開発言語：HTML/CSS/Bootstrap / C言語 / Illustrator / jQuery / Photoshop / Unity / WordPress
料金プラン：無料

「マネして学べる」をコンセプトにしたプログラミング学習サービスです。
GitHubからキュレーションしてきたプログラムを利用していて、真似をして手を動かしながら学習することができます。
実際の開発現場環境に即した形で学べるため、トレーニングを積みたい方にはオススメです。

言語ごとにストーリー形式で構成されているため、初心者の方でも始めやすく楽しみながらプログラミングスキルを身につけることができますので、これから学習するなら一度を目を通しておくとよいでしょう。

9.CodeCamp

CodeCamp.png
https://codecamp.jp/
開発言語：HTML/CSS3/Javascript/jQuery/PHP/MySQL/Wordpress/Bootstrap
料金プラン：3プラン

・マスターコース
料金：298,000円
できること：1からWebエンジニアになるためのスキルを学ぶことができる、主な開発言語を網羅的に学習できる

・スタンダードコース
料金：128,000円
できること：非エンジニアでもエンジニアとのコミュニケーションがスムーズに行うことができるようになる

・単価コース
料金：各コースにより異なりますので、ホームページで確認してください
できること：PHP/MySQLコース、JavaScriptコース、HTML5/CSS3コースなど1つずつ学習することができる

現役エンジニアがマンツーマンでレッスンしてくれるサービスです。
大手IT企業で、実際にエンジニア育成研修で利用されていたカリキュラムをベースとして作成されていますので、初心者の方からエンジニアとして転職したい方まで、幅広くレベルに応じたコースが用意されています。
プログラミングコースはもちろん、アプリ開発やWebデザインのコースも開設されていますので、網羅的に学習することができます。
豊富なコースの中でも、HTMLをゼロから学ぶなら「HTML5/CSS3コース」がオススメです。

入会すると体験レッスンを1回受講することができるので、まずはトライアルから始めてみるとよいでしょう。

10.CODEPREP

CODEPREP.png
http://codeprep.jp/
開発言語：C言語 / CSS / HTML / Javascript / jQuery / PHP / Ruby / Unity / WordPress
料金プラン：無料

初心者の方でもじっくり学習することができるよう、スモールステップでの学習を重視したサービスです。
HTML講座の場合は90以上のステップに分けて解説されていて、基本事項からひとつひとつ着実に身につけていくことができます。
ディスカッションの項目も設けられているので、学習していく中でわからない点があれば他のユーザーに質問することができます。

Facebookアカウントで簡単登録できるので、始めるまでの手間がかからない点もオススメポイントです。

まとめ

HTMLはWebでのコーディングやプログラミングの基本を形成するものです。
Webサービスを作る際に必ずと言っていいほど役に立ちますので、学んでおいて損はありません。

今回ご紹介したサービスは、どれも比較的低価格で基礎から実践までを学ぶことができるものばかりです。
まずは一度使ってみて、自分の学習スタイルに最適なものを選択してみてはいかがでしょうか。

このニュースを読んだあなたにオススメ

HTMLの基本構造を学ぼう
意外とわからない？読みづらいHTMLタグ・属性20個の読み方まとめ
ホームページ制作初心者のためのHTMLタグの基礎知識・書き方がわかる記事5選

このニュースに関連するカリキュラム

HTMLの基本構造を学ぼう

HTMLの基本構造を学ぼう

HTMLは「Hypertext Markup Language」の略語で、ウェブページを記述する際に用いられる言語です。「Markup」とはテキストを「構造化」することを意味します。「構造化」とは、テキスト等を単にベタ書きするのではなく、この部分は見出し、強調、リンク、リスト……などと意味付けをすることです。今回は、ほぼすべてのHTMLドキュメントで記述するHTMLの基本構造を説明します。