【HTML/CSS】はじめてのHTML/CSSの勉強方法

一度もHTML/CSSに触れたことのない人向けに、爆速でHTML/CSSを身につけるための勉強法を紹介します。

まず、事前に伝えたいのは「HTML/CSS」を始めプログラミングの勉強は、取っ掛かりさえあればそんなに難しくないよ。ということです。何やらよくわからない文字や記号の羅列があって難しそう。と思われる方もいるかもしれませんが安心して気楽に勉強していきましょう！

基礎編

ドットインストールで動画を見ながらコードを書く練習

まずは、多くのコーダーがお世話になったであろう、コーディング関連のことを動画で学べる勉強サイトドットインストールを使って勉強しましょう！

ドットインストール

3分動画でマスターする初心者向けプログラミング学習サイトです。HTML, CSS, JavaScript, PHP, Rubyをはじめ、iPhoneやAndroidアプリの作り方も学べます。豊富な無料動画を見ることで、はじめての人でも無理なくスキルを身につけていくことができます

ドットインストールでは、HTML/CSSをはじめとする様々なプログラミング言語を取り扱ってくれています。一つ一つの動画もわかりやすく簡潔に３分程度にまとめられているので、すき間時間でさえ勉強にあてられます。僕は新しい言語を勉強したい場合は、まずドットインストールで探すくらい参考にしています。

管理されているのは、株式会社ドットインストールで代表を務める田口元氏。100SHIKI blogを運営されていることでも有名な方です。

ドットインストールでの課題

ドットインストールのレッスン一覧にはHTML・CSS・JavaScript・PHP・etc…と色々な種類の言語の動画が掲載されています。HTML/CSSでのマークアップができるようになるために勉強してほしいのは、以下の項目です。

• HTML入門 (全24回)
• CSS入門 (全22回)
• CSS3入門 (全19回)
• CSSレイアウト入門 (全15回)
• 実践！ウェブサイトを作ろう (全16回)
• Bootstrap 3.0入門 (全18回)

※bootstrapは、個人制作で他社案件を請けるとかになったときには、覚えておいたほうが能率が上がるかもしれないですが、個人の裁量に任せます。

上記のレッスンを完了すると、HTML/CSSで出来ることのほとんどは網羅できるかと思います。１つの動画につき約３分ですので、全て見ても288分と5時間かかりません。
カメラアイ（一度見たものを忘れない特性持つ人たちの総称）をお持ちでなければ、動画を見ながら実際にコードを書いてみましょう。説明の速度がテキパキしているので、一時停止をはさみながらになると思います。

同時に手を動かすというのはとても重要です。ただ黙って画面に移るムービーを見ていても、絶対に身につきません。サッカーの試合を見ていてもサッカーはうまくならないし、料理番組を見ても包丁の扱いはうまくならないのと一緒です。手を動かして実際に書いてみることを心がけましょう。PCに不慣れな人でも15時間もあれば動画内で説明があったコードを１度は試せます。

初めてコーディングを学ぶ方は、きっとどこかでつまづくため、高確率で「前に勉強した項目がわからない」という状態に陥りますが、そのまま最後まで続けてください。最後までやり切るのが重要です。記憶は覚えて忘れてまた覚えてを繰り返す、反芻によって定着します。一度で完璧に覚えようとしないでください。

何度も忘れて覚えてを繰り返して、反芻させてようやく記憶できるものなので、舌端現象（周辺情報だけ出てきて、肝心の名前が出てこない現象）に陥ったときに、記憶を呼び戻すフックが多いほうが勉強が捗ります。

また、理解が深まった後でよいですが、ドットインストールは万能ではありません。HTMLやCSSの規格などもどんどん変わりますし、一部プロパティの誤用などもあるようです。（気になったら個人的に調べてみてください）カバーしている範囲は広いですが、網羅しているわけではないという事です。

ドットインストールでの修行が終わったら、次に進みます。

Progate(プロゲート)で、もう一度書いて覚えてみる

Progate(プロゲート)

Progate(プロゲート)はオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう

はい、また１から勉強です。「え～」とか言わずやってみましょう。最初はUIにやや戸惑うかもしれませんが、一度目（ドットインストールで勉強した時）よりもかなりスムーズに勉強が進むはずです。精神と時の部屋で修行した時並のスピードで成長しています。

さっさと「HTML & CSS」の「HTML & CSS 基礎編」を爆速で終わらせてください。あられちゃんの「キーン！」並の速度をめざしましょう（速度マッハ1.5 時速換算で1800km）。

HTML & CSS 基礎編

WEBページはHTML、CSSという言語によってその見た目が作られています。 実際にWEBページを作りながら学んでみましょう！

HTML & CSS 基礎編

多分、つまづいたとしても「float」位だと思いますが、基本的に左のナビゲーション通りに記述すればつまづくことも無いかと思います。

