2022年1月18日TwitterSharePocketHatenaPinterestLINEコピーするこんにちは、ayaです。HTML/CSSを学びながら、おしゃれなサイトを作りたくないですか?今回は、HTML/CSSの復習も兼ねてトライした『1冊ですべて身につくHTML&CSSとwebデザイン入門講座』のレビューをしていきたいと思います。初心者におすすめの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の基礎は、分かりやすくまとめられていますので、私のように復習も兼ねて学ぶ方も知識の再確認・整理ができます。あとから見返しやすい本の構成となってるのも嬉しいポイントです。ayaコーディングするだけでなく、デザインの観点でのアドバイスが各所にある読みやすいレイアウトや装飾など、良い例と悪い例を比較しながら詳しく説明しています。配色について、色の与えるイメージや色の比率も学べるので、サイト作成の幅が広がります。レスポンシブに対応しているスマートフォンでサイトを見る人が多いので、Web制作でレスポンシブ対応は必要です。部分ごとにレスポンシブコードの書き方を説明しているので、一つ一つ理解しながら学習を進められます。Flexbox、CSSグリッドを使用したレイアウトを学べるFlexbox、CSSグリッドという比較的新しい実装方法を学べます。Flexboxを使うと指定した箇所のレイアウトを簡単にできます。この本では、Flexboxでできるレイアウトが多数紹介されています。CSSグリッドでは2次元レイアウトを自由に実現することができます。この本では、CSSグリッドを使用して写真をタイル型にレイアウトします。紹介されているツールやサイトが豊富グラフィックツールや配色ツール、参考サイトなど国内から海外のものまで幅広く紹介しています。どれもサイト制作に役立つもので、無料ツールは速攻ダウンロードしました。有料ツールは必要に応じて取り入れればいいです。HTML/CSSを学ぶ人には、分かりにくいかなと感じた点を上げてみました。HTML/CSSのコードをどこに記述すればいいか説明が分かりにくい箇所がある実際にサイトを作成中、HTMLとCSSファイルにコードを追記していきますが、具体的にファイルのどこに追記するのか説明が省略されている箇所があります。コードによっては追記する場所によって実際のWeb画面に追記内容が反映されない場合もあります。どこに追記すればよいか分からない場合は、参考ファイルのコードを確認した方がいいです。この本で学べること本の目次はこんな感じです。3でWebサイト・HTML・CSSの基本が学べます。HTMLとCSSの違いが分からなくても、この本でしっかり学べます。説明するとHTMLとCSSの違いは以下です。HTML:Webページの土台を作るCSS:Webページのデザイン、レイアウトを形成するHTMLだけのページは、レイアウトがされてなく、ロゴの大きさも調整されていません。CSSを書くとデザイン・レイアウトがされて、見やすくなります。4から実際にサイト作成に入ります。先述の良かった点でも記載していますが、ユーザーはPCからサイトを見るとは限りません。最近ではスマートフォンから見る人の方が多いです。スマートフォンは画面が小さくなるので、PC画面用に作成したレイアウトをどのように表示させたら効果的か、レスポンシブに対応させるテクニックを一つ一つ学べます。外部メディアの導入方法を学べるサイトに各SNSやGoogleマップなどを載せるのは、もはや定番ですよね。導入方法が詳細に説明されているので、非常にわかりやすいです。レスポンシブにもしっかり対応しています。基礎がしっかり学べるので、これからHTML/CSSを学ぼうとしている初心者の人だけでなく、HTML/CSSの基礎を再確認したい人にもおすすめです。内容が整理されているので後から見返しやすいです。ユーザーが使いやすいサイトデザインについても書かれているので、コーディングだけではなくWebデザインも身につけたい人にも最適な本です。気になる方はAmazonで試し読みできるので自分に合うかどうか見てみてはいかがでしょうか。リンクまとめこの本ではHTML、CSS、Webデザインの基礎を学ぶことが出来ます。基礎を学んだ後は、実際にあるサイトの模写コーディングをオススメします。模写をすることで基礎を定着させ、応用スキルを身につけていくことができます。模写コーディングにおすすめのサイトがまとめられているサイトがありますので、こちらを参考にしてみてください。模写のやり方を説明している動画も大変分かりやすいです。Codestep【模写コーディング】おすすめの練習サイト【入門編~上級編】レベル別にサイトを紹介しています。学べる内容もまとまっているので、ポイントを意識して模写するといいですよ。参考:著者Manaさんのサイトです。HTML/CSS【感想】1冊ですべて身につくHTML&CSSとwebデザイン入門講座をやってみた2022/1/18BLOGエックスサーバーの永久無料ドメインを取得してみた!2022/1/18BLOGブログ初心者にオススメなサーバーはエックスサーバーです【コスパ最強】2022/1/18ENGLISH英語で学ぶ!英語学習におすすめの海外YouTubeチャンネル8選!2022/1/18aya元OL→現フリーランスエンジニア3年目(未経験・スキル0でフリーランス転身しました)カナダ・バンクーバーにワーホリ経験あり。海外大好きなアラサー女です。スキルアップのため英語とプログラミングを日々勉強しています。