ブログデザインが楽しくなる!HTML・CSSの勉強にオススメの本8冊

みなさんこんにちは。

JonyとAi(@10to1_travel)です。

HTML・CSSを使って、周りのブログと差を付けたオリジナルデザインのサイトを作りたいあなたへ。

ユーザーの滞在時間の増減や、リピート率の向上には「ブログデザイン」が大きく関わっています。

印象強いデザインにするだけで PV数が上がります。
それだけ「ブログデザイン」は大切なんです。

そこで本日はブログの PV数に深い関係を持つブログデザインを自分好みにカスタマイズできる HTML・CSSの勉強におすすめの本を紹介します。

 
Jony
ブログデザインで滞在時間が上がったりするもんな!
 
Ai
読者の記憶に残るデザインにすればリピーターも増えて PV数も増えるもんね!

本の紹介だけでなく、後半も読みつ進めることによって、
本を購入すべきかどうかもはっきりするのでぜひ最後までご覧ください。

HTML・CSSとは?

それでは後半は、HTMLや CSSについて詳しく説明していきます。

ブログのテーマやデザインをカスタマイズする時に必要なものです。
よく「コピペだけ」でコードが紹介されてますね。

HTMLとは?

HTMLとは?
<HTMLとは?/>

HTMLとは、HyperText Markup Languageは、ハイパーテキストを記述するためのマークアップ言語の1つです。
引用:https://ja.wikipedia.org/wiki/HyperText_Markup_Language

分かりやすくするとサイトを構築してるテキストの塊のようなもので、ウェブサイトの裏側とも言われてます。

映画マトリックスに緑の文字列がたくさん出てきますね?
あれが HTMLです。

CSSとは?

CSSとは?
<CSSとは?/>

CSSとはCascading Style Sheetsの略で、スタイルシートとも呼ばれています。HTML や XML の要素をどのように修飾するかを指示する仕様の一つです。
引用:https://ja.wikipedia.org/wiki/Cascading_Style_Sheets

HTMLが、見出しやヘッダ情報などWebページの文書構造を形作るための言語であるのに対し、CSS言語は文書構造にデザインを施し、見栄えを整える役割を担っています。

めちゃくちゃ簡単に言うと、デザインを整えたりするコードです。

HTML・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を勉強するデメリットも紹介しておきます。

  • 初期費用
  • 難しい
  • 時間がかかる
  • HTML・CSSだけではエンジニアにはなれない

初期費用

本を購入して勉強するにもプログラミングスクールに通うにも初期費用がかかります。

まあそもそも何かを始める時は必ず初期費用はかかるので、デメリットっと言うことでも無いですが。

とは言え本を購入するにもユニクロ 1着 購入するのを我慢すれば良いだけですし、プログラミングスクールも飲み会を月 3回我慢すれば良いだけです。

1ヶ月の飲み会 3回分で年収が 169万円アップするなら投資の価値は十分ありますね。

※0円のプログラミングスクールという近道
最近はプログラミングスクールも増えており、最初の基礎ベースを身につけるならTechAcademyの方が早いかもです。TechAcademyは1週間の無料体験があるので、これを使ってWebアプリケーションの基礎を学ぶのもありですね。
» TechAcademyの無料体験はこちら

HTML・CSSは難しい

イメージ通りですが、簡単ではありません。

コードを間違えると不具合を起こしますし、私たちはひとつのカスタマイズをするのに 2時間くらい手こずります。

ですが、コツと法則さえ分かればさほど難しくはありません。

最初が肝心です。

だからこそ自分に合った読みやすい本を選ぶことをおすすめします。

購入して「分かりにくい・読みにくい」などあればそのまま続けず、すぐに他の本を購入して勉強してみましょう。

時間がかかる

上記とほぼ同じですが、勉強の時間はとてもかかります。

本と画面を往復しながら勉強してると気づくと 5時間くらいかかってます。

ですが 5時間 勉強しなければいけないわけではありません。
私たちは、勉強が楽しくて気づいたら 5時間経ってただけです。

勉強し始めるとそれくらい楽しいです。

ただ、ある程度の空き時間を作ってから勉強した方が良いかもしれませんね。

HTML・CSSだけではエンジニアにはなれない

もちのろんですが、HTML・CSSだけではエンジニアになるのはかなり稀です。

エンジニアになるにはHTML・CSSの他にも JavaScript jQueryなどの知識も必要になります。

HTML・CSSだけじゃ、ちょっとしたサイトのデザイン加工くらいしか依頼は来ないでしょう。

