paiza開発日誌

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

入門者向け・HTML/CSSの基礎が学べるサイトと本8選

f:id:paiza:20170809122657j:plain
Photo by Christian Heilmann
f:id:paiza:20140916135428p:plainこんにちは、谷口です。

最近、エンジニアやデザイナー以外の方からも「HTML/CSSの勉強がしたい」と言われることが増えてきました。

「仕事で使うことがある…」という方はもちろん「趣味でやっているブログやWebサイトを改造したい」という方も多いかと思います。

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

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

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

HTMLやCSSは、ブラウザとエディタさえあれば覚えたコードを書いて、表示して……といった実践もすぐにできます。基本的にはWebページの見た目を作るためのもので、プログラミング言語のような処理方法を覚えなくても使えますから「プログラミングはハードルが高い…」という方でも挑戦しやすいです。

今回は、未経験者や初心者でもわかりやすくHTML/CSSが勉強できる入門サイトや本を8件ご紹介します。

■学習サイト

動画やスライドを通して、HTML/CSSの使い方が学べるサイトをいくつかご紹介します。

paizaラーニング


paizaラーニングは一回3分程度の動画を見ながらブラウザ上で演習問題を解き、すぐに実行して結果を見ることができます。未経験者でもブラウザさえあれば、環境構築不要で手を動かしながらプログラミングの基礎を習得できます

現在、HTML/CSS入門編」を期間限定で連続無料公開しております!
無料公開される講座と無料期間のスケジュールはこちら

Progate

f:id:paiza:20150204125057p:plain
スライドによるレッスンで基礎を学び、オンラインエディタでコーディングをして実行結果を見ることができます。コーディングの際は、エディタやプレビュー画面と一緒にお手本となる見本画面や解説もあります。

ドットインストール

f:id:paiza:20141014152641p:plain
動画でプログラミングの書き方、環境構築方法などが学べます。

■リファレンスサイト

HTML/CSSを学ぶには、実際にコードを書いて、どんな画面ができるのか試してみることが重要です。

自分でいろいろ作っていると「こんなデザインを作りたいときはどう書けばいいんだっけ?」「こういうことってできるのかな?」と思うことが多々あるかと思います。そんなときはリファレンスサイトを参照すると、知りたい情報をすぐに探せます。

HTMLクイックリファレンス

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

■ブログサイト

ほんっとにはじめてのHTML5

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

■たのしいカルタサイト

HTML5カルタ

f:id:paiza:20150325185227p:plain
カルタ形式で遊びながらHTML5を学べるHTML5カルタです。

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

■書籍

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

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

PCさえあれば、演習の通りに進めていけばWebページを作成できます。HTMLやCSSは改定のスピードが早いですが、初心者の方がまず覚えておきたい基礎的な部分はこの本で十分学べると思います。

HTML5&CSS3ポケットリファレンス

HTML5&CSS3ポケットリファレンス

HTML5&CSS3ポケットリファレンス

「リファレンスは手元に本があった方がいいなー」という人におすすめです。内容は最小限に絞られていますが、かえって初心者には引きやすく、シンプルでわかりやすいかと思います。

Bootstrapなどのフレームワークについて

f:id:paiza:20161013184914p:plain

Bootstrapは、Webページ制作でよく使われるボタンやフォームといった部品がテンプレートとして用意されているため、簡単にデザインすることができるフレームワークです。

Bootstrapは最も有名なWebアプリケーションのフレームワークとも言われますが、最近はFoundationやUIKitなども人気があるようです。「フレームワークを使ってかっこいいサイトを作りたいけど、いっぱいあってどれがいいのかわかんないよー」という人は、↓こちらのサイトで性能を一覧比較することもできます。

CSS Front-end Frameworks with comparison - By usabli.ca


また、フレームワークを使うと簡単にWeb制作をすることはできますが、さすがにHTML/CSSの知識がまったくない状態から使うのは難しいかと思いますので、入門レベルの学習は必要かと思います。

paizaラーニングHTML/CSS入門編では、Bootstrapの使い方についても学ぶこともできます。

■まとめ

HTML/CSSは、Webページを作成・表示をするためには欠かせない言語で、私たちがブラウザで見ているWebページのほとんどは、HTMLとCSSを使って作られています。

ブラウザとエディタさえあればすぐにコーディングと実行できますが、習得できれば様々なWeb制作をする際に必ずと言っていいほど役に立ちますので、学んでおいて損はありません。


なお、上でもお知らせしたように、プログラミングが動画で学べる「paizaラーニング」では、普段有料公開しているHTML/CSS入門編を以下の通り、期間限定で連続無料公開しております!

※スケジュールは変更になる場合もございます。

無料公開期間:HTML/CSS入門編


動画レッスン名無料期間
HTML/CSS入門編1いつでも無料
HTML/CSS入門編28/8(火)~8/14(月)まで無料
HTML/CSS入門編38/15(火)~8/21(月)まで無料


■プログラミングが動画で学べるレッスン「paizaラーニング


paizaラーニング」は、プログラミング未経験者・初心者向け学習サービスです。

↓詳しくはこちら
paiza.jp

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza