Photo by slavik_V
こんにちは。谷口がお送りします。
Webの仕事を目指している人やプログラミング初心者、さらにはブログをやっている人など、HTMLとCSSを習得したい人は多いと思います。特に最初は「Webサイトを作ってみたいけどどうしたらいいんだろう……」「自分のブログを豪華にしてみたいんだけど、HTMLっていまいちよく分からない……」など、さまざまな悩みがあるのではないでしょうか。
HTMLとは、Webページを作成する時に使用されるマークアップ言語の一つです。
マークアップ言語とは、プログラミング言語と違い「タグ」を使って、「ここからここまでが見出しです」「ここからここまでが一つの段落です」等といった印をつける言語です。基本的にプログラミング言語のような「入力値を取得し計算処理をする」「条件を満たすまで処理を繰り返す」といった処理や計算はできません。
CSSは、Webページのスタイルシートの規格の一種で、主にHTMLで記述されたページのスタイルを記述するために使われています。
HTMLが前述のようにWebページ内の文章構造を定義しているのに対し、CSSではそれらをどのように装飾するかを指定するもので、 文字の色やサイズ、レイアウト等の見た目などを決めることができます。
HTML5、CSS3は、それぞれの改訂版となっています。
HTML5/CSS3を使いこなせるようになれば、さまざまなWebページを自分で作ることが可能になります。また、ブラウザとエディタさえあれば覚えたコードを書いて、表示して……といった実践もすぐにできます。プログラミング言語に必要な基礎的な処理の概念を覚えなくとも使える言語ですので、「未経験からプログラミング言語を覚えるのはちょっとハードルが高いな……」という方にもとっつきやすいのではないかと思います。
そこで今回は、なるべくコストをかけずに未経験でもHTML5/CSS3の学習に役立てられるコンテンツを9件ご紹介していきます。
また、paizaラーニングでもHTML/CSSの講座を公開しております。
https://paiza.jp/works/html/primer
1本あたり約3分のレッスン動画と練習問題で、Webページ作成の基礎となるHTMLとCSSの初歩を学べます。ブラウザさえあればすぐに学習を始められますので、ぜひご利用ください。
■プログラミング経験ゼロからHTML5/CSS3を覚えたい人
◆1.ほんっとにはじめての HTML5 と CSS3
料金：無料
http://honttoni.blog74.fc2.com/
初めての人にも分かりやすくHTMLの組み方が書かれているブログで、CSS3にも触れられています。基礎から結構マニアックなところまでが記事になっていますので、初心者から実務でお使いの方まで広く参考になると思います。
◆2.ドットインストール
料金：無料（プレミアム会員は月額1,080円）
http://dotinstall.com/
ドットインストールでは動画を通してHTMLの基礎的な書き方から学べます。「実際のコードの書き方から学びたい！」という方や、「本当はスクールに通いたいけど費用が……」という方は、一度ドットインストールの動画を見てみてはいかがでしょうか。
◆3.今さら聞けない！HTMLとは【初心者向け】
料金：無料
http://techacademy.jp/magazine/4843
TechAcademyの記事になりますが、『今さら聞けない！HTMLとは【初心者向け】 | TechAcademyマガジン』から読み始めて、『まずはここから！HTMLの書き方【初心者向け】 | TechAcademyマガジン』でコードの書き方に触れ、次に『スタイルシート（CSS）の基本的な書き方【初心者向け】 | TechAcademyマガジン』などへ読み進んでいくとよいかと思います。
TechAcademyにはHTML5/CSS3に関する初心者向けの記事がたくさんありますので自分のレベルや用途に合わせて記事を探してみるとよいかと思います。
◆この段階で書籍を購入するなら……
◇4.スラスラわかるHTML&CSSのきほん
定価：￥2,052
- 作者: 狩野祐東
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2013/05/25
- メディア: 単行本
- この商品を含むブログ (3件) を見る
HTMLとCSS入門の最初の1冊として、多くの人が勧める評価の高い1冊です。
インターネットができるPCさえあれば、演習の通りに進めていけばWebページが作成できます。HTMLやCSSは改定のスピードが速いですが、初心者の方がまず覚えておきたい基礎的な部分はこの本で充分学べると思います。「既に実務でWebページを作ってます！」というような人には物足りない内容かと思いますが、未経験の人が「何か最初の1冊を購入したい」という場合にはよい1冊だと思います。
■実際にHTML5/CSS3を使ってみたい人
◆5.HTMLクイックリファレンス
料金：無料
http://www.htmq.com/index.htm
HTML系のリファレンスはいくつかありますが、こちらではアルファベット順と目的別で、プロパティが実例とともに掲載されています。サンプルソースの直後に実例が表示されているので分かりやすいリファレンスになっており、実務でHTML/CSSを使うことになった際もお世話になることの多いサイトだと思います。
◆6.CSS3プロパティジェネレーター
料金：無料
http://css-eblog.com/eblog_sample/0912/css3-generator/
HTML/CSSには、ソースを生成してくれるジェネレーターが多数存在します。今回は数少ない日本語表示サイトであるCSS3プロパティジェネレーターをご紹介しておきます。
■さらに学習を深めたい人
◆7.HTML5カルタ
料金：PDF版は無料（初級セット、中級セット、上級セットは各\1,980）
http://roadstohtml5.com/html5karuta/
カルタ形式で遊びながらHTML5を学べるHTML5カルタです。
初級、中級、上級セットは有料ですが、一般的なタグだけを選んだ36枚のPDF版は無料でダウンロードできます！
■自分の実力を確かめたい人
◆8.第二回全国統一HTML5実力テスト
料金：無料
http://jsdo.it/event/html5cat/2012/autumn/
jsdo.itが主催している第二回全国統一HTML5実力テストでは、15分程度で四択問題による実力テストを受験できますので、「ある程度学習はできたと思う」「実務でHTML5を使っているので自分の実力を試したい」という方は受験してみるとよいと思います。復習して何度でも受験することができます。
◆この段階で書籍を購入するなら……
◇9.これからの「標準」を身につける HTML+CSSデザインレシピ
定価：￥3,110
これからの「標準」を身につける HTML+CSSデザインレシピ (Web Designing Books)
- 作者: エ・ビスコム・テック・ラボ
- 出版社/メーカー: マイナビ
- 発売日: 2014/03/20
- メディア: 単行本（ソフトカバー）
- この商品を含むブログ (9件) を見る
スマホにも対応したレスポンシブWebデザインについてやCSSフレームワークを利用したページレイアウトの方法等も掲載されています。前半はパーツ別のレシピ集のような形にもなっているので、一通り実践学習をした後にもリファレンス本としても使えます。
解説は基礎があることを前提に進んでいくので、初心者の方が手を出すにはハードルが高めかと思いますが、基礎を一通り習得して中級者を目指す方には最適な1冊だと思います。Kindle版もありますよ！
■まとめ
私たちがブラウザで観ているWebページのほとんどは、HTMLとCSSを使って作られています。ブラウザとエディタさえあればすぐに学習を始められるHTMLとCSSですが、習得できれば、様々なWebサービスを作る際に必ずと言っていいほど役に立ちますので、学んでおいて損はありません。
興味のある方は学習サイトでも、書籍でも、自分が気になるところから挑戦して、ぜひともHTML5/CSS3の楽しさに触れてみてください！
paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。
自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