ただ、ブログのデザインをカスタマイズしたいだけなら HTML・CSSで十分です。

そこからエンジニアに繋げるなら本で勉強→プログラミングスクールと進みましょう。

HTML・CSSの勉強にオススメの本8選

HTML・CSSの勉強におすすめの本 8選を紹介します。

作品価格
いちばんやさしい HTML&CSS 入門教室 2,178円
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 2,486円
よくわかるHTML5+CSS3の教科書【第3版】 3,080円
HTML&CSSとWebデザインが 1冊できちんと身につく本 2,508円
スラスラわかるHTML&CSSのきほん 第2版 2,178円
ああしたい、こう変えたいが手にとるようにわかる CSS基礎 2,420円
作りながら学ぶ HTML/CSSデザインの教科書 2,772円
プロとして恥ずかしくない 新・CSSデザインの大原則 2,750円

上から順番に説明していきます。

特定の本が気になる場合はタイトル右のジャンプボタン()をクリックするとそのページレビューまで飛びます。

いちばんやさしい HTML&CSS 入門教室

いちばんやさしい HTML&CSS 入門教室

いちばんやさしい HTML&CSS 入門教室

著者岩田 宇史 / 平内 裕子
価格単行本:2,178円
Kindle版2,069円
出版日2018/10/20

「いちばんやさしい HTML&CSS 入門教室」はWebデザイナーの岩田さんが執筆されてます。

全くの初心者の私たちでも簡単に理解することができました。

絵や図解も多いので文章を読みながら作業をするのが苦手な人にはオススメかもです。

Webはもちろんスマホ向けサイトについても詳しく記載されているので、これからHTML・CSSのエンジニアとして企業で活躍していきたい方は、ぜひ読んでおきたい1冊です。

口コミ

C.Kさん(女性)
全くの初心者な私でも理解出来ました!
そして何より楽しい!
キンドル版で購入したので、スマホでどこでも読めたので早く読み終えることが出来ました!

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

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冊ですべて学べる!

初心者への入門と言う言葉がふさわしい本だと思いました。

図解も多くとても分かりやすいですが、「HTML・CSS自体も知らない」くらいの初心者さんにはちょっと難しいかなと感じます。

ある程度 HTML・CSSは理解して、そこから本格的に Webデザインを学びたい人にオススメです。

特典:2021/05/12(水)23: 59までにご購入いただくと、「CSS Flexbox チートシート データ」の特典が受けられます。

口コミ

I.Iさん(男性)
初学者向けとして有名なHTMLとCSSの本を3冊所持していますがその中で最も「入門書」という言葉がふさわしい。
他の本に比べ字が多くなく、サンプルサイトはオシャレで、作っていてとても楽しかった。

よくわかるHTML5+CSS3の教科書【第3版】

よくわかるHTML5+CSS3の教科書【第3版】

よくわかるHTML5+CSS3の教科書【第3版】

著者大藤 幹
価格単行本:3,080円
Kindle版2,772円
出版日2018/12/3

「よくわかるHTML5+CSS3の教科書【第3版】」はブログ界のインフルエンサー manablogのマナブさんもおすすめする一冊です。

・HTML、CSSについて
・ページ全体の枠組み作り
・テキストや色の指定
・セレクタについて
・画像や動画、音声、背景といったページ内の構造について
・ナビゲーションについて
・フォームやテーブルについての設定方法
・要素の設定方法や、配置のテクニック
・スマートフォン画面への対応について
・フレキシブルボックスレイアウトとグリッドレイアウトについて

HTML・CSSについて一通りの説明がされててとても分かりやすいですが、深堀して説明して欲しいところがサラッと書かれてたり、説明がくどい部分があります。

初心者より中級者向けと言う印象です。

よく考えたらマナブさんが超ド級の上級者なので、その方からしたら初心に戻れる分かりやすい本かもしれませんね。

口コミ

manablog マナブさん(男性)
HTML/CSSの勉強においては、この1冊で十分です。
本書を使うにあたっての注意点としては、多分途中で飽きるということです。
これは人にもよりますが、ぼくの場合は途中で飽きました。
飽きないようにするコツとしては、ゆるく読むことが大切です笑。
HTML/CSSは基礎だけど幅が広いです。
なので、1度で理解しようとすると時間がかかりすぎて飽きる原因になります。

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

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

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サイトを作ることができました。

口コミでは賛否両論ありますが、マイナスの部分込みでも十分購入する価値がある本だと感じました。

