IT人材のためのキャリアライフスタイルマガジン

どれで入門する?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サイトやアプリケーションを開発できるレベルを目指しましょう。

未経験からエンジニアに転職したい

未経験かつ独学でのエンジニアへの転職は実際のところ難しい。未経験からの転職では「実務経験」がネックになるからです。 プログラミングスクール「Webスク」のカリキュラムでは、実務が積めます。しかも、スクール卒業後の転職までも保証(転職できなかったら全額返金)。もちろん講師は開発現場で経験を積んだプロであるため、最短でプログラミング技術を身につけられます。 本気で未経験からエンジニアへの転職を考えている方は、Webスクで実務経験を積みながら、エンジニアになることをおすすめします。 まずは「無料カウンセリング」から。

「起業したい!」 「スピード感を持ってエンジニアスキルをつけたい!」 「最新の技術を学びたい!」 という方には、TECH BOOSTがおすすめです。 TECH BOOSTは、「未来のなりたいキャリア」から逆算して、講座内容が組まれている、3ヶ月間のプログラミングスクールです。開催しているBranding Engineerという会社は、エンジニアの転職や独立を支援している人材会社なので、スクール卒業後のキャリアについても力になってくれます。 誰よりも早くエンジニアになり、最新の技術に挑戦していきたい人にオススメです。

関連タグ

アクセスランキング