PR

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

2016年9月28日(水)
TechAcademy

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リファレンス

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デザインオンラインブートキャンプを開催しています。


TechAcademyマガジンは、オンラインのプログラミングスクールTechAcademyが運営する教育×ITに関するWebメディアです。トレンドや最新情報など役に立つ記事を発信しています。
https://techacademy.jp/magazine/

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています