【スライドで学ぶHTML5】入門資料まとめ

【スライドで学ぶHTML5】入門資料まとめ

HTMLでより高度な処理を簡単にした「HTML5」。FirefoxやChromeなど各WebブラウザもHTML5に対応してきていて、今後はWebサイト製作でも主流として使われる可能性が高いです。

今回は、そんなHTML5の入門におすすめの資料や教材をご紹介していきます。難易度が優しい順に掲載しているので、自分の実力に合ったものを見つけて、ぜひ挑戦してみて下さい。

HTML5入門資料まとめ

それでは、おすすめのHTML5の資料を入門編からご紹介していきます。

入門編:HTML5って何?から始める

入門編では、「HTML5って何?」ということを、理解する為の資料をご紹介していきます。初めてHTMLに挑戦する方やHTML5初心者は、知識や感覚として、HYML5の特徴を押さえておくと、この後の勉強が進めやすくなりますよ。とはいえ、この段階では完璧に全てを覚える必要はありません。「何となく」で良いのです。肩肘張らずに、気楽にHTML5入門の第一歩を踏み出ししましょう。

こちらのスライドでは、HTML5とは何か?ということが簡潔にまとめられています。また、HTML5でどんなことができるのかも学べるので、これからの学習でHTML5を習得するメリットなども実感できるでしょう。


こちらの資料は、先程のスライドと比較すると、やや発展的な内容となっています。HTML5の文法やコードが掲載されているので、「HTML5のコードを打ち込む」ことがどういうことか、想像しやすいでしょう。

応用編:コードなどの実用的な知識・技術を身につける

HTML5がどのようなものなのか学んだら、次はより専門的な内容に挑戦しましょう。ここでは、HTML5のコードの種類や、コードを打ち込む方法などを学んでいきます。

さまざまなコードと、そのコードを使用しているwebページの画像が中心の入門資料です。どのコードにどんな機能があるのか、視覚的に学べます。また、webページを制作する上でいずれ必要となってくる「SEO」という技術を意識した内容となっているので、開発現場や実践で使えるHTML5を習得できます。

とにかくボリュームがある、HTML5入門資料です。前半は、HTML5についての基礎知識で、復習的な内容です。後半は、webサイトなどで使える、さまざまな機能のコード例が掲載されています。実践編では実際に手を動かしてコードを書く機会が多くなるので、次のステップに進む為に役立つでしょう。

実践編:アプリ開発、webページ制作

HTML5について詳しく分かるようになったところで、いよいよ実践に挑戦してみましょう。今まで培ってきた知識を、技術として実際に使ってみることで、HTML5への理解がより深まります。

HTML5で作るシンプルメモ帳

【HTML5入門資料】ドットインストール

サイトリンク:「HTML5で作るシンプルメモ帳

動画を参考に操作しながら、実践が体験できます。自動保存機能を搭載させるなど、応用的なHTML5の技術を体験しながら、メモ帳を完成させてみましょう。

実用を意識した最小単位の文書構文チュートリアル

【HTML5入門資料まとめ】実用を意識した最小単位からの文書構造チュートリアル

サイトリンク:「実用を意識した最小単位の文書構文チュートリアル

webページの作成を目的とした、HTML5の実践系入門チュートリアルです。サイトの作成に必要なHTML5のコードを紹介し、更にどのような効果や機能があるのか、解説しています。この資料に掲載されているコードが一通り使えるようになれば、HTML5で基本的なwebページを作成できるようになれますよ。

まとめ

いかがでしたか?既に以前のバージョンのHTMLを習得している方にとっては、すぐに理解できる内容でしたね。HTML5は基本とも言える知識なので、初心者の方にとっても、Web製作入門としてまずは抑えておきたいです。

入門資料を使って基本を学んだら、積極的に実践に挑戦してみて下さいね。実践での経験を積んでいくうちに、HTML5を使ってできることの幅が広がっていき、いずれ思い通りのアプリケーションやWebサイト製作に活きてくるでしょう。