エンジニア副業で独学Web制作にチャレンジ！ #2 : HTML&CSS基礎を学ぶ

独学でWebサイト制作の副業に挑戦しようという試みの3つ目の記事です。前回は学習計画を立てました。

そして今回は、実際にHTML&CSS学習を進めてみました！時間にしておよそ2ヶ月ほどかけています。

\ この記事はこちらの続きです。まだ読んでいない人はこちらから /

「Web制作初めてみたい！けど何から手をつけよう…」

と思っているそこのあなたにぴったりな学習サービスや書籍を探してきましたよ。

今回の目標

今回の目標はおおまかに以下の3つです。

まず、HTMLとCSSの基本的な書き方や、タグの使い方をしっかり理解したいと思っています。

もちろん、膨大な情報があるので、最初は入門レベルで十分だと考えています。

次に、Webサイトを作る際にどのように進めればよいかを学びたいです。

表示の仕組みやファイルの構造、サーバーとの連携など、Web制作に必要な基礎知識をしっかり押さえることが目標です。

ただ、ある程度学習を進めないと、自分が「何ができて、何ができていないのか」がわかりにくいと思うので、その点も意識しながら取り組んでいきます。

「この表現は〇〇でできそう」「次は〇〇を勉強しないといけない」

というのが判断できるようになりたいと思います。

ProgateでHTML&CSSの基礎を学ぶ

最初のステップとして、Progate という学習サービスを使って学習を進めていきます。

このサービスを選んだ理由は

いくつかのレッスンは無料で始めることができ、継続して学習したいと思っても月額990円で全てのレッスンを受けることが出来ます。

応用編などは有料レッスンになっている場合が多いです。

また、全てブラウザ上で完結することも魅力的です。

取り組んだレッスンの内容

今回取り組んだレッスンは以下の4つです。

※上記のレッスン以外にも「道場レッスン」というチャレンジレッスンにも取り組みました

初級編では、基本的なHTMLタグやCSS、そして簡単なサイトのレイアウトを学びました。

中級編では、LP（ランディングページ）と呼ばれる、1ページで完結するサイトの作成に取り組みました。

さらに上級編では、中級編で作成したサイトをレスポンシブ対応させました。

そして、Flexbox編では、CSSのレイアウト手法のひとつである「Flexbox」について学びました。

Progateの実際の使い心地は？

最初の感想は「楽しい！」というものでした。

スライドにはイラストが多く使われており、視覚的にとても見やすかったです。

また、各所にヒントが散りばめられていて、一人でもつまずかないように工夫されています。

初めての人でも安心して進められる内容だと思います。

コーディング問題は少しずつ区切りがあり、着実に進んでいる実感が出来て良かったです。

学習を終えて感じたこと：少し物足りない？

学習を終えて、これだけじゃ少し物足りないかも？というのが正直な気持ちです。

使用頻度の高い基本的なタグやレイアウトは知ることができました。

ですが、よく見ているWebサイトを再現できるのか？というとまだ難しそうです。

とはいえ、これだけで満足できるとは思っていなかったので、他のサービスで復習したり書籍での学習に移ります。

CodeLessonというサービスをお試ししてみた

Progateと少し似ている学習サービスの CodeLesson も試してみました。

「未経験から独学でプロを目指す」というコンセプトのサービスで、プロのエンジニアが設計した学習ロードマップが採用されています。

スライドを見て学習し、ブラウザ上でコーディングチャレンジを行います。

デザインを見てコーディングを行うなど、より実践的なレッスンもあります。

全てのレッスンを受講するためにプレミアムプラン（税抜2,980円/月）に入る必要があります。

しかし、フリープランで試せるレッスンが豊富で、Web制作コースに関しては無料で学べる範囲が CodeLesson の方が多いかもしれません。

書籍を使った学習をスタート

HTMLとCSSの基礎を学んだので、さまざまなパターンに触れるために書籍を使って学習を進めていきます。

初心者におすすめの最高な本見つけました

初心者にピッタリな本を見つけました！

これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本 というカピパラさんのイラストが印象的なこの本です。カピパラ本って呼んでいます。

私はパソコンの画面に並べて見たかったので、AmazonのKindleで購入しました。

画面がいっぱいいっぱいになってしまうので、紙の書籍の方が良いなと思いこれきりです。（本当に必要が無くなればメルカリなどで売ることもできます。）

とにかく丁寧！初めての人向け

とにかくイラストが多く、説明もかなり丁寧なので安心して進められました。

今は一般的なレスポンシブ対応されていますし、よく見るレイアウトのサイトの作り方を知れて良かったです。

便利すぎるチートシートが付いてくる！

この本には様々な付録がついてきます。デザインのXDだったり、Webサイトの公開する方法のPDFだったり。

その中でも、ChearSheet （チートシート）が最高なんです！

初心者なら躓きやすい、CSSのGridやFlexboxなど4つの種類のチートシートがPDFにまとめられており、

「縦に並べるの何だっけ！？」や「いい感じにmargin付けるのどうするの？」

となった時に見るとサクッとわかってかなり役立ちました。

全て図解されているので視覚的にもわかりやすいです。

それだけでも買う価値あり！かも。

Webデザインの知識も身につけたい！

次に手に取ったのは HTML&CSSとWebデザインが1冊できちんと身につく本 というこちらの本です。

先ほどの本よりも少しだけ難易度が上がった初心者向けの入門本です。

より色々な情報・パターンを学べる構造になっているため、2冊目にピッタリだと思いました。

Webデザインの基本のキが学べる

最初の章では、Webサイトの仕組みやコーディングに関する基本的な知識が紹介されています。

さらに、レイアウトのパターンやWebデザインの基本についても詳しく説明されており、導入として非常に理解しやすい内容になっています。

5つのレイアウトが学べる

この本では、Webサイトでよく採用される5つのレイアウト手法が学べます。

全てよく見るようなレイアウトになっていて、様々なパターンを知りたい私としてはかなり満足できました。

サンプルコード・付録が豊富

こちらの本にもサンプルコード・付録が沢山ついてきます。実際にどうコードを書けば良いのか確認しながら進めることができますよ。

また、ポートフォリオ制作に向けたアレンジアイディアも載っていて参考になりそうだなと思いました。

2冊で学習して感じたこと

改めて、HTML&CSSは色々な書き方があるんだなあと感じました。

あっちの本ではこういう風な書き方だったけど、こっちではそう書くのか！という部分がいくつかありました。

これはどちらが間違っているという訳ではなく、書き方にも色々ありそうです。

次回はその辺りを詳しく学んでいけるといいのかなと思いました。

まとめ

さて、今回はHTML&CSSを学習サービスや書籍を通して学んできました！

本業後の夜だったり、休みの日だったりスキマ時間を使ったので2ヶ月くらいかかりました。

がっつりコミットできる方なら、もう少し早いかもしれません。

現在の学習状況

簡単なサイトなら1人でも何とか作れそうという気持ちです。

初心者でも、この段階までは比較的スムーズに学習を進められると思いました。

しかし動きがあるものや、複雑なレイアウトのサイトはまだまだ難しそうです。

次に向けたステップ

次回は応用編です。さらに理解を深めるために、書籍を中心にして応用的な知識を学んでいく予定です。

更新されるまでお待ちください！