前回無料で学べる範囲でHTMLとCSSを学びました。
今回は入門編書籍で学習してみましたので、同じく書籍でHTMLとCSSを学習したいという方は参考にしてみてください。
私が選んだ本は「1冊ですべて身につくHTML&CSSとWebデザイン入門講座」です。
この本を選んだ理由
まず私の学習目的として、基礎的なことは知っているので追加で以下の点を知りたいということ
- flexboxとgridによるレイアウトのやり方
- レスポンシブデザインのやり方
他にもっと高評価だったり、おすすめされていたりする書籍もたくさんあったのですが、レイアウトに旧来のfloatによる回り込みが使われているものばかりでした。
調べてみるとflexboxは2015年頃、gridは2018年頃に新しく出てきた方法なので、高評価であっても古い本にはそりゃ載ってないわけですね。
floatが悪いというわけではないので、それはそれでいいんですが、せっかく新しく勉強するならflexboxとgridを主に使ったデザイン方法を知りたいなと。
その目的にかなった書籍が「1冊ですべて身につくHTML&CSSとWebデザイン入門講座」でした。
実際に勉強してみて
良書です。
一章～三章まで
まず前半の第一章でwebサイトを作成する一通りの流れについて解説されており参考になります。
ワイヤーフレームやデザインカンプについて知っておくのは実際にお仕事を受ける際には必須の知識です。
第二章と第三章の約120ページを使ってHTMLとCSSの基礎的なことも学習できるので、いきなりこの本から始めても問題ないです。
四章以降
肝心の実践編ではフルスクリーンのサイトと2カラムのサイトを作りながら学んでいきます。
サンプルがダウンロードできるので使われている画像などはそこからそのまま利用できます。
本に書かれている通りにしていけばそこそこのサイトが出来上がってニヤリとできます。
最後の章ではgoogle mapやyoutube埋め込みなど外部サイトとうまく連携してサイトを作っていく方法も紹介されています。
今はSNSとの連携が大事ですし、外部サイトと連携するサンプルを学べるのはプラスになります。
この本がおすすめな人
私がこの本を選んだのと同じ理由ですが
- flexboxとgridによるレイアウトの実例を知りたい
- レスポンシブデザインのやり方を知りたい
という方には現時点で一番おすすめできると思います。
何もわからないけどとりあえずHTMLとCSSによるwebデザインの方法を一通り知りたいという人もOKです。
一つ言えるとしたら、書かれている通りにやってうまくデザインできることを確認したら、何をどう指定したからそういう表示になっているという仕組みの理解に勉強時間を割く方がいいです。
そうしないとサンプルと全く同じ型のサイトは作れるようになりますが、少しでも別の型のサイトを作ろうとしたら何をどうすればいいかわからない状態となります。
それではせっかく書籍を購入してまで学習した意味がありません。
まずは書かれている通りやってみるだけでOKです、次はその指定がどういう意味でどういう結果になるかを理解します。これでどんな型のサイトも組める基盤が身に付きます。
この本に合わない人
こちらの本は入門編～サンプルサイトをいくつか作って基礎を理解していく、という内容なので既にいくつかのパターンのサイトを自分一人で考えてコーディングできるという人には必要ありません。
flexbox、grid、レスポンシブともに一つの方法としてそのやり方があるということを紹介してくれているだけなので、これさえ読めば後は自分で理解する努力をしなくてもどんなサイトも作れるようになると期待している方にも向いていません。
サンプルファイルの不具合？
これは自分の勘違いかもなんですが、サンプルファイルにあるとされている場所にHTMLはあるけどCSSが見当たらないところが結構あったんですよね。
その場合はWCBCafeというフォルダの中にあるcssフォルダの中にあるstyle.cssが完成品なので、そこから該当箇所コピペして持ってくるという対応をしました。
「コピペはだめだ、自分で書け」という人がいるかもですが、こんなの自分で一から全部打っている人はプロにもいません。
無駄なタイプミスでうまく動かなくて時間をつぶすのは勿体ないです。深堀して理解するのはまずコピペして動かしてからでOKです。
レスポンシブデザインについて
この本だけじゃなくすべてに当てはまりますが、レスポンシブデザインについて基本的なことは学べます。
ただおそらく実際に他のサイトを作ろうとした場合に、何をどういう風にしてレスポンシブにするかは自分で考える必要があります。
この本では一つの解決方法として紹介されている方法を理解し、その他のサイトではどういう風に対応すればいいかを追加実戦で学んでいく必要があります。
とはいえ基本は書かれているので十分です、レスポンシブデザインできるようになりたい人も参考になります。
勉強し終えてようやくスタートライン
色々な入門編書籍を調べ、実際に何冊も書店で見てから一冊を選んで購入し勉強を終えましたが、一つ気づいたことがあります。
それはどの書籍で勉強してもその書籍のサンプルと全く同じ型のサイトは作れるようになる、でもそれだけということです。
勉強を終えればどんなサイトでもつくれるようになる！そんな期待を抱いてしまいがちですが、実際には作り方の一つの方法を知ることができるだけです。
CSSでこの指定をしたらなぜこういう表示になったのか、そのプロパティはどんないいなのかは自分でそこを起点に深堀して検索して調べて身に着ける必要があります。
実はもっと大事なこと
これで基本的なサイトの作り方はわかったんですが、じつはそれ以前に超重要なことがどの入門書でも勉強できないんですよね。
それはサイトを作るにあたりどんな情報をどこに載せどういうデザインにするかという一番最初の工程のやり方がわからないということです。
どの入門書でも当然ですが本の通りに進めて既にデザインは済んでいるサイトを作るだけです。
ここにこの画像を置いて、CSSではこういう指定にしてというのが書かれているので誰でもできるわけです。
実際のサイトを作ることを想定する
例えばあなたが街の花屋さんのwebサイトを作ってくださいとお仕事の依頼を受けたとします。
デザインが出来上がっていればコーディングだけすれば何とかなるかもですが、正直今の時代デザイナーもコーディングくらいできます。
デザインができなくてコーディングだけできるエンジニアの需要は減少していくと思います。。
これからwebサイトを作ることでお金を稼いでいこうとしている方は、次にwebデザインの方法をしる必要があります。
webデザインとは？
こう思う人は多いですが、webデザインに漫画のような絵が描ける必要は一切ありません。
ウチの会社でも絵が描けるデザイナーは少数派です。
大事なのは何をどこに配置すればいいかということを考えられるスキルで、それは先天的なセンスじゃなく知識を得て学習することで後天的に身に着けられるスキルです。
次はwebデザインの勉強だ！
ということで次はwebデザインの勉強をスタートします。
じつはもう既に良さそうな書籍を購入してきてあるので、学習を終えたらまた記事にして紹介させていただきますね。