webデザイナーとして内定をもらうまでに購入したHTMLとCSSの勉強に役立つ本8冊

独学でwebデザイナーになるために、教材として8冊の本を購入しました。webデザインの本は一冊当たりの金額が高いので(2000円前後します)、どの本を買うときにもネットのレビューを読んで厳選して購入していました。

webデザイナーとして内定をもらうまでに購入した8冊の本を紹介します。

走るとり
デザイン本はいい値段がするので厳選して買いましょう

「実践」して学ぶための本

スラスラわかるHTML&CSSのきほん 第2版

created by Rinker
¥2,138 (2019/08/22 23:26:07時点 Amazon調べ-詳細)

「KUJIRA Cafe」という架空のカフェサイトを制作しながらwebデザインを学んでいきます。HTMLとCSSの基礎をこれでもか!と分かりやすく解説してくれています。やさしく教えてくれるし、しっかりとレスポンシブまで理解することができます。

Progateもドットインストールもある程度やったし、ひとつwebサイトを作ってアップロードまでしてみたいという人におすすめです。

走るとり
webデザインをはじめて一番最初に買った本でした

HTML&CSSとWebデザインが1冊できちんと身につく本

created by Rinker
¥2,462 (2019/08/22 23:26:08時点 Amazon調べ-詳細)

フルスクリーン・シングルカラム・2カラム・グリッドレイアウトの4つのレイアウトが学べます。使用する写真やフォントもスタイリッシュなのでのめり込んでwebサイトを作っていけるはずです。

走るとり
『スラスラわかるHTML&CSSのきほん』の上位互換って感じです

 

HTML5&CSS3デザインブック

created by Rinker
¥2,466 (2019/08/22 23:26:08時点 Amazon調べ-詳細)

「Webページのデザイン」=「ボックスを並べること」という視点で、ボックスのレイアウト手法を徹底解説。「ブログ・ニュース系サイト」と「ビジネス系サイト」の実例サイトを、1からパーツを組み立てながら作成。スマートフォンなど多様なデバイスに対応し、使い勝手や見栄えを向上させる各種のアレンジ・テクニック。

一応定番の本というポジションらしく、「webデザイン 本」で検索すると必ずといっていいほど検索にヒットします。

webデザインのボックスという概念を徹底的に教えてくれる教本です。floatとかpositionを頻繁に使って基礎を学んでいきます。

走るとり
デザインはあれですが、しっかりボックスの基礎が学べます

 

HTML5/CSS3モダンコーディング

今回紹介した本の中でいちばん実践的でかつおしゃれなサイトがこの一冊で作れます。そして一番おすすめの本です。

本書では「スタンダードレイアウト」「グリッドレイアウト」「シングルページレイアウト」を適用した3つのサイトを作りながら、各スタイルの特徴や使い分け、コーディングテクニックを学びます。

ところどころで「このコーディングってなんぞ?」という部分が出てくるので中級者〜上級者向けという感じです。というより僕もまだまだ勉強が足りません…。

走るとり
初心者から抜けたいと思ったら買ってみましょう!

 

「読んで」勉強するための本

なるほどデザイン

created by Rinker
¥2,160 (2019/08/22 23:26:09時点 Amazon調べ-詳細)

丸顔のイラストが書かれた表紙を書店で見かけた人は多いんじゃないでしょうか。

『なるほどデザイン』はwebに限らず本や雑誌、ポスター、看板、チラシなどに共通したデザインを教えてくれます。

デザイナーがどんなことを気にかけ、どんな基準で良し悪しを判断しているのか。それを視覚的に、とても具体的にわかりやすく説明してくれる本です。実践するというよりは読んで勉強するタイプの本ですね。

走るとり
デザイナー志望じゃない人が読んでも楽しく読めるはず

 

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

created by Rinker
¥2,484 (2019/08/22 11:35:44時点 Amazon調べ-詳細)

415点の厳選した良質なWebサイトを集めた見本集です。

webサイトを作ってみたいけどアイデアが湧かないとか、そんなふとした瞬間に手元に置いておきたい本です。イケサイとかwebで見本を検索することも出来ますが、本として手元にあると何かと重宝します。

コーディングは記載がないのであくまでデザインの参考にするための本です。

走るとり
お気に入りのwebデザインを見つけておくと面接でも役立ちます

 

クリエイティブ業界を目指す人のためのポートフォリオ見本帳

created by Rinker
¥2,160 (2019/08/22 11:35:45時点 Amazon調べ-詳細)

webデザイナー以外にもイラストレーターやグラフィックデザイナーの作品集の見本も掲載されていて、デザイナーがどこにこだわりを持ってポートフォリオを作るのかを知ることができます。

初版が7年前ということでちょっとデザインが古いかな?と感じる部分はありますが、どんな作品をポートフォリオに入れようか悩んでいる人におすすめです。

走るとり
ポートフォリオはデザイナーの魂を込めた作品集の意!

ちょっぴりJavaScriptを学ぶ

確かな力が身につくJavaScript「超」入門

JavaScriptをこれから始める人にも、前に挫折したことのある人にも。
手を動かしてサンプルをひとつずつ作っていくことで、知識だけでなく、
現場で活きる、応用・実践につながる基礎力が「この一冊で」身につきます。

HTMLとCSSが一通り理解できたら次のステップJacaScriptに挑戦してみましょう。

僕もただいまJS勉強中です。道のりはまだまだ険しい。

走るとり
HTMLとCSSではないですが、JSは必ず学ぶことになる言語です

 

まとめ:たくさんレビューを読んでから買いましょう

個人的にはどれも素晴らしい本だと思いますし、買って無駄になった本はありませんでした。

とにかく何度も言いますがお値段がなかなかする本たちなので、自分にとって本当に必要な本を選んで買いましょう。書店で手に入る本たちばかりなので立ち読みしてみるのもありだと思います。

買ったらあとは実践あるのみ!手を動かしまくってスキルを高めていきましょう。

走るとり
本以外だとProgateやドットインストール、Udemyあたりがオンライン教材としてはおすすめです