HTML５&CSS３が身に付くおすすめサイト

ブログをやり始めて３ヶ月経ちましたが。ブログ関係のブックマークが溜まってきたので整理がてらまとめてみます。今回は『HTML5とCSS3が身に付くおすすめサイト』ということでまとめてみました。

オンライン学習サービス

Progate	ドットインストール
イラスト中心のスライドで学ぶ (紙の本よりも直感的で、動画よりも学びやすく自分のペースで学習でき、復習もしやすいとのこと）プログラムを書いて学ぶ。ブラウザ上で、コードを書いて結果も確認。準備いらずで、すぐにプログラミングが実践できます。全14コース・76レッスン初級編は無料、すべてのコースを受講したい場合は月1078円(税込)のプラス会員にならないといけない。	3分動画でマスターできるプログラミング学習サービス 410レッスンを6,095本の動画で提供中初級編は無料で視聴できるが、すべてのコースを視聴したい場合は月1080円(税込)のプレミアム会員にならないと視聴できない。プレミアム会員にはその他、文字起こしの閲覧やソースコードの閲覧・比較や再生速度の変更や先生への質問機能などの特典が付く。
学習レッスン一覧表	レッスン一覧
	無料会員との比較

HTML&CSSリファレンスサイト比較

		HTML					CSS
		概要	機能	abc	逆引	チュートリ	概要	属性	abc	逆引	チュートリ
とほほのＷＷＷ入門		○	○	○	◎		○	○	○	◎
大阪教育大学リファレンス		○	○	○	○		○	○	○	○
HTMLクイックリファレンス		○	○	○		○	○	○	○
MDN Web Docs		○	○	○		○	○		○		○
W3Schools.com	英語	○	○	○		○			○		○
w3c tutorial				○		○		○			○
CSS辞典サンプルソース										○
Weblancer		○	○	○			○	○	○
俺のリファレンス			○	○				○
HTMLタグボード			○	○			○	○
TAG index		○	○	○			○	○
サルワカWebデザイン入門	Tips
Webクリエイターボックス	Tips
SYNCER	Tips		○					○
Web Design Leaves	要約集
TipsZone	速習

HTMLタグやCSS属性のサイト比較

おすすめサイトの特徴

とほほのＷＷＷ入門

引用：HTML/JavaScript/CSS/CGIなど、 Webサイト作成に関する情報を満載した Web作成関連総合サイトです。

大阪教育大学リファレンス

情報が体系化されていて情報量も豊富。個人的には検索方法が使いづらいと思う。それと、『2017年4月、コースの新設に伴い情報科学専攻は学生募集を停止した為、本ページは過去の記録の一部として表示』とHPに案内がありいつまで公開されるか不安を感じた。

大阪教育大学リファレンス

HTMLクイックリファレンス

引用：HTMLクイックリファレンスは、ホームページ制作について知りたい項目をピンポイントで表示する早見表や辞書のイメージで制作しています。一度の訪問で全ページを見るタイプのサイトではありませんが、一回の滞在時間は短くても何回も訪問していただけたらとても嬉しいです。

MDN Web Docs

情報が体系化されていて情報量も豊富。個人的には文字中心の解説なので長時間みていると退屈になってしまう。

W3Schools.com

引用：世界最大のウェブ開発者サイト圧倒的な情報量、例も豊富で演習も出来るが基本英語(ブラウザが機械翻訳してくれるが)なので、英語が苦手な人には翻訳に時間がかかるかもしれない。

w3c tutorials

W3Schools.comを手本に作られているようだ

CSS辞典サンプルソース

『CSS辞典第5版［CSS2/3/4対応］』のリファレンスで掲載しているサンプルソースです。

CSS辞典サンプルソース

Weblancer

引用：ウェブランサーは、ウェブ制作やインターネットの活用に役立つ情報を提供するウェブサイトです。掲載中のコンテンツは、HTMLやCSSの入門用リファレンス、HTMLタグ、CSSプロパティの一覧、特殊文字、カラーコード、テンプレートのダウンロード、そしてブログになります。

俺のリファレンス

タグリファレンスは、とてもシンプルで見易い。

HTMLタグボード

引用：ホームページを作成する上で必要となる情報を掲載。初心者向けの講座、HTMLタグ一覧など。 HTML4.01のタグリファレンスです。重要度の高いタグを優先的に紹介しています。各ページではHTMLタグを目的別とタグ別に調べることができます。また、より詳細な各タグの紹介ではHTMLタグを簡単にコピーできるよう別窓を用意し、利用者にとって使いやすいタグ辞典となっています

TAG index

引用：TAG index（タグインデックス）は、Web制作に関する情報をジャンル別に掲載しているサイトです。 HTMLとCSSのリファレンスが中心となりますが、他にカラーチャートや各種ツールなど、Web制作にちょっと役立つコンテンツもご用意しています。CSS2のリファレンス

サルワカWebデザイン入門

引用：サルワカのWebデザイン入門では、どの書籍よりも、またどのウェブページよりも分かりやすくオシャレなWebサイトを作るための知識を解説していきます。わかりやすい図や表が中心の説明で、内容も気を引くものが多く長くみていても飽きない。その反面、細かいことは書かれていない。疑問に思うことや便利な使い方などポイントを絞りわかりやすく説明されている。

Webクリエイターボックス

今、アマゾンのホームページ入門書部門で一番売れている『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』の著者であるManaさんが運営しているサイト。Web関連の情報やデザイン、サイト制作などを記事にしている。個人的には興味を引く題名の記事が多いと思うのだが、記事を大きく一覧する画面がなく、興味のある記事に辿り着くまでに時間が掛かってしまうのは惜しいと思う。

SYNCER

HTML5、CSS3、API、JavaScript、 PHPなどのTips集

Web Design Leaves

引用：Web 制作に関する参考資料です。どなたかのご参考になれば何よりです。見出しの使い方が上手く、適度に図や例文がありわかりやすい。反面、網羅的な説明でどこにポイントがあるのか分かりにくいかもしれない。

TipsZone

引用：このページは、約2時間で HTML と CSS の基本を理解し、それらをすぐ使えるようになってもらえることを目標に書かれています。