読者です 読者をやめる 読者になる 読者になる

paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

初心者でもほぼ無料でHTML5/CSS3を勉強できるコンテンツ9選

f:id:paiza:20161207182631j:plain
Photo by slavik_V
f:id:paiza:20140916135428p:plainこんにちは。谷口がお送りします。

HTML、CSSを習得して「Webサイトを作ってみたいけどどうしたらいいんだろう……」「自分のブログを豪華にしてみたいんだけど、HTMLっていまいちよく分からない……」等と思っている方は多いのではないかと思います。

HTMLとは、Webページを作成する時に使用されるマークアップ言語の一つです。

マークアップ言語とは、プログラミング言語とは違い、「タグ」を使って、「ここからここまでが見出しです」「ここからここまでが一つの段落です」等といった印をつける言語です。基本的にプログラミング言語のような「入力値を取得し計算処理をする」「条件を満たすまで処理を繰り返す」等といった処理や計算等はできません。

CSSは、Webページのスタイルシートの規格の一種で、主にHTMLで記述されたページのスタイルを記述するために使われています。

HTMLが前述のようにWebページ内の文章構造を定義しているのに対し、CSSではそれらをどのように装飾するかを指定するもので、 例えば文字の色やサイズ、レイアウト等の見た目についてを指定することができます。

HTML5、CSS3は、それぞれの改訂版となっています。

HTML5/CSS3を使いこなせるようになれば、様々なWebページを自分で作ることが可能になります。また、ブラウザとエディタさえあれば覚えたコードを書いて、表示して……といった実践もすぐにできますプログラミング言語に必要な基礎的な処理の概念を覚えなくとも使える言語ですので、「未経験からプログラミング言語を覚えるのはちょっとハードルが高いな……」という方にもとっつきやすいのではないかと思います。

そこで今回は、なるべくコストをかけずに未経験でもHTML5/CSS3の学習に役立てられるコンテンツを9件ご紹介していきます。

■プログラミング経験ゼロからHTML5/CSS3を覚えたい人

◆1.ほんっとにはじめてのHTML5

料金:無料
http://honttoni.blog74.fc2.com/
f:id:paiza:20150325183902p:plain
初めての人にも分かりやすくHTMLの組み方が書かれているブログで、CSS3にも触れられています。基礎から結構マニアックなところまでが記事になっていますので、初心者から実務でお使いの方まで広く参考になると思います。

◆2.ドットインストール

料金:無料(プレミアム会員は月額¥880)
http://dotinstall.com/
f:id:paiza:20150204142015p:plain

ドットインストールでは動画を通してHTMLの基礎的な書き方から学べます。「実際のコードの書き方から学びたい!」という方や、「本当はスクールに通いたいけど費用が……」という方は、一度ドットインストールの動画を見てみてはいかがでしょうか。

◆3.今さら聞けない!HTMLとは【初心者向け】

料金:無料
http://techacademy.jp/magazine/4843
f:id:paiza:20150325184039p:plain
TechAcademyの記事になりますが、『今さら聞けない!HTMLとは【初心者向け】 | TechAcademyマガジン』から読み始めて、『まずはここから!HTMLの書き方【初心者向け】 | TechAcademyマガジン』でコードの書き方に触れ、次に『スタイルシート(CSS)の基本的な書き方【初心者向け】 | TechAcademyマガジン』等に読み進んでいくとよいかと思います。

TechAcademyにはHTML5/CSS3に関する初心者向けの記事がたくさんありますので自分のレベルや用途に合わせて記事を探してみるとよいかと思います。

◆この段階で書籍を購入するなら……

◇4.スラスラわかるHTML&CSSのきほん

定価:¥2,052

スラスラわかるHTML&CSSのきほん

スラスラわかるHTML&CSSのきほん

HTMLとCSS入門の最初の1冊として、多くの人が勧める評価の高い1冊です。

インターネットができるPCさえあれば、演習の通りに進めていけばWebページが作成できます。HTMLやCSSは改定のスピードが早いですが、初心者の方がまず覚えておきたい基礎的な部分はこの本で充分学べると思います。「既に実務でWebページを作ってます!」というような人には物足りない内容かと思いますが、未経験の人が「何か最初の1冊を購入したい」という場合にはよい1冊だと思います。

■実際にHTML5/CSS3を使ってみたい人

◆5.HTMLクイックリファレンス

