こんにちは、ayaです。
HTML/CSSを学びながら、おしゃれなサイトを作りたくないですか?
今回は、HTML/CSSの復習も兼ねてトライした『1冊ですべて身につくHTML&CSSとwebデザイン入門講座』のレビューをしていきたいと思います。
- HTML/CSSを学びたいけど何から始めればいいか分からない
- ネットや動画で勉強してみたけど、サイトが作れるか不安
- 初心者におすすめのHTML/CSS本が知りたい
- 初心者だけどおしゃれなサイトを作りたい
- Webデザインにも興味がある
こんな悩みを解決してくれる本です。
この本では、HTML/CSSに加えてWebデザインの基礎をしっかり学ぶことができます。そして本を通して、おしゃれなサイトを作ることが出来ますよ。
この本を選んだ理由
私がこの本を選んだ理由は次の3つです。
- HTML&CSSの基礎の再確認ができる
- おしゃれなサイトが作れる
- Webデザインの内容も含まれている
HTMLとCSSは別の本『スラスラわかるHTML&CSSのきほん』ですでに習得済みの状態でしたが、前回学習してから1年くらい経ったので、基礎の再確認も兼ねて再度勉強することにしました。
また自分でオリジナルサイトを作成したたときに「Webデザインを考えるのも楽しいな」と感じました。
なので、Webデザイナー・Webデペロッパーとして活躍されているManaさんの本が参考になるのでは?と思い購入しました。
実際にやってみて良かった点は次に説明しますね。
『1冊ですべて身につくHTML&CSSとwebデザイン入門講座』の良かった点
この本を実際にやってみて良かったと感じた点です。
- ハイクオリティでおしゃれなサイトが作れる
- 全体の流れやHTML/CSSのコードを把握してから、実際のサイト作成作業を説明している
- コーディングするだけでなく、デザインの観点でのアドバイスが各所にある
- レスポンシブに対応している
- Flexbox、CSSグリッドを使用したレイアウトを学べる
- 紹介されているツールやサイトが豊富
それぞれ詳しく説明します。
ハイクオリティでおしゃれなサイトが作れる
この本ではWCBカフェという架空のカフェのサイトを作成します。そのままカフェのホームページとして使えるおしゃれなデザインです。
サイトで使われているロゴや写真は用意されたものですが、自分で作成したものに変えるなどしてカスタマイズ可能です。
その他にも背景にグラデージョンを取り入れる方法など、サイトのアレンジ方法も紹介しているので実際のサイト作成に役立ちます。
背景にグラデージョンをかけた例です。
全体の流れやHTML/CSSの基礎を把握してから、実際のサイト作成作業を説明している
コーディングをする前の企画からWeb公開まで、制作の一連の流れを把握してから、HTML/CSSの基礎を学びサイト作成に入ります。
コーディング前の段階が丁寧に説明されている書籍はあまりないので、初めて学ぶ方でもWeb制作がイメージしやすいです。
HTML/CSSの基礎は、分かりやすくまとめられていますので、私のように復習も兼ねて学ぶ方も知識の再確認・整理ができます。

コーディングするだけでなく、デザインの観点でのアドバイスが各所にある
読みやすいレイアウトや装飾など、良い例と悪い例を比較しながら詳しく説明しています。
配色について、色の与えるイメージや色の比率も学べるので、サイト作成の幅が広がります。
レスポンシブに対応している
スマートフォンでサイトを見る人が多いので、Web制作でレスポンシブ対応は必要です。
部分ごとにレスポンシブコードの書き方を説明しているので、一つ一つ理解しながら学習を進められます。
Flexbox、CSSグリッドを使用したレイアウトを学べる
Flexbox、CSSグリッドという比較的新しい実装方法を学べます。
Flexboxを使うと指定した箇所のレイアウトを簡単にできます。
この本では、Flexboxでできるレイアウトが多数紹介されています。
CSSグリッドでは2次元レイアウトを自由に実現することができます。
この本では、CSSグリッドを使用して写真をタイル型にレイアウトします。
紹介されているツールやサイトが豊富
グラフィックツールや配色ツール、参考サイトなど国内から海外のものまで幅広く紹介しています。
どれもサイト制作に役立つもので、無料ツールは速攻ダウンロードしました。

