入門から応用まで!HTMLの学習に役立つリファレンスサイト10選

初心者向けにHTMLの学習に役立つおすすめのリファレンスサイトを紹介しています。初心者向けの内容から上級者向けの情報など目的に応じて探すことができるので、お気に入りのリファレンスサイトをブックマークしておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

HTMLで作りたい機能があるのに方法がわからない時、大きな味方になってくれるのが、リファレンスサイトです。

今回はそんなHTMLのリファレンスサイトを10サイト紹介していきたいと思います。HTMLでの作業に確実に役立つサイトばかりなので、ぜひ参考にしてみてください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

HTMLクイックリファレンス

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-28-18-16-42

HTMLを書いていて何度もお世話になるサイトです。

HTMLのリファレンスの他にも、CSSやJavaScriptなどの、Webデザインで使用される言語のリファレンスも載っています。サイト作成における全般で役立つので、困ったらこのサイトを見に来ると良いでしょう。

HTMLクイックリファレンス

 

逆引きHTMLリファレンス

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-28-18-17-19

Webデザイン初心者向けのリファレンスサイトです。

リファレンスサイトと聞くと、言葉が難しく中級者向けのイメージがありますが、このサイトはそうではなく、初心者向けに分かりやすく書いてあります。
他のリファレンスサイトがとっつきにくいと感じた方にオススメです。

逆引きHTMLリファレンス

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

TAGindex

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-28-18-17-47

基本的なリファレンスの他にカラーチャートなど、色に関わるリファレンスも多いのが特徴です。

さらには、色の組み合わせチェックも行うことができるので、デザインに困ったときにも使用したいリファレンスサイトです。図やソースコードと共に実際の表示を確認しながら学習できるので、知らないタグが出てきてもイメージしやすいでしょう。

TAGindex

 

HTMLタグボード

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-28-18-18-15

初級者から中級者まで広く使えるリファレンスサイトです。

初心者向けのホームページ作成講座や、Webデザインの基礎、さらには収益化の方法など、HTMLを学ぶ上で知っておいた方が良い情報が詰まっています。

自分でオリジナルサイトを作ってみたいという人は参考になるはずです。

HTMLタグボード

 

MDN HTMLリファレンス

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-28-18-18-37

HTMLの隅から隅まで情報が載っているリファレンスサイトです。見やすいデザインもオススメです。

各タグごとに仕様やブラウザでの実装状況を確認できるので、IEなど様々なブラウザを相手にする作業を行う場合に役立つでしょう。

MDN HTMLリファレンス

 

HTML5.jp

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-28-18-18-55

W3CのHTML仕様を日本語訳したのがこちらのサイトです。

リファレンスの他に具体例がたくさん載っているので、イメージが湧きやすいのが特徴です。

HTML5.jp

 

HTMLリファレンス

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-28-18-19-23

mainなどの要素の他に属性情報も多く載っています。

また、階層毎に分かれた見やすいページデザインになっているのも特徴です。

HTMLリファレンス

 

HTMLリファレンス

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-28-18-19-47

階層毎に分かりやすくまとめられたリファレンスです。

HTML5で追加された要素の一覧があるので、HTMLとHTML5の違いが知りたい方などにおすすめのリファレンスです。

HTMLリファレンス

 

しらぎぐのウェブサイト作成入門

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-28-18-20-37

独特のキャラクターが迎えてくれるリファレンスサイトです。

そのキャラクターとは裏腹に見やすいサイトになっています。アルファベット順に各タグが並べられており、用語辞典のようになっています。何の要素を表しているのか分からないタグがあれば、すぐに解決できるでしょう。

しらぎぐのウェブサイト作成入門

 

HTMLリファレンス

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-28-18-20-58

すべてのリファレンスは載っていませんが、よく使用されるタグが載っているリファレンスサイトです。

リファレンスにありがちな情報が多すぎて見つけにくいということがないので、あまり混乱したくない初心者の方におすすめのリファレンスサイトです。単純に知識をつけるという意味でも役立てられるはずです。

HTMLリファレンス

 

以上、HTMLでの作業に役立つリファレンスサイトをまとめました。

HTMLで使えるタグを網羅しているサイトから目的に応じて検索できるリファレンスサイトまで、利用シーンが変わってくるので自分の目的に合わせてぜひ利用してみてください。

基礎からHTMLを学習できるサイトもまとめているので、こちらも合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。