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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,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] Webデザインで副業する学習方法を動画で公開中

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タグボード

 

コラム

実は私も!?独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料相談 に参加してみませんか?

現役エンジニア・デザイナーに何でも気軽に相談できる30分すべて無料で できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き! 無料相談はこちら

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

 

1時間でできる無料体験!

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では初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料相談を予約する