みなさんこんにちは。
旅ブロガーのJonyとAi(@10to1_travel)です。
今回は、HTMLと CSSの独学にオススメの書籍を 8つ紹介します。
プログラミングって難しいイメージですが、実はHTMLや CSSだけなら書籍で簡単に学べるんです。私たちも独学です。
ベストはプログラミングスクールですが、費用が 20万円ほどしてしまいます。
なので、まずは書籍で 1,500円くらいで勉強してみるのがオススメ！
サイトデザインくらいなら HTML・CSSでカスタマイズできるます。
サイトをオシャレにして、周りのユーザーに差をつけましょう！
迷ったらまずはコレ！オススメの書籍３冊
本題に入る前に、今回紹介する 8冊の中から特にオススメの 3冊を紹介しておきます。
「8冊もあってどの本を選べば良いか分からない！」と言う時は、まずはこの 3冊を読んでみてください。
私たちのお気に入りです。
その① WEBデザインとHTML・CSSを同時に学びたいならコレ
私たちが一番最初に購入した本です。
その② HTML・CSSをガッツリ学びたいならコレ
上記を読んで、次に購入した本です。こっちの方が HTML・CSSにどっぷりでした。
その③ 一冊で HTML・CSSを網羅したいならコレ
私たちのリピート率が高かった本です。
HTML・CSSの勉強にオススメの本8選
前置きが長くなりましたが、HTML・CSSの勉強におすすめの本 8選を紹介します。
※価格はセールや、時期によって変動します。
特定の本が気になる場合はタイトル右のジャンプボタン()をクリックするとそのページレビューまで飛びます。
いちばんやさしい HTML&CSS 入門教室
| 著者 | 岩田 宇史 / 平内 裕子 |
| 価格 | 単行本：2,178円 |
| Kindle版 | 2,069円 |
| 出版日 | 2018/10/20 |
「いちばんやさしい HTML&CSS 入門教室」はWebデザイナーの岩田さんが執筆されてます。
全くの初心者の私たちでも簡単に理解することができました。
絵や図解も多いので文章を読みながら作業をするのが苦手な人にはオススメです。
Webはもちろんスマホ向けサイトについても詳しく記載されているので、これからHTML・CSSのエンジニアとして企業で活躍していきたい方は、ぜひ読んでおきたい１冊です。
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
| 著者 | Mana |
| 価格 | 単行本：2,486円 |
| Kindle版 | 2,237円 |
| 出版日 | 2019/3/16 |
「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」は 10万部を突破した HTML・CSSの大ベストセラー本です。
- 知識ゼロから体系的に学べる! HTMLとCSSの基本
- 最新の技術に対応! レスポンシブ、Flexbox、CSSグリッド
- 手を動かしながら学べる! プロの現場で役立つテクニック
- コードの知識からデザインのことまで1冊ですべて学べる!
初心者への入門と言う言葉がふさわしい本だと思いました。
ただし、最初の方は WEBデザインについて徹底的に書かれていて、HTMLや CSSについては後半。
ガッツリ HTML・CSSを学びたかった私たちにとっては、「WEBデザインの知識はいらない！」と感じてしまいました。
ある程度 HTML・CSSは理解して、そこから本格的に Webデザインを学びたい人にオススメです。
よくわかるHTML5+CSS3の教科書【第3版】
| 著者 | 大藤 幹 |
| 価格 | 単行本：3,080円 |
| Kindle版 | 2,772円 |
| 出版日 | 2018/12/3 |
「よくわかるHTML5+CSS3の教科書【第3版】」はブログ界のインフルエンサー manablogのマナブさんもおすすめする一冊です。
- HTML、CSSについて
- ページ全体の枠組み作り
- テキストや色の指定
- セレクタについて
- 画像や動画、音声、背景といったページ内の構造について
- ナビゲーションについて
- フォームやテーブルについての設定方法
- 要素の設定方法や、配置のテクニック
- スマートフォン画面への対応について
- フレキシブルボックスレイアウトとグリッドレイアウトについて
HTML・CSSについて一通りの説明がされててとても分かりやすいですが、深堀して説明して欲しいところがサラッと書かれてたり、説明がくどい部分がありました。
初心者より中級者向けと言う印象です。
よく考えたらマナブさんが上級者なので、その方からしたら初心に戻れる分かりやすい本かもしれませんね。
HTML&CSSとWebデザインが 1冊できちんと身につく本
| 著者 | 服部 雄樹 |
| 価格 | 大型本：2,508円 |
| Kindle版 | 2,508円 |
| 出版日 | 2017/7/21 |
「HTML&CSSとWebデザインが 1冊できちんと身につく本」は初めて HTMLや CSSを学び、これからサイト制作をはじめる方におすすめの本です。
- 1つのサンプルサイトで4つのレイアウト手法が学べる
- チュートリアル形式でHTML5とCSS3の基本が身につく
- 言語の解説だけでなくWebデザインの基礎についても解説
- レスポンシブデザインによるマルチデバイス対応がわかる
- 見映えのよいデザインのサンプルサイトで楽しく学べる
本当の意味でこれ一冊でまずは HTML・CSSを網羅できます。実際に初心者の私たちでも簡単な Webサイトを作ることができました。
口コミでは賛否両論ありますが、マイナスの部分込みでも十分購入する価値がある本だと感じました。
スラスラわかるHTML&CSSのきほん 第2版
| 著者 | 狩野 祐東 |
| 価格 | 単行本：2,178円 |
| Kindle版 | 1,960円 |
| 出版日 | 2018/4/14 |
「スラスラわかるHTML&CSSのきほん 第2版」はこれからWeb制作を始める人、HTML・CSSを学び直したい人にもおすすめです。
- パソコンとスマートフォンに対応したサイトが作れる！
- HTMLとCSSがまったく初めての人でも大丈夫！
- 実際の画面と見比べながら作業できる！
- レスポンシブデザインの基本がしっかりわかる！
- 作成したサイトを公開する方法まで解説！
HTML・CSSは何となく分かるけどもっと詳しく理解し、ブログデザインをカスタマイズできるまで行きたいと言う人にオススメですね。
とても分かりやすいですが、口コミでもあったように、あまりにもスラスラ読めて途中で、「あ、復習しないと！」ってなります。
読み方を間違えるとサラッと最後まで読んで後には何も残らないことになってしまうかもです。
手を動かしながら読むのがオススメです。
ああしたい、こう変えたいが手にとるようにわかる CSS基礎
| 著者 | 赤間 公太郎 / 原 一宣。 藤川 麻夕子 / 山本 和泉 |
| 価格 | 単行本：2,420円 |
| Kindle版 | 2,200円 |
| 出版日 | 2015/7/17 |
「ああしたい、こう変えたいが手にとるようにわかる CSS基礎」は CSSの仕組みや書き方、考え方をていねいに解説した入門書です。
HTMLと CSSの書き方や使い方だけではなく、「変えたい場所の探し方」が分かる一冊です。
- HTMLとCSS
- CSSの基本
- Webをデザインする準備
- 文字（テキスト）
- 色（カラー）
- 装飾
- レイアウト
- 見出しを装飾する
- CSSを適用する
- Webサイトの装飾を変える
- ブログのCSSを変える
個人的には自分の学びたいことが目次でしっかり分かる分かりやすさが良かったです。
初心者に優しいカラー印刷です。
本自体のデザインは女性向けかなと感じました。
ポチップ
作りながら学ぶ HTML/CSSデザインの教科書
| 著者 | 高橋 朋代 / 森 智佳子 |
| 価格 | なし |
| Kindle版 | 2,772円 |
| 出版日 | 2013/12/13 |
「作りながら学ぶ HTML/CSSデザインの教科書」は中〜上級者向けの本です。これからサイトを作りたい人におすすめです。
初心者に少し毛が生えた人にオススメかもです。
上記の本に比べるとややレベルが上がる印象ですよ。
また、2013年の本なので内容が少し古いかなと感じました。ですが、HTML・CSS中級者には抜群に成長できる本です。
この本は現在 Kindleのみで読むことができるので、私たちのように海外に在住してる電子書籍ユーザーにオススメです！
プロとして恥ずかしくない 新・CSSデザインの大原則
| 著者 | 大藤 幹 / 北川 貴清 / きむら あつとし 境 祐司 / 高橋 としゆき / 錦織 幸知 長谷川 広武 / 矢野 みち子 |
| 価格 | 単行本：2,750円 |
| Kindle版 | 2,420円 |
| 出版日 | 2015/7/2 |
「プロとして恥ずかしくない 新・CSSデザインの大原則」はCSSの基本文法から、各プロパティの詳細、迷いやすいCSSによる配置の仕組みまで、初学者の方に必要な基礎的な情報を網羅しています。
- CSSの基本
- CSSによる装飾
- CSSによる配置
- CSSによるページレイアウト
- CSSによるパーツの作り込み
- CSSスプライトや透過PNG画像などのテクニック
こちらは私たちは購入しませんでした。
理由は初級者にはやや難しいと内容(中〜上級者向け)の本だったからです。
Webデザイナーや、ある程度 HTML・CSSが分かる人には応用と更なるレベルアップができる本なので、オススメかもです。
ポチップ
HTML・CSSとは？【前提知識】
まず、書籍を紹介する前に、HTMLと CSSについて理解しておく必要があります。
それにより、あなたにピッタリの書籍を選ぶ目安になります。
HTML・CSSとは、サイトで言うと、デザインをカスタマイズする時に必要なものです。
よく「コピペだけ」でコードが紹介されてますね。
HTMLとは？
HTML( HyperText Markup Language )とは、ハイパーテキストを記述するためのマークアップ言語の 1つです。
出典: フリー百科事典『ウィキペディア（Wikipedia）
分かりやすくするとサイトを構築してるテキストの塊のようなもので、ウェブサイトの裏側とも言われてます。
映画マトリックスに緑の文字列がたくさん出てきますね？あれが HTMLです。
CSSとは？
CSSとは、Cascading Style Sheetsの略で、スタイルシートとも呼ばれています。HTMLや XMLの要素をどのように修飾するかを指示する仕様のひとつです。
出典: フリー百科事典『ウィキペディア（Wikipedia）
HTMLが、見出しやヘッダ情報などWebページの文書構造を形作るための言語であるのに対し、CSS言語は文書構造にデザインを施し、見栄えを整える役割を担っています。
HTML・CSSを本で勉強するメリット
HTML・CSSを勉強するメリットは以下の通りです。
- 理想のサイトが作れる
- HTML・CSSの記事が書ける
- エンジニアの入り口に立てる
ひとつずつ紹介していきます。
理想のサイトが作れる
私たちが HTML・CSSを勉強し始めたきっかけは、 WordPressの有料テーマ THE THOR(ザ・トール)のカスタマイズがしたかったからです。
HTML・CSSが分かれば自分の理想のサイトに仕上げることができます。
デザインはもちろん、ホバーエフェクトなども唯一無二のサイトを作れます。
ブログに訪問したユーザーさんに「何のテーマ使ってるんですか！？」って聞かれたいですよね。
HTML・CSSの記事が書ける
HTML・CSSを習得すれば、そのノウハウ記事を書くことができます。
カスタマイズ案、問題解決などなど。
記事のネタも増えますし、そこからプログラミングスクールへの誘導も可能です。
一気にブログのネタの幅が広がりますね。
エンジニアの入り口に立てる
HTML・CSSはエンジニアの第一歩です。
これをきっかけにエンジニアになることもできます。
余談ですが、エンジニアの年収は一般職業の平均より 169万円も高いと言うデータが出てます。
稼げるのは間違いないですね。
HTML・CSSを本で勉強するデメリット
HTML・CSSを勉強するデメリットも紹介しておきます。
- 初期費用
- 難しい
- 時間がかかる
- HTML・CSSだけではエンジニアにはなれない
初期費用
本を購入して勉強するにもプログラミングスクールに通うにも初期費用がかかります。
まあそもそも何かを始める時は必ず初期費用はかかるので、デメリットっと言うことでも無いですが。
とは言え本を購入するにもユニクロ 1着 購入するのを我慢すれば良いだけですし、プログラミングスクールも飲み会を月 3回我慢すれば良いだけです。
1ヶ月の飲み会 3回分で年収が 169万円アップするなら投資の価値は十分ありますね。
HTML・CSSは難しい
イメージ通りですが、簡単ではありません。
コードを間違えると不具合を起こしますし、私たちはひとつのカスタマイズをするのに 2時間くらい手こずります。
ですが、コツと法則さえ分かればさほど難しくはありません。
だからこそ自分に合った読みやすい本を選ぶことをおすすめします。
購入して「分かりにくい・読みにくい」などあればそのまま続けず、すぐに他の本を購入して勉強してみましょう。
時間がかかる
上記とほぼ同じですが、勉強の時間はとてもかかります。
本と画面を往復しながら勉強してると気づくと 5時間くらいかかってます。
ですが 5時間 勉強しなければいけないわけではありません。
私たちは、勉強が楽しくて気づいたら 5時間経ってただけです。
それくらい楽しいです。
HTML・CSSだけではエンジニアにはなれない
もちのろんですが、HTML・CSSだけではエンジニアになるのはかなり稀です。
エンジニアになるにはHTML・CSSの他にも JavaScriptや jQueryなどの知識も必要になります。
HTML・CSSだけじゃ、ちょっとしたサイトのデザイン加工くらいしか依頼は来ないでしょう。
ただ、ブログのデザインをカスタマイズしたいだけなら HTML・CSSで十分です。
そこからエンジニアに繋げるなら本で勉強→プログラミングスクールと進むのがオススメです。
HTML・CSSを本で勉強する際の4つのポイント
HTML・CSSを本で勉強する際のポイントを 4つ紹介します。
- 最低 1ヶ月は継続すること
- 電子書籍ではなく「紙の本」で勉強する
- 最後まで読める、もしくはずっと読める本を選ぶ
- 実際に手を動かしながら勉強する
ひとつずつ説明していきます。
最低 1ヶ月は継続すること
まずは最低でも 1ヶ月は持続しましょう。
本を読んだだけで理解した気になってしまいがちですが、HTML・CSSはそんな簡単ではありません。
HTML・CSSで Webをデザインすることがゴールなら、プログラミングスクールでは少なくとも 30時間 前後の授業を行うそうです。
プロの講師が教えて 30時間です。初心者がしかも独学で学ぶなら最低でも 1ヶ月は必要です。
その 1ヶ月が不安なら最初からプログラミングスクールで短期 集中型にしたほうが、時間を無駄にしないかもですね。
電子書籍ではなく「紙の本」で勉強する
電子書籍で勉強するより「紙の本」がおすすめです。私たちがそうなのですが、まずタブレットやスマホだと他のアプリや通知に目移りして集中できません。
さらに、コードが崩れたり、図が見にくかったりするのでやはり本がおすすめです。
最後まで読める、もしくはずっと読める本を選ぶ
上記でも説明しましたが、本は「自分にあったもの」を選ぶことをおすすめします。
勉強の効率や維持できるかどうかに関わってきます。
- 字が多いのが良い
- 図が多いのが良い
- カラーが豊富
- 文字が大きい
- 本がおしゃれ
- 内容が面白い
人それぞれ好みはありますが、もし自分に合わない本を購入してしまってもそのまま読み進めず、ちゃんと自分に合った本を選び直すことをオススメします。
実際に手を動かしながら勉強する
自ずとそうなりますが、本を見て→画面を見て→また本を見て→画面を見てのシャトルランです。
サイトをいじりながら勉強したほうが吸収力も理解力もはるかに早いです。
HTML・CSSの勉強には語学力は必要？
よく「HTML・CSSの勉強には語学力が必要」と聞きます。HTML・CSSは全て英語だからです。
しかし私たちはそうではないと思います。
Round and thicken the line. From there, change the color to red and make it a dotted line.
こんな英文を打ち込むわけではありません。
- ライン
- ドット
- カラー
- バックグラウンド
- ブロック
英語が分からなくてもこれくらいは聞いたことありますよね？
もちろんレベルが上がっていけば聞いたことのない単語も出てくるかもですが、基本的にはこのレベルの単語を使います。
これは HTML・CSSを勉強しながら覚えていけるので同時に英語を勉強する必要は無いと思います。
本で勉強するのが苦手なあなたへ「0円スクール」と言う近道
「本を読むのが苦手、続けていけるか不安、誰かに教わりたい」そんなあなたにはプログラミングスクールがおすすめです。
TechAcademyは初心者でも分かりやすく、エンジニアの道に近づけるウェブプログラミングスクールです。
- 自宅でできる
- HTMLと CSSを最速で学べる
- エンジニアになるためのノウハウが学べる
- 無料体験が 1週間もある
TechAcademyの無料体験カリキュラムを見る限り、Webアプリケーションの基礎を学べるようです。
無料なのでとりあえず試してみるのが良いかなと思います。
海外在住者は「電子書籍」で解決！
この記事を読んでくれてる人の中には私たちのように海外在住ブロガーもいらっしゃると思います。
そんなあなたには電子書籍で勉強するのがおすすめです。
電子書籍で有名なのは Amazonの Kindleですね。
私たちも購入を考えたのですが、「海外対応してない」、「海外在住は 5冊までの制限がある」などのレビューを目にして購入を止めました。
とは言え友人はそんなこと全くないと、何冊も購入して読んでるので人によるみたいですね。
すでにお持ちの方は電子書籍で勉強しましょう。
Amazonプライムにまだ登録してない方は、今 30日間の無料体験をすることができるので試してみてください。
HTML・CSS おすすめの本8選 まとめ
本日は HTML・CSSのおすすめの本を紹介しました。
今回紹介した 8つの書籍をまとめておきます。
※価格はセールや、時期によって変動します。
自分に合った本もしくは方法で、オリジナルデザインのブログを作りましょうね！
最後まで読んでいただきありがとうございます。
おわり