料金:無料
http://www.htmq.com/index.htm
f:id:paiza:20150325200120p:plain
HTML系のリファレンスはいくつかありますが、こちらではアルファベット順と目的別で、プロパティが実例とともに掲載されています。サンプルソースの直後に実例が表示されているので分かりやすいリファレンスになっており、実務でHTML/CSSを使うことになった際もお世話になることの多いサイトだと思います。

◆6.CSS3プロパティジェネレーター

料金:無料
http://css-eblog.com/eblog_sample/0912/css3-generator/
f:id:paiza:20150325194856p:plain
HTML/CSSには、ソースを生成してくれるジェネレーターが多数存在します。今回は数少ない日本語表示サイトであるCSS3プロパティジェネレーターをご紹介しておきます。

■さらに学習を深めたい人

◆7.HTML5カルタ

料金:PDF版は無料(初級セット、中級セット、上級セットは各\1,980)
http://roadstohtml5.com/html5karuta/
f:id:paiza:20150325185227p:plain
カルタ形式で遊びながらHTML5を学べるHTML5カルタです。

初級、中級、上級セットは有料ですが、一般的なタグだけを選んだ36枚のPDF版は無料でダウンロードできます!

■自分の実力を確かめたい人

◆8.第二回全国統一HTML5実力テスト

料金:無料
http://jsdo.it/event/html5cat/2012/autumn/
f:id:paiza:20150325185540p:plain
jsdo.itが主催している第二回全国統一HTML5実力テストでは、15分程度で四択問題による実力テストを受験できますので、「ある程度学習はできたと思う」「実務でHTML5を使っているので自分の実力を試したい」という方は受験してみるとよいと思います。復習して何度でも受験することができます。

◆この段階で書籍を購入するなら……

◇9.これからの「標準」を身につける HTML+CSSデザインレシピ

定価:¥3,110

これからの「標準」を身につける HTML+CSSデザインレシピ (Web Designing Books)

これからの「標準」を身につける HTML+CSSデザインレシピ (Web Designing Books)

こちらはかなり実践的な内容になっていますので、「そろそろ初心者は抜け出したかな」という方や、「実務で何となくHTML使ってるけどいまいち分からないところも多い」という方にお勧めしたい本です。

スマホにも対応したレスポンシブWebデザインについてやCSSフレームワークを利用したページレイアウトの方法等も掲載されています。前半はパーツ別のレシピ集のような形にもなっているので、一通り実践学習をした後にもリファレンス本としても使えます。

解説は基礎があることを前提に進んでいくので、初心者の方が手を出すにはハードルが高めかと思いますが、基礎を一通り習得して中級者を目指す方には最適な1冊だと思います。Kindleもありますよ!

■まとめ

私たちがブラウザで観ているWebページのほとんどは、HTMLとCSSを使って作られています。ブラウザとエディタさえあればすぐに学習を始められるHTMLとCSSですが、習得できれば、様々なWebサービスを作る際に必ずと言っていいほど役に立ちますので、学んでおいて損はありません。

興味のある方は学習サイトでも、書籍でも、自分が気になるところから挑戦して、ぜひともHTML5/CSS3の楽しさに触れてみてください!

paiza動画ラーニングについて

f:id:paiza:20160307113923p:plain
paizaには、オンラインでプログラミング学習ができるパイザ・ラーニングという無料学習コンテンツがございます!現在、PHPRubyPythonの入門編を学ぶことができますが、対応言語は今後もどんどん追加される予定となっています。

プログラミング未経験の方でも、「やさしく・楽しく・わかりやすい1本約3分のレッスン動画」 や 「ブラウザ上でコードを書いて実行できるオンライン実行環境」「複数の練習問題」で、未経験者でも無理なく学習を続けることができます。




paizaではITエンジニアとしてのスキルレベル測定(9言語に対応)や、プログラミング問題による学習コンテンツ(paiza Learning)を提供(こちらは21言語に対応)しています。テストの結果によりS・A・B・C・D・Eの6段階でランクが分かります。自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください。

また、paizaオンラインでプログラミング学習ができるパイザ・ラーニングに、この度動画で学習できるレッスンが追加されました。動画を見たり補足テキストを読んだりしながら、自由にコーディングをして実行結果まで確認することができます!レッスンは今後どんどん追加されていく予定ですので、ぜひプログラミング学習に、教育に、お気軽にご活用いただければと思います!


http://paiza.jp

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編