どーも。
なぎにゃぎです。
2019年3月16日に発売された『1冊ですべて身につくHTML&CSSとWebデザイン入門講座』を読みました。
『Webクリエイターボックス』の管理人（Manaさん）がHTMLやCSSに加えて、Webデザインの基礎を解説している学習書です。
HTMLやCSSを学ぶ方法はたくさんありますよね。
ネットから色々と情報を集めても良いですし、Progateやドットインストールなどを利用する方法もあります。
ただ、知識ゼロの人が基礎を体系的に学ぶには、書籍を用いてやるのが一番効率的と考えているので、初めてHTMLやCSSを勉強する人にはおすすめの書籍です。
今回は『1冊ですべて身につくHTML&CSSとWebデザイン入門講座』を読んだ感想を紹介します。
目次
こんな人におすすめ
- HTML&CSSの基礎を学びたい人
- 久しぶりにHTML&CSSを触る人
- キレイなデザインのサンプルで勉強したい人
- Webクリエイターボックスの雰囲気が好きな人
冒頭に書きましたが、HTML&CSSを初めて触る人のために、基礎的な知識を扱った書籍になっています。
ただし、基礎を抑えながら、ここ数年で変わってきた内容も記載されていますので、久しぶりにHTML&CSSを触る人も学ぶことは多いと感じました。
また『1冊ですべて身につくHTML&CSSとWebデザイン入門講座』は、サンプルのデザインにもこだわりを感じる内容になっていたため、自分の手で１から作れたときの楽しみが増すと思いますね。
4月から入社してくる新入社員の教材に使えるかもー。と考えています。
HTMLってなに？
CSSってなにそれ？
なんとなくイメージはあるけど、もやもやするなー。
そんな人におすすめしたい書籍になっています。
全体の感想
非常に分かりやすい内容になっています。
Web周りって技術の進歩が早いので、あっちへフラフラ、こっちにフラフラと学んでも知識を身につけるだけで消耗しちゃいます。
HTMLを学んで、CSSを学んで、JavaScriptを学んで、jQueryを学んで、、、。と頭が混乱する要素だらけです。
そんな状況に陥らないために、まずはWebサイトの骨組みを担っている『HTML』＆『CSS』をしっかりと覚えることで、次のステップに移りやすくなると思っています。
そんな理由から『1冊ですべて身につくHTML&CSSとWebデザイン入門講座』は初学者におすすめできる内容だと感じています。
ただし、注意点としては『1冊』でHTML&CSSをすべて身につけるのは難しいです。
あくまでも『1冊』で『基礎』を身につけるための書籍だと思ってください。
各章の概要説明
CHAPTER1 最初に知っておこう！ Webサイトの基本
よいデザインとは？
ユーザビリティとは？等のユーザが使いやすいデザインの考え方から始まって、Webサイトの仕組みまで学ぶことができます。
私のようにデザインが決まっている状態でサイトを作成する場合は、デザインについて意識する必要性は低いかもしれませんが、自分でサイトを構築する場合はデザインの知識もあったほうが良いですよね。
CHAPTER2 Webの基本構造を作る！ HTMLの基本
「HTMLとは」から始まって、ファイル名のルールや基本の書き方を細かく解説してくれています。
HTMLの説明は、36ページに渡って解説していますので、基礎的な部分はなんとなく理解できるようになっています。
実際に手を動かして学ぶのは、CHAPTER4以降が中心になっていますが、もう少し手を動かしながら作業できる部分があると飽きずに勉強が捗ると感じました。
CHAPTER3 Webのデザインを作る！ CSSの基本
HTMLで作成した骨組みをCSSで飾り付けるということで、CSSのほうが学ぶことが多いですね。
CSSの説明だけで、約90ページほどあります。
ただ似たようなパターンが多いため、よく使うプロパティやそこに設定する値を覚えておけば応用が効きますね。
こちらの章もHTMLの章と同じように、手を動かす部分が少ないので、少々物足りないと感じる部分もありました。
CHAPTER4 ~ 6 Webサイトを制作する
CHAPTER4 ~ 6では、実際に手を動かして色々なパターンのサイトの作り方を通して、HTML&CSを学んでいきます。
CHAPTER4では、フルスクリーンのWebサイトを制作していきます。
予約ページなど必要な情報をわかりやすく見せたいサイトに多いレイアウトですね。
インパクトのあるページでユーザに印象付けをして、詳細な情報は下のページをスクロールして見るって形が多いです。
簡単なページですが、CHAPTER2~3で学んだ知識を使って、1から手を動かして作ってみましょう(*ﾟ∀ﾟ)
CHAPTER5では、２カラムのWebサイトを制作していきます。
ニュースサイトや個人ブログなど、コンテンツの量が多いサイトはこの形が多いですね。
サイドバーに配置した情報は、スマートフォンでは表示できないため、デバイスの大きさに合わせて、レスポンシブに対応したデザインの作り方を学ぶことができます。
ユーザの多くがスマートフォンを利用して、Webサイトを見る時代ではレスポンシブデザインを学ぶことは必須となっていますので、しっかりと基礎を身につけたいですね。
CHAPTER6では、タイル型のWebサイトを制作していきます。
ショッピングサイトなどで多く見かけるレイアウトですね。
このレイアウトは、HTML&CSSの勉強というよりは、デザインの勉強に近いです。
どの画像を中心に持ってくれば、ユーザの印象に残るのか？を考えて作ってみると色々と気がつくことがあるかもしれませんね。
私はデザイン力がゼロなのでアレでしたが、、、。
CHAPTER7 外部メディアを利用する
問い合わせフォームの設置からGoogleMapを利用した地図の配置、Facebook、Twitter、YouTubeなどSNSのプラグインの挿入について学べます。
上記で紹介したものは、どのサイトにも基本的に設置されるようになっているため、覚えておいて損することはないですね。
一度覚えておけば、どのサイトでも同じように流用することができる知識だと思いますし。
次のステップはオンライン学習を利用する
HTML&CSSとWebデザイン入門講座を読んで、HTML&CSSの基礎的な技術を身につけたあとは、オンライン学習を利用して更に知識を深めましょう。
Udemy(ユーデミー)だったらWebエンジニア向けの講座も多く配信されています。
HTMLやCSSを更に極めるも良し。
JavaScriptを覚えて画面に様々な動きを持たせてみるのも良し。
どちらの講座もUdemyでは多く配信されています。
オンデマンドで好きな時間に自分のペースで学習できるので、忙しくて勉強する時間を取ることが難しい社会人のかたにもおすすめです。
私もWebエンジニアに関する講座を2つ受講しましたが、どちらも開発環境の準備から丁寧に説明してくれるので、初めての人でも安心して取り組めます。
Webエンジニアに関する講座は日本語でも人気のある講座が多く配信されています。
通勤時間を利用してスキルアップに励みましょう(*’▽’)
まとめ
初めてHTMLやCSSを触る人にとっては、とてもわかりやすい内容でしたし、デザインに対しての著者のこだわりを感じることができました。
半日〜1日で読み終わりますので、基礎を学びたい人は、『1冊ですべて身につくHTML&CSSとWebデザイン入門講座』を読んでみましょう。
また下記の記事で紹介している『プロになるためのWeb技術入門』も初めての方にはおすすめです。
合わせてご覧ください。
ではでは。