2023.12.29
会社に置いてもらった本の話 その２
- 書籍紹介
WEB制作のあれこれがわかる！
WEB制作のあれこれがわかる！
こんにちは！
私は、日々の生活の中でいくつものWebサイトを見ています。
今日のランチのお店、母の日の贈り物、話題のスイーツの販売店、好きなアーティストの番組出演情報・・。きっとみなさんも毎日何らかのWebサイトに触れながら生活されているのではないかと思います。
Webサイトが身近になったいま、
など様々な方の参考になればと思い、本日は、ゼロからWebサイト制作を学ぶ方におすすめの書籍を紹介いたします。
私も実際にこの本を使って学びました。どの参考書を購入しようかと悩まれている方のご参考になれば幸いです！
目次
早速ですが、本日ご紹介するのは 「1冊ですべて身につくHTML & CSSとWebデザイン入門講座 」です。
書籍の構成は、執筆者であるManaさんがブログで紹介されています。
私が実際にWeb制作をゼロから学ぼうと思ったとき、勉強方法や参考書籍についてたくさん調べました。
様々な記事を見て、「この人は元々Web制作の知識があったのかな？私でもこの書籍で同じように学べるのだろうか」と不安に思うことがありました。
なので、こちらの書籍購入前に私が身に付けていたスキル/やったことを先にご紹介したいと思います。
私は、前職が事務職だったこともあり、PCの操作自体は日々行なっていました。WordやExcel、PowerPointを使用することが多く、テキスト入力は、スムーズに行える程度でした。
私が初めてHTML/CSSに触れたのは、progate（プロゲート）というオンライン学習ツールでした。
その時はまだ自分のPC端末も所有しておらず、友人のPCを借りてお試ししている状況でした。
progateは、以下のような人におすすめです。
私にとっては、2つ目の要素が大きかったです。
私の場合、progateで少し触れてみて、コーディングは面白そうだと思ったので、Webサイト制作を学んでみようと決心し、PC端末などを購入いたしました！
progateは、初めてコーディングに触れる機会としては、とてもおすすめなのですが、エディタやサーバーなどの話は触れられていません。そのため、progateを終えた後、実際にどのようにWebサイト制作を行っていけば良いのか分からない..という状況に陥りました。
この状況で私が購入したのが、「1冊ですべて身につくHTML & CSSとWebデザイン入門講座 」でした。
こちらの書籍のおすすめポイント1つ目は、Webサイトの基本についてざっくり紹介されていることです。
「ざっくり」というところがポイントです。まだ何も学んでいない状況で、詳細な難しい話が書いてあってもきっと何も理解できそうにないので..
サーバーとは？ドメインとは？など、本当に何も分からない状態からざっくり理解することができました。
おすすめのレンタルサーバーやドメイン取得サービスなども紹介されていたので、その中から自分に合いそうなものを選んで実際に環境を整えました。
こちらの書籍は、前半にざっくりHTML/CSSについて触れられており、後半では実際にWebサイトを作りながら学ぶ構成になっています。
HTMLやCSSのルールについてずっと読み進めるのは疲れますし、一気に全て覚えることも難しいと思います。そのため、実際にWebサイトを作りながら進められるのは、とても進めやすかったです。
また、コーディングは、暗記科目のようにプロパティやセレクタを覚えるというよりは、実際に手を動かして覚えていく方が身に付きやすいかと思いますので、その点においても良いと思います。
また、作成するのがLP（ランディングページ）のように1ページものではなく、いくつかのページから構成される「Webサイト」というのも個人的にはテンションが上がるポイントでした。
自分が作ったページから次のページに遷移するというのは、Web制作を始めたばかりの私にとって、嬉しいことでした。何かを勉強するのは、自分のモチベーション維持との戦いでもあると思うので、こういうポイントも大事だと思っています。
こちらの書籍を購入するとサンプルコードをダウンロードすることができます。
「書籍と同じように書いているはずなのにうまくいかない..」ということが多発していたので、サンプルコードがあるととてもありがたかったです。
自分の書いたコードとサンプルを照らし合わせることで間違えている箇所が分かりますし、もし照らし合わせても分からない時は、サンプルコードを丸々コピペして前に進むことができます！笑
最初は、分からない・出来ないと止まってしまう（学習をやめてしまう）よりは、何となく誤魔化しながらでも進んで学ぶ方が良い！と自分に言い聞かせながら学んでいました。
サンプルコード自体は、他の書籍でも配布されていることがありますが、こちらの書籍で良いと思うポイントは、サンプルコードの配布単位が細かいことです。
上の写真のとおり、書籍上での1つの説明ごとに対応するサンプルコードが分けられています。
この配布方法は、右も左も分からない私にとってとてもありがたいものでした。
サンプルコードを配布していただいても最初から最後まで全部まるっと記述されていると、どこが何に対応しているのか、どのコードで何が実現されているのか全く理解できなかったからです。
Webサイト制作を始めた時には、ページの幅などは考えずに、とりあえずWeb上に表現することが最優先です。
それから勉強を進めていくと、PCでもタブレットでもスマートフォンでもWebサイトが見られるようにするためにレスポンシブ対応を学ぶ必要性が出てくると思います。
書籍によっては、レスポンシブに言及していないものもありますが、現在Web制作を学ぶにあたってレスポンシブは必須の内容になってくるかと思います。こちらの書籍では、レスポンシブについてもしっかり記載されています。
サンプルでも自分が作ったサイトがスマートフォンでも見られるのは嬉しいことだと思います。
個人的には、こちらの観点も地味に大事でした。
ネット上を探すと、コーディング練習用のデザインデータを配布してくださっている人もちらほらいらっしゃいます。
どれに挑戦するか決めるにあたって大切なのは、練習のためなのだから何でも良いということではなく、「こんなWebサイトを作ってみたい！」と思えるデザインであることだと思います。
こちらの書籍で紹介されている練習用のWebサイトは、実際にみたことのある、本当に実在しそうなもので、モチベーションがすごく上がりました。
その上でそれらをベースに自分が好きな色を入れてみたり、フォントを変えてみたりとしながら学ぶのが私は楽しかったです。
HTMLやCSSにも歴史があって、時代とともに少しずつ新しいルールが適用されている部分もあります。
発行が少し古い書籍では、「flexbox」や「grid」といった新しい内容については記載されていないということがありますが、こちらの書籍ではしっかり学ぶことができます。
コーディング技術の書籍の場合、デザインについては全く記載されていないものもあります。こちらの書籍では、ざっくりですが、タイポグラフィやレイアウト、配色などについても記載されています。
コーディングは、（どこまで1人でするかは時と場合により異なりますが、）デザインとは切っても切り離せないものなので、デザインについても一緒に学べる書籍は、とっても良いと思います。
今回は、実際の経験も交え、「1冊ですべて身につくHTML & CSSとWebデザイン入門講座 」をご紹介いたしました。
こちらの書籍は、コーディングの勉強をすでに始めていて、知識もある方には少し物足りない内容かもしれません。
しかし、これまでご紹介してきたように、まさにこれからWeb制作の学習を始めるという方にはぴったりの書籍ではないかと思います。まさに「1冊ですベて身に付く」といった感じで幅広くWeb制作の全体像を掴むことができると思います。
ここまで読んでくださってありがとうございました。
Web制作に挑戦してみようかなと思われている方々のご参考になれば幸いです！
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design
https://spiqa.design/