HTMLやCSSのコーディングに関して、断片的な知識によって部分的な修正や改変はできても、ページ丸ごとを自分の作りたい様に組み上げようとすると、どうすればいいのかわからず手が止まってしまった経験はありませんか?
そこで、HTML5/CSS3を使用したサイトをゼロから制作するためのコーディングを学ぶ事ができるおすすめの書籍を紹介します。
HTML5/CSS3 モダンコーディング
本書は3つのPARTに分かれており、Web制作でよく見られる3種類のレイアウトのサイトを紹介しています。実際のフロントエンジニアがたどるフローに近い形で学習する事ができます。
本格的なレイアウトのサイトを作れたという手応え
3つのサイトを作成する事で、「本格的なレイアウトのサイトを作れた」という手応えを得る事ができ、モチベーションのアップに繋がります。
本書で作成するサイト
スタンダードレイアウト
Webサイトに一番多く見られるベーシックなレイアウトのサイトを作成します。
グリッドレイアウト
ブラウザの横幅が変わるとブロックが自動で移動する可変グリッドレイアウトのサイトを作成します。
シングルページレイアウト
PCとスマートフォン両方に対応したシングルページレイアウトのサイトを作成します。
コーディングの進め方
サンプルファイルをダウンロードでき、ブラウザにドラッグするとサンプルを表示する事ができます。コーディングを進める場合、ファイルの中身を空にしてから進める必要があります。サンプルがあるため、答え合わせも簡単にできます。
解説が丁寧でわかりやすく、本書に従って進めていくとスムーズにサイトを完成させる事ができます。
筆者は1つのセクションを終えるのに1時間〜2時間ほどでした。
繰り返して覚える
おすすめの学習方法は繰り返し学習する事です。本書を1周した後、もう1周すると頭が整理されており、1周目よりもはるかにスムーズにコーディングする事ができます。様々な学習本に手を出すよりも1冊ずつ、丁寧に学習する事をおすすめします。
イメージをコードに変換するコツがわかる
ゼロからサイトを組み上げるという工程を3セクション繰り返す事で、イメージをコードに変換するコツが掴めてきます。1つのサイトには様々なHTMLの要素やCSSのプロパティが詰まっています。実用的な知識を飽きる事なく身につける事ができ、本書を通してスキルアップする事ができたと実感する事ができるでしょう。