CSS HTML5

2021.05.11

【おすすめ書籍】この本でゼロからWebサイト制作を学びました

こんにちは!コーディングユニットの新垣です。
私は、日々の生活の中でいくつものWebサイトを見ています。

今日のランチのお店、母の日の贈り物、話題のスイーツの販売店、好きなアーティストの番組出演情報・・。きっとみなさんも毎日何らかのWebサイトに触れながら生活されているのではないかと思います。

Webサイトが身近になったいま、

  • Webコーダーになりたい
  • 自分のブログを解説してカスタマイズしたい
  • WebサイトやHTML/CSSに興味がある

など様々な方の参考になればと思い、本日は、ゼロからWebサイト制作を学ぶ方におすすめの書籍を紹介いたします。

私も実際にこの本を使って学びました。どの参考書を購入しようかと悩まれている方のご参考になれば幸いです!

ご紹介書籍「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」

早速ですが、本日ご紹介するのは 「1冊ですべて身につくHTML & CSSとWebデザイン入門講座 」です。

書籍の構成

書籍の構成は、執筆者であるManaさんがブログで紹介されています。

  1. CHAPTER 1  最初に知っておこう! Webサイトの基本
  2. CHAPTER 2  Webの基本構造を作る! HTMLの基本
  3. CHAPTER 3  Webのデザインを作る! CSSの基本
  4. CHAPTER 4  フルスクリーンのWebサイトを制作する
  5. CHAPTER 5  2カラムのWebサイトを制作する
  6. CHAPTER 6  タイル型のWebサイトを制作する
  7. CHAPTER 7  外部メディアを利用する

書籍購入前の私の状況

私が実際にWeb制作をゼロから学ぼうと思ったとき、勉強方法や参考書籍についてたくさん調べました。
様々な記事を見て、「この人は元々Web制作の知識があったのかな?私でもこの書籍で同じように学べるのだろうか」と不安に思うことがありました。

なので、こちらの書籍購入前に私が身に付けていたスキル/やったことを先にご紹介したいと思います。

PC操作はテキスト入力などがスムーズに行える程度

私は、前職が事務職だったこともあり、PCの操作自体は日々行なっていました。WordやExcel、PowerPointを使用することが多く、テキスト入力は、スムーズに行える程度でした。

progate(プロゲート)で初めてHTML/CSSに触れる

私が初めてHTML/CSSに触れたのは、progate(プロゲート)というオンライン学習ツールでした。
その時はまだ自分のPC端末も所有しておらず、友人のPCを借りてお試ししている状況でした。

progateは、以下のような人におすすめです。

  • 全く何も分からないがWebサイト制作に興味があるので少し体験してみたい
  • Webデザイナー/コーダーに興味があるが、自分に向いているのか(好きになれるのか)不安

私にとっては、2つ目の要素が大きかったです。
私の場合、progateで少し触れてみて、コーディングは面白そうだと思ったので、Webサイト制作を学んでみようと決心し、PC端末などを購入いたしました!

progateは、初めてコーディングに触れる機会としては、とてもおすすめなのですが、エディタやサーバーなどの話は触れられていません。そのため、progateを終えた後、実際にどのようにWebサイト制作を行っていけば良いのか分からない..という状況に陥りました。

この状況で私が購入したのが、「1冊ですべて身につくHTML & CSSとWebデザイン入門講座 」でした。

おすすめポイント

1.Webサイトがどのように表示されているのかざっくり把握できる

こちらの書籍のおすすめポイント1つ目は、Webサイトの基本についてざっくり紹介されていることです。

「ざっくり」というところがポイントです。まだ何も学んでいない状況で、詳細な難しい話が書いてあってもきっと何も理解できそうにないので..

サーバーとは?ドメインとは?など、本当に何も分からない状態からざっくり理解することができました。

おすすめのレンタルサーバーやドメイン取得サービスなども紹介されていたので、その中から自分に合いそうなものを選んで実際に環境を整えました。

2.実際にWebサイトを作りながら学ぶことができる

こちらの書籍は、前半にざっくりHTML/CSSについて触れられており、後半では実際にWebサイトを作りながら学ぶ構成になっています。

HTMLやCSSのルールについてずっと読み進めるのは疲れますし、一気に全て覚えることも難しいと思います。そのため、実際にWebサイトを作りながら進められるのは、とても進めやすかったです。

また、コーディングは、暗記科目のようにプロパティやセレクタを覚えるというよりは、実際に手を動かして覚えていく方が身に付きやすいかと思いますので、その点においても良いと思います。

また、作成するのがLP(ランディングページ)のように1ページものではなく、いくつかのページから構成される「Webサイト」というのも個人的にはテンションが上がるポイントでした。
自分が作ったページから次のページに遷移するというのは、Web制作を始めたばかりの私にとって、嬉しいことでした。何かを勉強するのは、自分のモチベーション維持との戦いでもあると思うので、こういうポイントも大事だと思っています。

