【ゼロからでOK】HTML&CSSが自信をもって書けるようになる勉強法を解説します

 

こんにちは。カトヒサ（@hisayosky）です。

 

 

HTML＆CSSの習得において手を動かすことは重要ですが、がむしゃらに書くだけでは実用レベルに至らないかもしれません。

じつはぼく自身、書いても書いても「コードが書ける気がしない・・・」という時期が長くありました。

 

ぼくは

 

という手順でHTML＆CSSを学んできました。

１ヶ月でコードは一応書けるようになりましたが、「サイト制作できるぞ！」という自信はまったくありませんでした。

というのも、

 

という状態だったからです。

 

この解決策はズバリ「サイト制作の「型」を身につけておくこと」です。

 

「ググる力」や「自己解決力」は確かに必要ですが、わからないことをすべて自分で調べて解決していたら身がもちません。

制作が嫌になったり苦手意識がついてしまうおそれもあります（ぼくはなりかけました）。

 

今回はゼロからでも「自信をもって」HTML＆CSSが書けるようになる勉強法を解説します。

ではいってみましょう。

 

HTML＆CSS勉強法のロードマップ

はじめに勉強法のロードマップを示しておきます。

 

サイト模写をやる前に「本で型を身につける」が入っています。

型を身につけた上でサイト模写に入ったほうが、自信をもってスムーズに制作に取り組めます。

では段階ごとに解説していきます。

 

ステップ１「Progate」

 

プロゲートは「ひたすら書く」でOKです。ゴリゴリ課題をクリアしていくだけの学習です。

 

ここで悲報ですが、これ全部やってもおそらく「これでサイト作れるぞ！」とはなりません。

 

というのがなんとなくわかればOKです。とにかくコードに慣れる段階ですね。

 

ステップ２「ローカル環境構築」

 

「ローカル環境構築」というのは、ネットにつながっていない状態でサイト制作ができるようにすることです。

 

そのためにはテキストエディタ、つまりコードを書くソフトが必要です。

今後サイトを作ったりサイト制作の勉強をするために避けて通れない過程ですので、サクッと済ませてしまいましょう。

 

テキストエディタをインストール＆カスタマイズする

ぼくは「Sublime Text」というエディタを使っていますので、そちらのインストールおよびカスタマイズの参考サイトを紹介します。

 

インストールするだけでも使えるのですが、カスタマイズすると作業効率が格段に上がるのでぜひやっておくことをお勧めします。

 

ファイルの作成・格納方法を知る

サイト制作に使うファイルは

 

という前提があります。図にするとこんな感じです。

＊「img」はサイトで使う画像が入っているフォルダ

こんなフォルダとファイルのセットができればサイトを作り始めることができます。

 

「index.html」「style.css」といった各種ファイルの作り方は以下のリンクから動画をご覧ください。どちらも2分くらいです。

 

ステップ３「本で型を身につける」

 

Progateが終わってすぐにサイト模写をしてもいいんですが、

 

となりがちです。

こういったことを防ぐために、本を使ってサイト構築の「型」を手に入れます。

 

サイト制作における「３つの型」

型には３種類あります。

 

①サイト構築の手順

レスポンシブ対応までするなら一定の手順に従って進めたほうが効率的です。

手順が定まれば行き当たりばったりを卒業できます。

 

②箱の動かし方

サイトは入れ子になった複数の「見えない箱」によってできています。

箱が自由に動かせるようになればサイト制作はできたも同然です。

初心者にとってはむずかしいので、型として覚えてしまうのが手っ取り早いです。

 

③コーディング用のテンプレート・メモ

本を使った学習では、本のとおりに自分でコードを書いていきます。

そこから自分がサイトを作るときに使えそうなコードを抜粋し、テンプレートとしてコレクションしていきます。

 

例えば「小見出し」の装飾なら、

<article class="kiji">
	<h2>新鮮なトマトの見分け方</h2>
</article>

.kiji h2 {
	margin-top: 40px;
	padding-left: 10px;
	border-left: 10px solid #7cbac1;
	font-weight: normal;
}

こんな感じでHTMLもCSSも抜き出しておきます。

似たような小見出しを作るときには、このコードをそのまま貼り付けて値を少し変えるだけ。コーディングにかかる時間をだいぶ節約できます。

 

テンプレートにするほどではないけれど覚えておいたら便利なこともメモにしていきます。

例えば、

🔸背景画像を画面の高さいっぱいに表示するなら？

「vh」を使う。

「画面の高さ」＝「100vh」となっているので「100vh」でOK。

こんな感じで自分だけの教科書を作っていきます。

 

できるだけ「調べない」「書かない」ようにすることでコーディング速度は上がっていきます。

既存のサイトからコードをとってきてもいいですが、自分で書いたコードならきちんと理解した上で使えるので使いやすいはずです。

 

型を身につけるためのオススメ本

本は自分に合うものを使えばいいですが、参考までに紹介しておきます。

ぼくが実際使ってみてよかった本です。

 

☑️HTML5&CSS3デザインブック

箱は「float」を使って動かします。

「float」不安定で使いにくいイメージですが、ちゃんと使えば安定した振る舞いをしてくれることがわかります。

 

☑️６ステップでマスターするHTML＋CSSデザイン

現場では「float」より「flexbox」のほうが実用的です。

flexboxの機能はググれば出てきますが、サイト制作における使い方は自己流になりがちです。

最初は本で使い方の型を学んでおいたほうがよいかと。

 

はじめから「６ステップでマスターするHTML＋CSSデザイン」を使ってもいいんですが、「制作手順」と「箱の動かし方」の解説は「HTML5&CSS3デザインブック」が優れています。

それに内容がやや初心者向きではありません。

「６ステップでマスターするHTML＋CSSデザイン」は２冊目にもってきたほうが遠回りに見えて意外と近道です。

 

本の使い方

ご紹介した本はいずれも大まかに３種類のページが作れるようになっています。

 

勉強の進め方は

 

これを繰り返します。

 

中でも②の模写コーディングがとても重要です。

一度自分で書いたコードなので簡単に模写できそうですが、思っているほどうまくいきません。

本のとおりにコードを書くだけでは理解できていないことがあるんですよね。

 

自分で作ったコーディングテンプレートやメモは積極的に使っていきましょう。テンプレが実用に耐えうるのか試せるのもこの段階です。

使いにくいようならテンプレやメモの作り方がまずいかもしれません。

 

いきなり既存のサイトを模写するよりハードルは低いですし、型の定着も図れるので面倒ですがやってみることをお勧めします。

 

ステップ４「サイト模写」

ここまでやればだいぶ「コーディングできるぞ！」という気持ちになれるはずです。

あとは身につけた型をどんどん使っていきましょう。

既存のサイトを模写するもよし、できそうなら自分でサイトを作るでもよしです。

 

模写コーディングについては@haniwa008 さんのサイトが参考になるのでご紹介しておきます。

「模写コーディング、どうやってやるの？」という人は一度読んでみるといいですよ。

 

まとめ：HTML＆CSSの勉強はまず型を覚えましょう。余計なことをググらずに済みます

HTML&CSSをマスターするなら

• まずProgateでコーディングに慣れる
• ローカル環境を作る
• 本で「型」を学ぶ
• サイト模写で型を使いまくる

 

▼最後まで読んでくれたあなたにおすすめの記事
「コーディングがなぜかうまくいかない…」という人へ。「必勝パターン」がわかる本を紹介します