【お金をかけない】html/css初心者から模写コーディングまでの全学習工程

こんにちは、ガタガタです。

html/cssコーディングを勉強中の方から、たびたび質問をいただきます。学習につまづいている方が多く、みなさん苦しんでいる印象です。

私はhtml/css学習を始めて4ヶ月で、未経験ながらwebデザイナー＆コーダーとしてweb制作会社に就職しました。学習は比較的短期間でしたが、自分なりに情報を集め、お金をかけず効率的に勉強したおかげです。

この記事では、私が初心者から4ヶ月でコーダーとして採用されるまでに行った学習方法を紹介します。実録ですので、ぜひ真似してみてください。

html/cssの基礎を学ぶ

ドットインストールの動画を見ながら手を動かす

ドットインストールは、プログラミングの動画教材を無料で見ることのできる学習サービスです。動画一本が2〜3分の短いものなので、サクサク学習を進めることができます。html/cssの他にJavasript、phpやRuby、各種テキストエディタの使い方なども学ぶことができます。

一部、月額料金を払わなければ見ることのできないコンテンツもありますが、html/cssの基礎なら無料のコンテンツだけでも十分学べます。

肝心なのは、ただ流し見するのではなく、動画を一時停止しながら、コードを真似して自分で書くことです。たぶんどこかで、同じように書いたはずなのに上手く動かなくて苦しむ場面が出てきます。そういう経験がなければ、プログラミング言語を操ることはできません。ぜひテキストエディタを開いて、手を動かしてみてください。

はじめてのWeb制作（全11回）

また、別の無料プログラミング学習サービスでProgateもオススメです。こちらは動画ではなく、学習サービスサイト上のテキストエディタに直接自分でコードを書いて学習する感じです。

どちらも無料ですので、とりあえず登録して触ってみて、自分に合ったサービスを利用すると良いでしょう。（ちなみに私はドットインストール派です）

実際にサイトを作る手順を知る

さて、上記学習サイトで一通り基礎を学び終わったら、いよいよ実際にサイトを作る手順を学びます。

この本は、Web制作界隈で長らく人気を誇っているhtml/cssの教本が、2019年3月にweb制作の最先端にあわせて刷新されたものです。分かりやすく、かつ最新のhtml/cssの技法に対応しているため、大変オススメ。

html/cssの基礎を知っていても、それだけではサイトを1から構築するのは困難です。それは、サイトを効率よく組み立てるための手順をまだ知らないからです。

この本では、実際にサイトを組み立てるための手順を学ぶことができます。学習サイトを使ったのと同じように、この本に書いてあるコードをまずはそのまま、解説を読みながら写経してみれば、サイト構築の手順や考え方が理解できるようになります。

Bootstrapのグリッドシステムの使い方を理解する

BootstrapとはTwitter社が作ったシステムで、divに指定のclassを与えるだけで、簡単にレスポンシブ対応ページを作ることができるという非常に優れたフレームワークです。

今やこのBootstrapは個人・企業を問わず、さまざまなサイトで使われています。当ブログでも、Bootstrapによるレスポンシブ化を採用しています。

Bootstrap公式サイト
Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする（webさえ）
Bootstrap以外にもCSSフレームワークは数ありますが、とりあえずこれだけ押さえておけば困ることはありません。Bootstrapは利用者もかなり多いため、困ったときも少しぐぐれば大量の情報が手に入ります。

今はレスポンシブ対応サイトが標準なので、Bootstrapを使いこなせるようになっておきましょう。

既存サイトを模写してみる

さて、ここまで来ればいよいよ模写に入れます。これまでで学んだことを総動員して、自分の力を試してみましょう！

模写コーディングのルール

また、模写の際に以下のツールを使うと便利です。さすがに余白が何pxかとか、カラーコードやフォントが何か……までは自力ではわかりませんからね。