口コミ

K.Tさん(男性)
今まで、ネットの情報を見てHTMLやCSSを、いじっておりました。
ほとんどコピペです。
そんなレベルの私にとっては、一番知りたい部分でした。

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

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

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

著者狩野 祐東
価格単行本:2,178円
Kindle版1,960円
出版日 2018/4/14

「スラスラわかるHTML&CSSのきほん 第2版」はこれからWeb制作を始める人、HTML・CSSを学び直したい人にもおすすめです。

・パソコンとスマートフォンに対応したサイトが作れる!
・HTMLとCSSがまったく初めての人でも大丈夫!
・実際の画面と見比べながら作業できる!
・レスポンシブデザインの基本がしっかりわかる!
・作成したサイトを公開する方法まで解説!

HTML・CSSは何となく分かるけどもっと詳しく理解し、ブログデザインをカスタマイズできるまで行きたいと言う人にオススメですね。

とても分かりやすいですが、口コミでもあったように、あまりにもスラスラ読めて途中で、「あ、復習しないと!」ってなります。

読み方を間違えるとサラッと最後まで読んで後には何も残らないことになってしまうかもです。

手を動かしながら読むのがオススメです。

口コミ

B.Mさん(女性)
プログラミングって何?って状態で、今までテンプレート使ってもホームページ作れなかった私が、作れました!
分かりやすく細かく教えてくれるので、着実にやっていけば、ホームページ作れます!

ああしたい、こう変えたいが手にとるようにわかる CSS基礎

ああしたい、こう変えたいが手にとるようにわかる CSS基礎

ああしたい、こう変えたいが手にとるようにわかる CSS基礎

著者赤間 公太郎 / 原 一宣。
藤川 麻夕子 / 山本 和泉
価格単行本:2,420円
Kindle版2,200円
出版日2015/7/17

「ああしたい、こう変えたいが手にとるようにわかる CSS基礎」は CSSの仕組みや書き方、考え方をていねいに解説した入門書です。

HTMLと CSSの書き方や使い方だけではなく、「変えたい場所の探し方」が分かる一冊です。

HTMLとCSS
CSSの基本
Webをデザインする準備
文字(テキスト)
色(カラー)
装飾
レイアウト
見出しを装飾する
CSSを適用する
Webサイトの装飾を変える
ブログのCSSを変える

個人的には自分の学びたいことが目次でしっかり分かる分かりやすさが良かったです。

初心者に優しいカラー印刷です。
本自体のデザインは女性向けかなと感じました。

口コミ

M.A(女性)
読みやすく、わかりやすい本です。女性が読みやすいんじゃないかなと思いました。困った時に開く、手元に必須の本です。

作りながら学ぶ HTML/CSSデザインの教科書

作りながら学ぶ HTML/CSSデザインの教科書

作りながら学ぶ HTML/CSSデザインの教科書

著者高橋 朋代 / 森 智佳子
価格なし
Kindle版2,772円
出版日2013/12/13

「作りながら学ぶ HTML/CSSデザインの教科書」は中〜上級者向けの本です。
これからサイトを作りたい人におすすめです。

初心者に少し毛が生えた人にオススメかもです。

上記の本に比べるとややレベルが上がる印象ですね。

また、2013年の本なので内容が少し古いかなと感じました。
ですが、HTML・CSS中級者には抜群に成長できる本です。

この本は現在 Kindleのみで読むことができるので、Kindleユーザー向けです。

口コミ

S.Vさん(女性)
レビューを見る限り、全くの初心者には少し難しいのかもしれませんが(私的にはとても分かりやすく丁寧に書かれている印象です)、少し経験がある人にとっては最良の本なのではないでしょうか。
というか、初心者こそ正しい知識を身に着けるために多少難しくとも読むべきだと思います。

プロとして恥ずかしくない 新・CSSデザインの大原則

プロとして恥ずかしくない 新・CSSデザインの大原則

プロとして恥ずかしくない 新・CSSデザインの大原則

著者大藤 幹 / 北川 貴清 / きむら あつとし
境 祐司 / 高橋 としゆき / 錦織 幸知
長谷川 広武 / 矢野 みち子
価格単行本:2,750円
Kindle版2,420円
出版日2015/7/2

「プロとして恥ずかしくない 新・CSSデザインの大原則」はCSSの基本文法から、各プロパティの詳細、迷いやすいCSSによる配置の仕組みまで、初学者の方に必要な基礎的な情報を網羅しています。

