どれで入門する?HTML5入門チュートリアルサイトまとめ&比較

入門

今回は、「HTML5」を入門するためのチュートリアルサイト7つご紹介していきます。「レベル感」「学習時間」「何が学べるか」に着目して比較しているので、自分に合ったチュートリアルでHTML5入門をしましょう!

更新日時:

HTML5入門チュートリアルサイト

HTMLを習得する近道は、自分のレベルや実力に合った教材を選ぶことです。今回は、自分に合ったチュートリアルが見つけやすいように、各サイトのレベルに応じて、「対象者」を表記しています。初めて挑戦するレベルの「HTML初心者」、既に他のHTMLは分かるというレベルの「HTML習得者」、HTML5の基本知識や技術を習得しているレベルの「HTML5習得者」の3段階に分類しています。ぜひ、入門サイト選びの参考にしてみてくださいね。

【初心者向け】HTML5,きちんと。

・対象者:HTML習得者 ・時間:1日 ・スタート:HTML5とは? ・ゴール:マークアップやセクションの理解 スライド形式の入門チュートリアルです。HTML5がどのようなものか、基本的な知識と技術を学べます。重要なことだけをまとめた、とても濃い内容になっているので、じっくりと基本を学びたい方におすすめです。

【初心者向け】ほんっとにはじめてのHTML5とCSS3

・対象者:HTML習得者 ・時間:1カ月 ・スタート:テキストエディタで書いてみよう ・ゴール:HTML5を使った編集の習得 タイトル通り、本当に初めてHTML5を学ぶ人向けの入門チュートリアルです。いきなり、テキストエディタに入力するところからスタートしますが、臆することはありません。初めてでも、手で動かしながらHTMLを体験し、HTML5とはどのようなものか、覚えることができる内容となっています。HTMLやHTML5の初心者は、目を通しておいて損はないでしょう。

【初心者向け】HTML5入門

・対象者:HTML習得者 ・時間:1カ月 ・スタート:HTML5の基本コード ・ゴール:埋め込みコンテンツやスクリプト記述の習得 HTML5入門で覚えておきたい、基本コードがまとめられたチュートリアルサイトです。HTML5の概念や仕組みに関する説明はほとんどない為、プログミング初心者にとっては、やや取っ付きにくい内容となっているかもしれません。しかし、目的や種類別に細かく分類されていて、コードのサンプル画像とわかりやすい説明が掲載されているので、実際に手を動かしてHTML5がどんなものか感じることができる構成です。その為、HTMLを習得している方にとっては、取り組みやすい内容だと思います。「コード集」として、辞書のような使い方をするのも良さそうですね。

【No.4】HTML5でサイトをつくろう はじめてのHTML5

・対象者:HTML習得者 ・時間:4日間 ・スタート:HTML5の基本の書き方 ・ゴール:HTML5の新要素 HTML5の基本文法の書き方が学べる入門チュートリアルです。HTML5の概念や基本知識に関する説明はあまりない為、HTML初心者には、少々難しい内容かもしれません。HTML5でwebサイトやアプリケーションを作成するにあたって、必要なコードの例が簡潔にまとめられています。その為、HTMLを習得している方や、HTML5の基礎を理解している方が、入門からステップアップしたい時におすすめです。

【No.5】Qiita HTML5でリーンキャンバスを作ってみる

・対象者:HTML5習得者 ・時間:1日 ・スタート:HTML5のサンプルコード ・ゴール:リーンキャンバスの作成 ビジネスモデルの企画に役立つツールとして注目を浴びている「リーンキャンバス」。それをHTML5で開発することを目的とした、実践系のチュートリアルサイトです。開発現場で使えるレベルのHTML5を習得したいと考えている方や、腕試しをしたいという人におすすめの入門サイトです。

【No.6】ドットインストール HTML5で作るシンプルメモ帳

・対象者:HTML5習得者 ・時間:1時間 ・スタート:メモ帳画面の作成 ・ゴール:HTML5を使ったメモ帳の開発 HTML5を使ってメモ帳を作成することを目的とした、動画タイプの入門チュートリアルです。各項目が3分以内の動画でまとめられているので、スピーディー且つ効率的にHTML5を学ぶことができます。実践的な内容が中心なので、HTML5をある程度理解している方でないと、難易度が高いかもしれません。HTML5入門のまとめとして、これまで学んできた知識や技術がどこまで通用するのか、腕試しに活用してみることをおすすめします。

【No.7】HTML5実力テスト

・対象者:HTML5習得者 ・時間:1日 ・スタート:HTML/CSSコース ・ゴール:HTML/CSS応用編 HTML5について学んだことを、クイズ形式で復習できるサイトです。入門チュートリアルというよりは、教材に近いかもしれません。HTML5の基本知識から応用まで幅広くカバーした内容なので、HTML5入門の卒業試験として挑戦してみると良さそうです。回答などをベースに分析した、自分だけの成績票が表示されるので、自分が苦手な分野を知ることができます。このテストで間違えたり分からなかったりした部分を、他のチュートリアルサイトで復習することで、苦手を確実になくしていくことができますよ。

繰り返し学んで定着させよう

HTML5の学び方には、「こうしなければいけない」というルールはありません。型にとらわれずに、自分の実力に合ったチュートリアルを使い、自分なりの方法で学ぶことが大切です。 しかし、それでもどうしてもわからないことや苦手な部分が出てくるかもしれません。そんな時は、1つのチュートリアルサイトにこだわらず、他の入門サイトなどを見て、繰り返し学んだり、併用して使ったりしてみましょう。すんなりと理解できるかもしれませんよ。 また、入門チュートリアルサイトでHTML5の基本を習得したら、参考書をつかって勉強することをオススメします。 オススメは、ソシムから出版されている「HTML5&CSS3デザインブック」です。 HTML5はもちろんのことwebサイトを作るために必要なCSSもおさえており、実践的かつ人気の参考書です。 この参考書を片手に、自分の思い通りのwebサイトやアプリケーションを開発できるレベルを目指しましょう。

未経験から学ぶなら通信講座も

トピック1152/要素182869

全くの初心者で、HTMLを1から学びたいという場合は、通信講座がおすすめです。 ヒューマンアカデミーなら、受講実績も多く丁寧な指導が受けられます。未経験でも安心してスキルアップしていけます。

転職なら「レバテックキャリア」!

IT・Webエンジニアの転職で迷っているあなた。転職をする際に、「どこで」「何を」「どのように」転職していけばいいかわからない方も多いでしょう。そんな時は「レバテックキャリア」を活用しましょう。

「レバテックキャリア」では独自の豊富な求人をもち、あなたにあった企業が必ず見つかります。またエンジニア・クリエイターに特化しているため、充実したフォローアップ体制であなたに必要なスキルや、転職をする際のポイントをしっかりと知ることができます。

転職で迷う必要はもうありません!「レバテックキャリア」を活用してスムーズに転職を進めましょう!

関連タグ

アクセスランキング

《最大6つの質問で診断完了!》
Facebook Messenger
経由で
あなたにマッチした転職を診断します。

今スグ診断(無料)

《最大6つの質問で診断完了!》
Facebook Messenger
経由で
あなたにマッチした転職を診断します。

今スグ診断(無料)