ここまでできたら、まあ一旦基礎編は良いでしょう。

応用編

あとは、ひたすら基礎の応用です。
あとはひたすら書いて書いて反芻する。という作業をすると、少しふわっとしている知識が、徐々に定着してきます。なのでココからはハードルを上げて頭を使って書いていきましょう。
ということで、「HTML & CSS 応用編」をやっていきましょう。

Progate(プロゲート)の、応用編をやってみる

HTML & CSS 応用編

応用編ではとてもクールなランディングページ（トップページ）を作っていきます！
HTML & CSS 応用編

とってもクール（自画自賛）なトップページが作れるらしいです。

応用編は、学校の勉強でいうところの「出来たらいいね」ってレベルの応用編ではありません。
むしろ出来ないとダメってレベルであることを把握しておいてください。

HTML/CSSでのコーディングは、デザインの善し悪しにモロに関わってきます。細かい挙動（animationの時間差やシャドウ）やpx単位の修正ができるのとできないのでは、天と地、月とスッポン並のまさしく雲泥の差があります。
『神は細部に宿る』と言われる通り、この細かな差が大きな結果の差を生みます。

codeprepの事例を参考にする

codeprep

CODEPREPは、「プログラミングでなにかつくってみたい」という人たちのために、ゲーム感覚でプログラミングを学ぶことができるプログラミング学習プラットフォームです。プログラミング初心者でも、楽しくプログラミングを学んでいくことができます。

ここの応用編。これが大事です。が、 HTML5/CSS3で「こんな事ができるんだ！」くらいの感覚で見る程度で結構です。理由はUIがイケてなくて勉強にならない（ただの穴埋め）から、勉強にならないんですよね。なので、ここの応用編を見て、それを自分で考えて下記のサービス、またはローカル開発環境を使って作る。これをやっていきましょう。

とりあえず、これはやっておく必要があるな。と思うものだけ抜き出しました。
下記の項目ができれば、CSSで出来ることが格段に増えると思います。

• HTML&CSSでつくるブログ記事一覧レイアウト
• HTML&CSSでつくるドロップダウンメニュー
• HTML&CSS3でつくる張り紙風デザイン
• HTML&CSS3でつくる付箋風デザイン
• HTML&CSSでつくる斜め型ボックスレイアウト
• HTML&CSS3でつくる 重ね写真レイアウト
• HTML&CSSでつくるモーダルウィンドウ
• HTML&CSS3でつくる飛び出るボタン

テストコードを試すサービス

codepen

judo.itの海外版の様なイメージです。個人的にはUIが素晴らしく記述がしやすくCSSの上位互換SCSSなどの記述もできるので、オススメです。

ぜひ、検索窓で「Pure css」と調べて見てください。「なにこれ？本当にCSSだけで出来てるの？何なの？死ぬの？」ってくらいの猛者共がおります。まさに上手すぎて参考にならないってレベルが見れます。ちょっと創作意欲も掻き立てられるかもしれません。

一応、CSSの可能性を感じてもらうために、いくつか紹介しておきます。
※特殊な訓練を受けています。真似しないでください。

CSSだけで描かれたモナリザ

See the Pen Mona Lisa with pure CSS by Jay Salvat (@jaysalvat) on CodePen.

CSSだけで描かれたミニオンズ

See the Pen Minion in Pure CSS by Rachel Bull (@rachel_web) on CodePen.

CSSだけで描かれたMac Book

See the Pen Single Element Pure CSS MacBook Pro by Joshua Hibbert (@joshnh) on CodePen.

国内で有名なサービスといえばjsdo.it

jsdo.it

jsdo.it – share JavaScript, HTML5 and CSS – jsdo.itはブラウザでJavaScript,HTML5,CSSを書いて共有するサイト。他のコードをコピーして編集できます。JavaScript,HTML5,CSSに関する質問&回答もありますよ

国内の有名なサービスだから、人によっては使いやすいのはこっちかも。でもここはカヤックが運営しているけど、手放そうとしているサービス（3,000万で売りに出されている）ので、今後どうなることやら。。

困ったらググる調べる癖を作る

まずは、躓いたら調べる。何においても先人の知恵。

HTMLクイックリファレンス

HTMLタグ・スタイルシート・特殊文字等の早見表
目的別やアルファベット順で検索する事ができます。

困ったらココで聞いてみたりする

teratail（テラテイル）
teratail（テラテイル）は、WEBエンジニア専用のQ&Aサイトです。作業中発生したバグを投稿すると、すばやく回答を得られます。エンジニア同士で技術問題を解決できる、新しいプラットフォームです。

一応、人が応対してくれるから、困ったけどググり方がわからない。って場合（どこで間違っているのかがわからないエラーなど）は、ソースコードをそのままコピペして質問すると、結構答えが返ってきます。