初心者でもHTML5の基本がわかって書けるようになる、入門サイト5選


Webデザイン入門オンライン講座 Udemy

Webサイトを自分で制作できるようになるために、最初に触れなければならないのが、「HTML」です。

WordPressのような、HTMLがわからない人でもそれなりにサイト構築ができるツールはありますが、やはり自分のオリジナルな感じにサイトを作りたい場合は、「HTML」を書ける(「マークアップ」と言います)ようになったほうが当然良いわけです。

私は3年ほど前までは、HTMLなんて全くわかりませんでした。
でも今では、普通に一からサイト構築ができるくらいまでになってます。

そうなるまでに大変お世話になったサイトを厳選してご紹介します!

そもそもHTML5ってなんだ

まず、「HTML」が何かってことですが、「ハイパーテキスト・マークアップ・ランゲージ」の略称です。
説明すれば長くなりますが、コンピューターに理解させるための文書構造を定義するための言語、って感じで良いと思います。

文書構造ってのがミソで、見た目を装飾するのはHTMLの役割ではないんですね。
書かれている文や文節がどんな役割を持っているのかをコンピュータに理解させる、たとえば、これは「見出し」だよ、とかですね。

で、「HTML5」ですが、これは「HTML」の”バージョン5”ってことです。
文書構造を示す”タグ”や動画編集などに使えるタグが追加されたことがわかりやすい特徴と言えるでしょう。
いまや、ほとんどのブラウザで対応しており、HTML5で書くのが当たり前になってます。

これからWeb制作を学ぶ人は、HTML5を抑えれば良いと考えてください。

ぜったい身につけられる!初心者にオススメのHTML5入門サイト5選

ドットインストール

Screenshot of dotinstall.com

公式サイト

もう、鉄板です。ドットインストール。
多分このサイトでは何度も紹介すると思います。

とにかくここで何度も動画をリピートして、動画の通り記述する。やり続けましょう。絶対身につきます。

HTMLクイックリファレンス

Screenshot of www.htmq.com

公式サイト

ドットインストール一押しですが、動画をいつでも見れる環境って難しかったりします。
そういう時にはやっぱりテキストサイトが必要です。

で、何気に私が初心者の頃から、今でもよく使うのがこのリファレンスサイト。

正直、タグを細かく覚えてないので、都度検索したりするんですが、行き着くのはここが多いです。
HTMLの基本さえ抑えれば、あとはリファレンスをいつでも見れるようにしておけば良いですね。

HTML5入門

Screenshot of html5.imedia-web.net

公式サイト

ざっと基本を知るには分量的にもおすすめなサイト。

見やすくていいっすよ。

HTML5でサイトを作ろう

Screenshot of www.html5-memo.com

公式サイト

少し古いんですけど、これもサッと見れるのがよいです。
上記リンク先がHTML5の基本がまとまった連載記事なので、ご確認ください。

ほんっとにはじめての HTML5 と CSS3

Screenshot of honttoni.blog74.fc2.com

公式サイト

これは結構がっつり、細かく学習できます。ドットインストールのテキスト版みたいなイメージですかね。
Canvasっていう、描画の仕組みまでしっかりと学べるので、このサイトをマスターすれば、もう初心者ではないくらいのスキルが身につきます。

まとめ

なんやかんや紹介しまいしたが、とにかくドットインストールをひたすらやるのが一番だと思います。
その他のWebサイトは、移動中とか電車の中とか、動画みながらコーディングが難しいときに、復習の感覚で反復して読み込むことをお勧めします!

あわせて読みたい