Photo by Christian Heilmann
こんにちは、谷口です。
最近、エンジニアやデザイナー以外の方からも「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
スライドによるレッスンで基礎を学び、オンラインエディタでコーディングをして実行結果を見ることができます。コーディングの際は、エディタやプレビュー画面と一緒にお手本となる見本画面や解説もあります。
◆ドットインストール
動画でプログラミングの書き方、環境構築方法などが学べます。
■リファレンスサイト
HTML/CSSを学ぶには、実際にコードを書いて、どんな画面ができるのか試してみることが重要です。
自分でいろいろ作っていると「こんなデザインを作りたいときはどう書けばいいんだっけ？」「こういうことってできるのかな？」と思うことが多々あるかと思います。そんなときはリファレンスサイトを参照すると、知りたい情報をすぐに探せます。
◆HTMLクイックリファレンス
HTML系のリファレンスはいくつかありますが、こちらではアルファベット順と目的別で、プロパティが実例とともに掲載されています。サンプルソースの直後に実例が表示されているので分かりやすいリファレンスになっており、実務でHTML/CSSを使うことになった際もお世話になることの多いサイトだと思います。
■ブログサイト
◆ほんっとにはじめてのHTML5
初めての人にも分かりやすくHTMLの組み方が書かれているブログで、CSS3にも触れられています。基礎から結構マニアックなところまでが記事になっていますので、初心者から実務でお使いの方まで広く参考になると思います。
■たのしいカルタサイト
■書籍
◆スラスラわかるHTML&CSSのきほん
- メディア:
- この商品を含むブログを見る
PCさえあれば、演習の通りに進めていけばWebページを作成できます。HTMLやCSSは改定のスピードが早いですが、初心者の方がまず覚えておきたい基礎的な部分はこの本で十分学べると思います。
◆HTML5&CSS3ポケットリファレンス
- 作者: 森史憲,藤本壱
- 出版社/メーカー: 技術評論社
- 発売日: 2014/05/21
- メディア: 単行本（ソフトカバー）
- この商品を含むブログを見る
※Bootstrapなどのフレームワークについて
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入門編2 | 8/8（火）～8/14（月）まで無料 |
| HTML/CSS入門編3 | 8/15（火）～8/21（月）まで無料 |
■プログラミングが動画で学べるレッスン「paizaラーニング」
「paizaラーニング」は、プログラミング未経験者・初心者向け学習サービスです。
↓詳しくはこちら
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
