【感想】1冊ですべて身につくHTML&CSSとwebデザイン入門講座をやってみた

こんにちは、ayaです。

HTML/CSSを学びながら、おしゃれなサイトを作りたくないですか？

今回は、HTML/CSSの復習も兼ねてトライした『1冊ですべて身につくHTML&CSSとwebデザイン入門講座』のレビューをしていきたいと思います。

こんな悩みを解決してくれる本です。

この本では、HTML/CSSに加えてWebデザインの基礎をしっかり学ぶことができます。そして本を通して、おしゃれなサイトを作ることが出来ますよ。

この本を選んだ理由

私がこの本を選んだ理由は次の3つです。

HTMLとCSSは別の本『スラスラわかるHTML＆CSSのきほん』ですでに習得済みの状態でしたが、前回学習してから1年くらい経ったので、基礎の再確認も兼ねて再度勉強することにしました。

また自分でオリジナルサイトを作成したたときに「Webデザインを考えるのも楽しいな」と感じました。

なので、Webデザイナー・Webデペロッパーとして活躍されているManaさんの本が参考になるのでは？と思い購入しました。

実際にやってみて良かった点は次に説明しますね。

『1冊ですべて身につくHTML&CSSとwebデザイン入門講座』の良かった点

この本を実際にやってみて良かったと感じた点です。

それぞれ詳しく説明します。

ハイクオリティでおしゃれなサイトが作れる

この本ではWCBカフェという架空のカフェのサイトを作成します。そのままカフェのホームページとして使えるおしゃれなデザインです。

サイトで使われているロゴや写真は用意されたものですが、自分で作成したものに変えるなどしてカスタマイズ可能です。

その他にも背景にグラデージョンを取り入れる方法など、サイトのアレンジ方法も紹介しているので実際のサイト作成に役立ちます。

背景にグラデージョンをかけた例です。

全体の流れやHTML/CSSの基礎を把握してから、実際のサイト作成作業を説明している

コーディングをする前の企画からWeb公開まで、制作の一連の流れを把握してから、HTML/CSSの基礎を学びサイト作成に入ります。

コーディング前の段階が丁寧に説明されている書籍はあまりないので、初めて学ぶ方でもWeb制作がイメージしやすいです。

HTML/CSSの基礎は、分かりやすくまとめられていますので、私のように復習も兼ねて学ぶ方も知識の再確認・整理ができます。

あとから見返しやすい本の構成となってるのも嬉しいポイントです。

aya

コーディングするだけでなく、デザインの観点でのアドバイスが各所にある

読みやすいレイアウトや装飾など、良い例と悪い例を比較しながら詳しく説明しています。

配色について、色の与えるイメージや色の比率も学べるので、サイト作成の幅が広がります。

レスポンシブに対応している

スマートフォンでサイトを見る人が多いので、Web制作でレスポンシブ対応は必要です。

部分ごとにレスポンシブコードの書き方を説明しているので、一つ一つ理解しながら学習を進められます。

Flexbox、CSSグリッドを使用したレイアウトを学べる

Flexbox、CSSグリッドという比較的新しい実装方法を学べます。

Flexboxを使うと指定した箇所のレイアウトを簡単にできます。
この本では、Flexboxでできるレイアウトが多数紹介されています。

CSSグリッドでは2次元レイアウトを自由に実現することができます。
この本では、CSSグリッドを使用して写真をタイル型にレイアウトします。

紹介されているツールやサイトが豊富

グラフィックツールや配色ツール、参考サイトなど国内から海外のものまで幅広く紹介しています。

どれもサイト制作に役立つもので、無料ツールは速攻ダウンロードしました。

有料ツールは必要に応じて取り入れればいいです。

aya

『1冊ですべて身につくHTML&CSSとwebデザイン入門講座』の気になった点

初めてHTML/CSSを学ぶ人には、分かりにくいかなと感じた点を上げてみました。

HTML/CSSのコードをどこに記述すればいいか説明が分かりにくい箇所がある

実際にサイトを作成中、HTMLとCSSファイルにコードを追記していきますが、具体的にファイルのどこに追記するのか説明が省略されている箇所があります。

コードによっては追記する場所によって実際のWeb画面に追記内容が反映されない場合もあります。どこに追記すればよいか分からない場合は、参考ファイルのコードを確認した方がいいです。

この本で学べること

本の目次はこんな感じです。

Webサイト・HTML・CSSの基礎が学べる

CHAPTER 1 ～ CHAPTER 3でWebサイト・HTML・CSSの基本が学べます。
HTMLとCSSの違いが分からなくても、この本でしっかり学べます。

ざっくり説明するとHTMLとCSSの違いは以下です。

HTMLだけのページは、レイアウトがされてなく、ロゴの大きさも調整されていません。

CSSを書くとデザイン・レイアウトがされて、見やすくなります。

レスポンシブ対応が学べる

CHAPTER 4から実際にサイト作成に入ります。

先述の良かった点でも記載していますが、ユーザーはPCからサイトを見るとは限りません。最近ではスマートフォンから見る人の方が多いです。

スマートフォンは画面が小さくなるので、PC画面用に作成したレイアウトをどのように表示させたら効果的か、レスポンシブに対応させるテクニックを一つ一つ学べます。

外部メディアの導入方法を学べる

サイトに各SNSやGoogleマップなどを載せるのは、もはや定番ですよね。
導入方法が詳細に説明されているので、非常にわかりやすいです。
そしてレスポンシブにもしっかり対応しています。

この本はこんな人におすすめ

基礎がしっかり学べるので、これからHTML/CSSを学ぼうとしている初心者の人だけでなく、HTML/CSSの基礎を再確認したい人にもおすすめです。内容が整理されているので後から見返しやすいです。

ユーザーが使いやすいサイトデザインについても書かれているので、コーディングだけではなくWebデザインも身につけたい人にも最適な本です。

気になる方はAmazonで試し読みできるので自分に合うかどうか見てみてはいかがでしょうか。

まとめ

この本ではHTML、CSS、Webデザインの基礎を学ぶことが出来ます。

基礎を学んだ後は、実際にあるサイトの模写コーディングをオススメします。
模写をすることで基礎を定着させ、応用スキルを身につけていくことができます。

模写コーディングにおすすめのサイトがまとめられているサイトがありますので、こちらを参考にしてみてください。

参考：著者Manaさんのサイトです。
Webクリエイターボックス