HTML5&CSS3が身に付くおすすめサイト

アイキャッチ画像

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

オンライン学習サービス

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

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

  HTML CSS
    概要 機能   abc 逆引 チュートリ 概要 属性 abc 逆引 チュートリ
とほほのWWW入門        
大阪教育大学リファレンス        
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属性のサイト比較

アイキャッチ画像 アイキャッチ画像 アイキャッチ画像 アイキャッチ画像

おすすめサイトの特徴

とほほのWWW入門

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

とほほのWWW入門の画面 とほほのバナー

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

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

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

HTMLクイックリファレンス

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

HTMLクイックリファレンス画面 クイックリファレンスバナー

MDN Web Docs

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

MDN-Web-Docsの画面 MDN web docsバナー

W3Schools.com

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

W3Schools画面 w3shoolsバナー

w3c tutorials

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

w3c tutorial画面 バナー

CSS辞典サンプルソース

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

CSS辞典サンプルソース

Weblancer

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

Weblancerの画面 バナー

俺のリファレンス

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

俺のリファレンス画面 俺のリファレンスバナー

HTMLタグボード

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

HTMLタグボード画面

TAG index

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

TAGindex画面 TAGindexバナー

サルワカWebデザイン入門

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

サルワカのWebデザイン入門画面0サルワカのWebデザイン入門画面1サルワカバナー

Webクリエイターボックス

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

メニュー画面クリエイターボックス画面1クリエーターボックスバナー

SYNCER

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

syncerメニュー画面と見出し記事Syncerバナー

Web Design Leaves

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

Web-Design-Leaves画面Web-Design-Leavesバナー

TipsZone

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

Tipszone画面特徴Tipszoneバナー

コメント

タイトルとURLをコピーしました