3.チャプターごと(細かい単位)でサンプルコードがある

こちらの書籍を購入するとサンプルコードをダウンロードすることができます。

「書籍と同じように書いているはずなのにうまくいかない..」ということが多発していたので、サンプルコードがあるととてもありがたかったです。
自分の書いたコードとサンプルを照らし合わせることで間違えている箇所が分かりますし、もし照らし合わせても分からない時は、サンプルコードを丸々コピペして前に進むことができます!笑

最初は、分からない・出来ないと止まってしまう(学習をやめてしまう)よりは、何となく誤魔化しながらでも進んで学ぶ方が良い!と自分に言い聞かせながら学んでいました。

サンプルコード自体は、他の書籍でも配布されていることがありますが、こちらの書籍で良いと思うポイントは、サンプルコードの配布単位が細かいことです。

上の写真のとおり、書籍上での1つの説明ごとに対応するサンプルコードが分けられています。
この配布方法は、右も左も分からない私にとってとてもありがたいものでした。

サンプルコードを配布していただいても最初から最後まで全部まるっと記述されていると、どこが何に対応しているのか、どのコードで何が実現されているのか全く理解できなかったからです。

4.レスポンシブについても学ぶことができる

Webサイト制作を始めた時には、ページの幅などは考えずに、とりあえずWeb上に表現することが最優先です。
それから勉強を進めていくと、PCでもタブレットでもスマートフォンでもWebサイトが見られるようにするためにレスポンシブ対応を学ぶ必要性が出てくると思います。

書籍によっては、レスポンシブに言及していないものもありますが、現在Web制作を学ぶにあたってレスポンシブは必須の内容になってくるかと思います。こちらの書籍では、レスポンシブについてもしっかり記載されています。

サンプルでも自分が作ったサイトがスマートフォンでも見られるのは嬉しいことだと思います。

5.サンプルで作成するWebサイトがイマっぽい

個人的には、こちらの観点も地味に大事でした。
ネット上を探すと、コーディング練習用のデザインデータを配布してくださっている人もちらほらいらっしゃいます。

どれに挑戦するか決めるにあたって大切なのは、練習のためなのだから何でも良いということではなく、「こんなWebサイトを作ってみたい!」と思えるデザインであることだと思います。

こちらの書籍で紹介されている練習用のWebサイトは、実際にみたことのある、本当に実在しそうなもので、モチベーションがすごく上がりました。

その上でそれらをベースに自分が好きな色を入れてみたり、フォントを変えてみたりとしながら学ぶのが私は楽しかったです。

6.flexbox や grid についても記載されている

HTMLやCSSにも歴史があって、時代とともに少しずつ新しいルールが適用されている部分もあります。

発行が少し古い書籍では、「flexbox」や「grid」といった新しい内容については記載されていないということがありますが、こちらの書籍ではしっかり学ぶことができます。

7.タイポグラフィやレイアウト、配色など、デザインの基礎についても学ぶことができる

コーディング技術の書籍の場合、デザインについては全く記載されていないものもあります。こちらの書籍では、ざっくりですが、タイポグラフィやレイアウト、配色などについても記載されています。

コーディングは、(どこまで1人でするかは時と場合により異なりますが、)デザインとは切っても切り離せないものなので、デザインについても一緒に学べる書籍は、とっても良いと思います。

〈まとめ〉Webサイト制作学習の1冊目としておすすめ!

今回は、実際の経験も交え、「1冊ですべて身につくHTML & CSSとWebデザイン入門講座 」をご紹介いたしました。

こちらの書籍は、コーディングの勉強をすでに始めていて、知識もある方には少し物足りない内容かもしれません。

しかし、これまでご紹介してきたように、まさにこれからWeb制作の学習を始めるという方にはぴったりの書籍ではないかと思います。まさに「1冊ですベて身に付く」といった感じで幅広くWeb制作の全体像を掴むことができると思います。

ここまで読んでくださってありがとうございました。
Web制作に挑戦してみようかなと思われている方々のご参考になれば幸いです!

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

0

関連記事

  • 2021.06.08

    CSSだけでできる!マーカーで線が引かれているようなデザインの作り方

    CSS

    WordPress

  • 2021.06.02

    【IEバグ】flex-direction: column;を指定した時に画像の下に余白ができるバグ解消【CSS1行……

    CSS

    HTML5

  • 2021.05.19

    【CSS】英単語の間隔を調整できるword-spacing

    CSS

おすすめ記事

  • 2021.05.24

    【おすすめ書籍】動くデザインを作る時にまず読んでほしい本

    JavaScript

  • 2021.06.08

    CSSだけでできる!マーカーで線が引かれているようなデザインの作り方

    CSS

    WordPress

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!