考える人Webデザイナーのコーディング勉強に役立つおすすめ本ってないかな？
今回はコーディングが苦手だった私が、挫折せずに習得する上で役立ったおすすめ本をご紹介します。
メインは本の紹介ですが、コーディングの勉強には動画講座やオンラインサービスを活用することで、より深く理解できると思います。
いづれの場合でも、ただ眺めるのではなく、手を動かしてコードを書くことが大事ですよ。
今回は本と併用するとより理解が深まる講座やサービスも合わせてご紹介しますね。
では早速見ていきましょう！
あおいこの記事を書いた人
あおい（＠aoidesign）
2018年からWebデザインを学習。
副業時代を経て現在はフリーのLP専門デザイナーとして活動。
LP制作実績は200件以上。
メンターや講師の仕事も行う。
Webデザインのコーディング学習に役立ったおすすめ本
コーディング関連の本は、大きく4つに分けられます。
- 基礎知識を学ぶ本
- 実践演習ができる本
- 知識を補強したり、整理する本
- その他（JavaScript、WordPressなど）
あおい今回はこの4分野において、レベル別におすすめ本を紹介していきます！
今回紹介する本一覧
- 【基礎学習】1冊ですべて身につくHTML & CSSとWebデザイン入門講座
- 【基礎学習】これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本
- 【実践演習】ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座
- 【実践演習】作って学ぶ HTML＆CSSモダンコーディング
- 【実践演習】プロの「引き出し」を増やす HTML+CSSコーディングの強化書
- 【知識補強】武器になるHTML
- 【知識補強】現場のプロから学ぶ CSSコーディングバイブル
- 【jQuery】jQuery標準デザイン講座
- 【jQuery実践】動くWebデザイン アイディア帳 実践編
- 【WordPress】HTMLサイトをWordPressにする本
【基礎学習】1冊ですべて身につくHTML & CSSとWebデザイン入門講座
HTML/CSSをこれから学ぶ初心者に、最初におすすめしたい一冊。
シリーズ40万部を突破したベストセラーで、HTMLとCSSの基本から実践までを丁寧に解説しています。
頻繁に内容がアップデートされており、モバイルファーストやWebP、CSS Gridなど、最新の知識やスキルもカバーされています。
後半部分では、実際に手を動かしてWebサイトを作っていきますよ。
あおいオシャレなサイトなので、作るのが楽しくてテンション上がります↓
全体を通じて解決が優しいので、挫折のリスクは少ないです。
しかし、どうしても難しいと感じたり、文字を読むのが苦手な方には、動画講座やオンライン学習サービスを併用することをおすすめします。
おすすめ動画講座
本ではなく動画で学びたい方は、Udemyにあるこちらの講座がおすすめです。
BootstrapとJavaScriptは飛ばして、HTML/CSSだけやる感じで大丈夫ですよ。
おすすめ学習サービス
プロゲートは、オンラインのプログラミング学習サービスです。
あおい私はプロゲートのおかげで、コードの苦手を克服しました。
手を動かしながら楽しく学べるのがメリットです。
初歩的なコードから一つ一つ進めていくことで、毎回のレッスンで「実際にどんなコードを書くと、どう画面に出力されるのか？」を確認しながら学べます。
無料で利用できますが、レッスンが進むと有料（月額1,490円（税込））になります。
まずはHTML&CSSコースを2周ほど試してみると、コードにかなり慣れるはずです！
【基礎学習】これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本
一冊目で紹介した「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」と内容が重複していますが、こちらも初心者向けにHTML/CSSとWebサイト制作をゼロから学べる本です。
あおい一冊目と同様に、最新のWebスキルが紹介されており、手を動かしながら学べる点も魅力です。
気に入った方を選んで購入すると良いでしょう！
こちらでは4つのサイトが作れます↓
【実践演習】ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座
一冊目で紹介した「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」の演習編になります。
基礎学習が終わった状態で、さらにスキルを強化したい方向けです。
こんな内容が学べる！
- 最新のモダンコーディング
- 自由な装飾や表現の作り方
- 表やグラフ、アニメーションの作り方
- 効率の良いコードの記述法など…
あおい本書では5つのサイトを例に、そこで使われるテクニックを学んでいきます↓
【実践演習】作って学ぶ HTML＆CSSモダンコーディング
最新のコーディング技法を、手を動かしながら理解し、習得していく本です。
基礎学習が終わった後にさらにスキルを磨きたい方におすすめです。
こんな内容が学べる！
- モバイルファースト（スマホ表示を優先する考え方）
- レスポンシブデザイン（PC・ダブレット・スマホ表示）
- FlexboxとCSS Grid
- CSS関数（clamp、calc、min、maxなど）
例えば、
悩む人このレイアウトはFlexboxでいいのか？それとも他の方法があるのか？
悩む人この場合は％を使うべきか？それともcalcを使った方が良いのか？
このように曖昧になっているスキルに対し、分かりやすく解説してくれます。
本書の出版社であるエビスコム実践シリーズは、どれも質が高くおすすめです。
電子書籍になりますが、Kindle unlimitedを使うと無料で読めるので、ぜひチェックしてみてください。
Kindle unlimitedとは？
Amazonの電子書籍Kindleの読み放題サービスです。
200万冊以上の本をお好きな端末で利用できます。
30日間の無料体験が可能で、無料期間内に解約もできます。
＼ 200万冊以上を好きな端末で読み放題 ／
【実践演習】プロの「引き出し」を増やす HTML+CSSコーディングの強化書
こちらも基礎学習が終わってる方向けの本です。
初心者を脱して、コーディングの腕をグングン上げたい方におすすめです！
あおい本書はエンジニアのしょーごさんがおすすめしていたので、私も購入しました。
私はしょーごさんが作った教材のおかげでコーディング力を一気に底上げできたので、こちらもぜひ参考にしてみてください↓
しょーごさんの教材レビューはこちら
実務で使えるテクニックや考え方が多く、大変勉強になります。
例えば、片側だけブラウザ端まで広がる背景の作り方↓
あとはフォーム作成で頻出するラジオボタンや選択ボタンの正しい作り方↓
あおい前述の2冊より少し難易度が上がりますが、この一冊をマスターすれば、かなり実力をアップできますよ！
【知識補強】武器になるHTML
HTMLを正しく理解し、記述できるようになる本です。
基礎学習が一通り済んだ方におすすめですが、まったくの初心者でもOKです。
ただし、ある程度コーディングができるようになってから読むと、学びが多いと思います。
本書を推薦する理由は、以下の点を考慮しながら「正確なHTML」を書くための知識が手に入るからです
- アクセシビリティ
- ユーザービリティ
- パフォーマンス
- SEO対策
あおい私も経験がありますが、何となくで済ませている記述は意外と多いものです。例えば、alt属性の書き方や、<br>、<small>、<dl>タグの正しい使い方など。
解説が細かく丁寧で、とても良質な本だと感じました。
かわいい吹き出し解説が親しみやすく、コードの具体例も豊富に掲載されていますよ↓
【知識補強】現場のプロから学ぶ CSSコーディングバイブル
CSS設計や実装テクニックについて書かれた本です。
基礎学習が終わった状態で、さらにCSSの技術を磨きたい方におすすめです。
こんな内容が学べる！
- CSS設計（OOCSS、BEM、SMACSS法）
- SaSSの基本、機能、書き方
- コーディング作業の基本や考え方
- コーディング実装テクニック
あおいコーダー向けの内容なので、見た目のデザイン＋簡単なコーディングのみを行うデザイナーには、ここまでの知識は必須ではないかもしれません。
ただし、Sassや実践的なコーディング技術を深く学びたい方には非常に有用です。余裕がある方はぜひ読んでみてください。
【jQuery基礎】jQuery標準デザイン講座
HTML/CSSの基礎が身についたあとは、jQueryの勉強に進みましょう。
そもそもjQueryとは？
簡単にいうとページに動きをつけるために使われるライブラリ（＝コードの集まり）です。
具体的にいうと、こんな実装ができます。
- 写真のスライドショー
- メニューの開閉
- ページ右下のTOPへ戻るボタン
- よくある質問で使われるアコーディオン
jQueryは、JavaScriptというプログラミング言語のライブラリ（＝コードの集まり）です。
JavaScriptのコードを簡単に呼び出せ、短い記述で済むため非常に便利です。
そんな理由から、Webの世界ではjQueryが頻繁に使われます。
あおい私の感想として、この本は少し難しく感じました。
なので、まずはプロゲートjQuery初級から上級編を終わらせてから取り組むのがいいですね↓
ちなみに、jQueryのコードは1から自分で書けるようになる必要はありません。
なぜなら実務で使いたいとなった時は、
- ネットにある解決記事のコードをコピペする
- チャットGPTに命令してコードを書いてもらう
このように得たコードを自分用にカスタマイズして使うことが多いです。
あおい私は実務で、jQueryを一から書くことはないです。
上記の方法で得たコードを、数字やクラス名を少し変更して利用することが多いです。
なので、Progateや本で「こんな感じのことができるんだ！」と理解を深める程度で進めて大丈夫です。
【jQuery実践】動くWebデザイン アイディア帳 実践編
サイトでよく見かける動きを集めた「現場で使える実践サンプル集」です。
本書に掲載されているコードはダウンロード可能で、コピー＆ペーストで簡単に利用できます。
あおい私はアイディア探しにこの本を活用しています。
本で紹介している動きを実際に使った「架空のサンプルサイト」を8つダウンロードできます↓
私は実務で「サイトの動きが物足りないなー」という時に、この中から良さそうな動きを見つけ、コピペして使ってる感じですね。
勉強用として読むよりも、実務で積極的に活用することをおすすめします。
姉妹本もおすすめです↓
こちらはハンバーガーメニューやスライドショーといった、サイト制作で頻出する動きの解説がメインです。
【WordPress】HTMLサイトをWordPressにする本
コーディングしたデータを、WordPressに変換する一連の流れを解説した本です。
WordPressに変換とは？
WordPressは世界中で使われているコンテンツ管理システム（CMS）のこと。
日本のサイトの約7割がWordPressで作られていると言われます。
WordPress化するメリットは、管理画面を使って簡単に更新や運用ができる点です。HTMLを書き換える必要がなく、納品後も自分で修正・更新が可能です。
そのため、「WordPress化して納品して欲しい！」という依頼が非常に多いです。
WordPress化のスキルを持っていると、より幅広く高単価な案件を受注できるメリットがあります。
この本は、初めてWordPress化を行う初心者におすすめの一冊です。
テスト環境の設定からWordPress化し、ページを公開するまでの一連の流れを全て体験できます。
流れに沿って操作していけば良いため、難しくはありません。
あおい個人的に好きなサンプルデータ（海亀がかわいい企業サイト）だったので、楽しんで作業できました↓
特典として、ポートフォリオサイトを作成できるデータや、実務で活用できるWordPress更新マニュアル例もついてるのが嬉しいです↓
まとめ：本を活用してコーディング力を強化しよう！
本記事で紹介した書籍は、いずれも多くのWeb制作者から支持されている良書です。
私自身もこれらの本に大変お世話になりました。
実践演習の本は、今でも時々読み返し、コーディング力の強化に役立てています。
また、最新のコード知識を得るために、新しい本を購入して勉強することもあります。
コーディングの世界は常にアップデートが激しいので、継続的な学びが大切ですね！
今回紹介した本おさらい
- 【基礎学習】1冊ですべて身につくHTML & CSSとWebデザイン入門講座
- 【基礎学習】これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本
- 【実践演習】ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座
- 【実践演習】作って学ぶ HTML＆CSSモダンコーディング
- 【実践演習】プロの「引き出し」を増やす HTML+CSSコーディングの強化書
- 【知識補強】武器になるHTML
- 【知識補強】現場のプロから学ぶ CSSコーディングバイブル
- 【jQuery】jQuery標準デザイン講座
- 【JavaScript実践】動くWebデザイン アイディア帳 実践編
- 【WordPress】HTMLサイトをWordPressにする本