カラーピッカー：サイト上の色のコードが一瞬でわかる！
定規：高さ、幅が何pxか一瞬でわかる！
フォント解析：文章のフォント、色、太さ、行間が一瞬でわかる！
画像一括ダウンローダー：使用画像が一瞬で手に入る！
※background-imageで設定されているものはDLできないので、デベロッパーツールから画像URLを取得して適宜DLしましょう。

模写するサイトですが、初心者にオススメなのは以下のようなサイトです。

• カラムが単純で、大まかなパーツごとに分けやすい
• 動き（アニメーション）が少ない
• レスポンシブ対応である（ウインドウを小さくするとデザインが変わる）
• パッと見て「だいたいできるかも……」と思える

ちなみに、私が実際に模写したサイトは以下のとおり。とりあえず3サイトくらい模写すればコツをなんとなく掴めるし、標準的なサイトデザインも理解することができます。

株式会社松風屋
Airbnb – 出張 背景に動画を使っているところがありますが、適当な写真やキャプチャで代用してもOKです。
ライターステーション　このサイトはちょっと大きいし、動きが多め。でも調べればなんとかなります。私はなりました。

また、私の自作したイラストお仕事募集サイトは、模写OKとします。模写コーディング成果物としてポートフォリオに使用するのも可とします。下記条件を厳守の上、ご活用ください。

オリジナルのサイトを作ってみよう！

3サイトほど模写を行えるようになれば、もはや自分でサイトを組み立てることなんて造作もありません。自分のお仕事募集サイトを作ってみましょう。

コーダーとして自立したい方も、どこかの会社に就職する方も、これは一度やっておくと良いでしょう。以下のようなメリットがあるからです。

WordPressのサイトを運営してみるのもオススメ

WordPressは個人ブログにとどまらず、企業や行政など、大きな組織のサイトでも広く使われているCMSです。Web制作を仕事にしたいなら、WordPressはまず避けては通れません。なので、自分で自由にいじくりまわせるWordPressサイトを持っておくと非常に助けになります。

WordPressの良いところ、悪いところを自分の肌をもって知っておけば、必ずプラスになるはずです。

Javascriptやphp学習はどうすればいい？

多くの方が悩むのは「html/cssを勉強する過程で、Javascript（jQuery）やPHPを触る必要も出てきたけど、これらの言語も扱えるようにならなきゃいけないのか？」というところだと思います。

必ずしも時間をかけて勉強する必要はない。ただし……

結論から言いますと、例えば自分でイチからコードを書けたりする必要はありません。もちろん書けたほうが良いのは間違いありませんが、時間をかけて習得するほど必要があるかは、それぞれの目指すゴールによります。

ただ、Web制作をする上でJavascriptやPHPは必ずどこかで触ることになりますので、必要なときくらいはググりながら使えるようにしておきましょう。

今はJavascriptの代わりに、jQueryを使うコーダーさんも多いので、基礎的なところは理解しておきましょう。下記の本が役に立ちます。

Web制作においてコーダーがPHPを触る場面というと、WordPressサイトの案件が多いかと思いますが、以下の本はWordPressのテーマのしくみなどがわかりやすくオススメです。

まとめ

html/cssコーディングは、「初心者」を脱して模写ができるようになるまでがとてもキツイです。ここで脱落する人もたくさんいます。

ですが裏を返せば、ここを切り抜けることができればあなたは「コーディングのできる一握りの人間」になるのです。

web制作はできるようになればとても楽しく、仕事にすれば在宅ワーカーにもなれるチャンスがあり、しかも今後もしばらく需要の落ちない分野です。

学び始めるのは今からでも遅くありません。ぜひ頑張って習得してください。

合わせてどうぞ

【web制作を】模写コーディングができるようになったら、次にすべきこと【仕事にする】

html/css勉強の仕上げとして模写コーディングを行う人は多いですが、その次に何をするか考えていますか？この記事では、模写コーディングができるようになったらやっておくといいことを挙げます。この中から2つくらいは実践しておくと、各段に実力がアップするはずです。興味のあることを選んで、やってみてください。