『1冊ですべて身につくHTML&CSSとwebデザイン入門講座』の気になった点
初めてHTML/CSSを学ぶ人には、分かりにくいかなと感じた点を上げてみました。
HTML/CSSのコードをどこに記述すればいいか説明が分かりにくい箇所がある
実際にサイトを作成中、HTMLとCSSファイルにコードを追記していきますが、具体的にファイルのどこに追記するのか説明が省略されている箇所があります。
コードによっては追記する場所によって実際のWeb画面に追記内容が反映されない場合もあります。どこに追記すればよいか分からない場合は、参考ファイルのコードを確認した方がいいです。
この本で学べること
本の目次はこんな感じです。
CHAPTER 2:Webの基本構造を作る!HTMLの基本
CHAPTER 3:Webのデザインを作る!CSSの基本
CHAPTER 4:フルスクリーンのWebサイトを制作する
CHAPTER 5:2カラムのWebサイトを制作する
CHAPTER 6:タイル型のWebサイトを制作する
CHAPTER 7:外部メディアを利用する
Webサイト・HTML・CSSの基礎が学べる
CHAPTER 1 ~ CHAPTER 3でWebサイト・HTML・CSSの基本が学べます。
HTMLとCSSの違いが分からなくても、この本でしっかり学べます。
ざっくり説明するとHTMLとCSSの違いは以下です。
- HTML:Webページの土台を作る
- CSS:Webページのデザイン、レイアウトを形成する
HTMLだけのページは、レイアウトがされてなく、ロゴの大きさも調整されていません。
CSSを書くとデザイン・レイアウトがされて、見やすくなります。
レスポンシブ対応が学べる
CHAPTER 4から実際にサイト作成に入ります。
先述の良かった点でも記載していますが、ユーザーはPCからサイトを見るとは限りません。最近ではスマートフォンから見る人の方が多いです。
スマートフォンは画面が小さくなるので、PC画面用に作成したレイアウトをどのように表示させたら効果的か、レスポンシブに対応させるテクニックを一つ一つ学べます。
外部メディアの導入方法を学べる
サイトに各SNSやGoogleマップなどを載せるのは、もはや定番ですよね。
導入方法が詳細に説明されているので、非常にわかりやすいです。
そしてレスポンシブにもしっかり対応しています。
この本はこんな人におすすめ
- これからHTML/CSSを学ぼうとしている人
- すでにHTML/CSSを学んでいて基礎知識を再確認したい人
- コーディングだけでなくWebデザインにも興味がある人
基礎がしっかり学べるので、これからHTML/CSSを学ぼうとしている初心者の人だけでなく、HTML/CSSの基礎を再確認したい人にもおすすめです。内容が整理されているので後から見返しやすいです。
ユーザーが使いやすいサイトデザインについても書かれているので、コーディングだけではなくWebデザインも身につけたい人にも最適な本です。
気になる方はAmazonで試し読みできるので自分に合うかどうか見てみてはいかがでしょうか。
まとめ
この本ではHTML、CSS、Webデザインの基礎を学ぶことが出来ます。
基礎を学んだ後は、実際にあるサイトの模写コーディングをオススメします。
模写をすることで基礎を定着させ、応用スキルを身につけていくことができます。
模写コーディングにおすすめのサイトがまとめられているサイトがありますので、こちらを参考にしてみてください。
- HikoProBlog
- Codestep
【レベル別】模写コーディングにおすすめのサイトまとめ9選
模写のやり方を説明している動画も大変分かりやすいです。
【模写コーディング】おすすめの練習サイト【入門編~上級編】
レベル別にサイトを紹介しています。学べる内容もまとまっているので、ポイントを意識して模写するといいですよ。
参考:著者Manaさんのサイトです。
Webクリエイターボックス