CSSの基本
CSSによる装飾
CSSによる配置
CSSによるページレイアウト
CSSによるパーツの作り込み
CSSスプライトや透過PNG画像などのテクニック

こちらは私たちは購入しませんでした。

理由は初級者にはやや難しいと内容(中〜上級者向け)の本だったからです。

Webデザイナーや、ある程度 HTML・CSSが分かる人には応用と更なるレベルアップができる本なので、オススメかもですね。

口コミ

Aさん(男性)
元ウェブデザイナーですが最近のCSSを勉強していないためよく分からない状況で復習用に購入。
最近どころか以前は使っていたはずのものまで忘れていることに気付きましたが、そういう人にとってもこの本は役立ちます。

HTML・CSSを本で勉強する際の4つのポイント

HTML・CSSを本で勉強する際の4つのポイント

HTML・CSSを本で勉強する際のポイントを 4つ紹介します。

  1. 最低 1ヶ月は継続すること
  2. 電子書籍ではなく「紙の本」で勉強する
  3. 最後まで読める、もしくはずっと読める本を選ぶ
  4. 実際に手を動かしながら勉強する

ひとつずつ説明していきます。

最低 1ヶ月は継続すること

まずは最低でも 1ヶ月は持続しましょう。

本を読んだだけで理解した気になってしまいがちですが、HTML・CSSはそんな簡単ではありません。

HTML・CSSで Webをデザインすることがゴールなら、プログラミングスクールでは少なくとも 30時間 前後の授業を行うそうです。

プロの講師が教えて 30時間です。
初心者がしかも独学で学ぶなら最低でも 1ヶ月は必要です。

その 1ヶ月が不安なら最初からプログラミングスクールで短期 集中型にしたほうが、時間を無駄にしないかもですね。

>>TechAcademyの無料体験はこちら

電子書籍ではなく「紙の本」で勉強する

電子書籍で勉強するより「紙の本」がおすすめです。

私たちがそうなのですが、まずタブレットやスマホだと他のアプリや通知に目移りして集中できません。

さらに、コードが崩れたり、図が見にくかったりするのでやはり本がおすすめです。

最後まで読める、もしくはずっと読める本を選ぶ

上記でも説明しましたが、本は「自分にあったもの」を選ぶことをおすすめします。

勉強の効率や維持できるかどうかに関わってきます。

・字が多いのが良い
・図が多いのが良い
・カラーが豊富
・文字が大きい
・本がおしゃれ
・内容が面白い

人それぞれ好みはありますが、もし自分に合わない本を購入してしまってもそのまま読み進めず、ちゃんと自分に合った本を選び直しましょう。

実際に手を動かしながら勉強する

自ずとそうなりますが、本を見て→画面を見て→また本を見て→画面を見てのシャトルランです。

サイトをいじりながら勉強したほうが吸収力も理解力もはるかに早いです。

HTML・CSSの勉強には語学力は必要?

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アプリケーションの基礎を学べるようです。

無料なのでとりあえず試してみるのが良いかなと思います。

>>TechAcademyの無料体験はこちら

海外在住者は「電子書籍」で解決!

この記事を読んでくれてる人の中には私たちのように海外在住ブロガーもいらっしゃると思います。

そんなあなたには電子書籍で勉強するのがおすすめです。

電子書籍で有名なのは Amazonの Kindleですね。

>>Kindle Paperwhiteを見る

私たちも購入を考えたのですが、「海外対応してない」、「海外在住は 5冊までの制限がある」などのレビューを目にして購入を止めました。

とは言え友人はそんなこと全くないと、何冊も購入して読んでるので人によるみたいですね。

すでにお持ちの方は電子書籍で勉強しましょう。

Amazonプライムにまだ登録してない方は、今 30日間の無料体験をすることができるので試してみてください。

>>30日間の無料体験はこちら

HTML・CSS おすすめの本8選 まとめ

本日は HTML・CSSのおすすめの本を紹介しました。

後半では HTML・CSSについて詳しく説明しましたが、ご理解いただけましたでしょうか?

 
Jony
え?まだ理解できてない?
本買う前に 1から読み直しなさい。

1から読み直すのが面倒くさい方は当記事の結論をご覧ください。

結論

  • 本でも HTML・CSSは学べる
  • 最低でも 1ヶ月は頑張って続ける
  • 時間が無い人はプログラミングスクールと言う道

自分に合った本もしくは方法で、オリジナルデザインのブログを作りましょう。

最後まで読んでいただきありがとうございます。

おわり