HTML・CSS学習本のおすすめはこの2冊！【入門〜実践編】

Webサイトの基本について

これからWebサイト制作を仕事にしていこうと考えている人は、こちらの解説でWebサイトに関する全体の概要をつかむことができます。

HTMLとCSSの基本

Web制作に重要な以下の内容についてもしっかりと解説されています。

• Webフォント
• リセットCSS
• Flexboxとグリッド

サンプルサイトの制作

最後にサンプルサイトでおしゃれなカフェサイトを制作します。
全部で4ページですが、それぞれのページでフルスクリーン、2カラム、タイル型など様々なレイアウトについて学べるようになっています。

サンプルサイトのデザインイメージは以下の通りです。

トップページ

NEWSページ

MENUページ

CONTACTページ

上記のように、『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』は、WebサイトやHTML、CSSの基本から実際にサンプルサイトの作り方を学ぶところまで全体を学べる初学者に最適な本です。

こちらの書籍については、以下の記事でも詳しく解説していますのでよろしければ参考にしてみてください。
【プロがレビュー】1冊ですべて身につくHTML & CSSとWebデザイン入門講座

そして、Webサイト制作とHTML、CSSの基礎について一通り学んだあとは、理解するだけでなく実際に自分で作れるようになるための練習を行なっていきます。

そこで次におすすめとなる書籍が、中級者以上の方を対象とした『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』です。

それでは、詳しく解説していきましょう。

【入門編】プロフィールサイト

基本的なHTMLとCSSだけで作れる簡単な1ページプロフィールサイトの制作を通して、主にフレックスボックスの使い方について学べます。

• 学習テーマ：フレックスボックス
• ページ数：1

【初級編】ブランドサイト

簡単なHTML&CSSを使用した1ページのブランドサイトの制作を通して、主にポジションの使い方について学べます。

• 学習テーマ：ポジション
• ページ数：1

【中級編】サービスサイト

簡単なHTML&CSS&JavaScript（jQuery）を使用した複数ページのサービスサイトの制作を通して、複数ページのWebサイトの作り方について学べます。

• 学習テーマ：複数ページ
• ページ数：4

【上級編】カフェサイト

少し複雑なHTML&CSS&JavaScript（jQuery）を使用した複数レイアウトのカフェサイトの制作を通して、色々なレイアウトの作り方について学べます。

• 学習テーマ：色々なレイアウト
• ページ数：4

【応用編】ランディングページ

複雑なHTML&CSS&JavaScript（jQuery）を使用した動きのあるランディングページの制作を通して、CSSアニメーションやJavaScript（jQuery）を使った動きのあるWebサイトの作り方について学べます。

• 学習テーマ：動きのあるWebサイト
• ページ数：1

【実践編】コーポレートサイト

実務を想定した実践的なコーポレートサイトの制作を通して、実務レベルの実践的なWebサイトの作り方について学べます。

• 学習テーマ：実務を想定したWebサイト
• ページ数：6

書籍の特徴

こちらの書籍では、レイアウト構成や実務で使用するテクニックが学べたり、デザインカンプからのコーディング練習ができるのが特徴です。

①：レイアウト構成が学べる

全てのサイトにレイアウト構成の解説が載っているので、コーディングを行う際に必要となるレイアウト構成をイメージする力を鍛えることができます。

②：実務で使用するテクニックが学べる

フレックスボックス、ポジション、CSS アニメーション、JavaScript（jQuery）、ドロップダウンメニュー、ハンバーガーメニュー、アコーディオン、モーダルウィンドウ、シングルカラム、2カラム、タイル型、ブロークングリッド、フルスクリーン、LP（ランディングページ）など、実務で使用するテクニックを一通り学ぶことができます。

③：デザインカンプからのコーディング練習ができる

全てのサンプルサイトにFigmaとAdobe XDのデザインカンプがついているので、実務と同じようにデザインカンプからのコーディング練習を行うことができます。また、サンプルサイトのソースコードがダウンロードできるのでコードのチェックも可能です。