まずは本でHTMLやCSSを学ぼうとしているあなたも、目指すところはエンジニアとして稼ぐことでしょう。
エンジニアの平均年収は全体より167万円高く、フリーランスならさらに稼げます。
▼エンジニア（情報通信業）と全職種の平均年収の比較
| 情報通信業 | 599万円 |
| 全職種 | 432万円 |
| 差 | 167万円 |
（引用：平成29年度 民間給与実態統計調査）
しかし覚えておかなければならないのが、HTMLやCSSだけでは仕事は取れないということです。
HTMLとCSSはあくまで基礎でしかなく、それだけで成立する案件は非常に少なく単価も低いです。
そこで本記事では、HTMLとCSSを本で学習しただけで終わらせず、仕事獲得につなげるための勉強のポイントを6つご紹介します。
その上でHTMLとCSSの本を読んでいただければ、学習効果アップ間違いなしです。
記事のもくじ
HTML・CSSを本で勉強するときの6つのポイント
仕事獲得につなげるための勉強のポイントを6つ紹介します。
ポイント1：最低1ヶ月は継続すること
本を読んだだけで理解した気になってしまう方は多いですが、本来、本での学習にはかなりの時間がかかるはずです。
HTMLとCSSでWebページが作れるようになることがゴールなら、プログラミングスクールでは少なくとも30時間前後の授業を行います。
- HTMLとCSSの基礎
- HTMLとCSSの使い方の実践
- HTMLとCSSでのWebページ作成方法
これらを講師が効率良く教えて30時間なので、自分で一から本で学べば間違いなく倍以上の時間がかかります。
さらに自分のスキルに落とし込む自習時間も必要であることを考えると、最低1ヶ月の継続は必須だとおわかりいただけるでしょう。
そこから学習が途切れないよう、2ヶ月目、3ヶ月目の目標も継続して設定することが必要になります。
ポイント2：電子書籍ではなく紙の本を購入する
HTML・CSSに関わらず、プログラミングの勉強をするときには電子書籍ではなく紙の本を使用するのがおすすめです。
電子書籍を購入してしまうと、図が小さすぎてみにくかったり、コードの体裁が崩れてしまったりすることも少なくありません。
電子書籍の方が持ち運びには便利ですが、特にHTML・CSS初心者の方は正しくコーディングを学ぶため、勉強中の負担を少なくするためにも、紙の本を使用するのがおすすめです。
ポイント3：最後までやり遂げられそうな本を選ぶ
プログラミングの勉強本は、2,000円以上するものも多く、決して安くはありません。
そのため、つい「どうせなら１から10まで学び切れる本を」となりがちです。
しかし、これは入門・初心者の方にはあまりおすすめできません。
その理由は、あまりに内容の幅が広すぎて理解ができなくなってしまい、結局読み切れなくなることも多いから。
HTML・CSSを本で勉強するときには、まずはすぐに読み切れそうな本からはじめてみましょう。
「１冊読み切ったぞ！」という達成感が、次へのモチベーションにもつながります。
ポイント4：実際に手を動かしながら勉強する
HTML・CSSを本で勉強するとき、ただ本をペラペラと読んでいるだけでは、あまり意味がありません。
せっかくプログラミングを学ぶのであれば「なにも見ずに、自分でパッとコードを書けるようになる」状態になるのが理想ですよね。
HTML・CSSを自力で書けるようになりたいのなら、手を動かしてコードを身体に覚え込ませましょう。
実際に自分でコードを書いてみることで、HTML・CSSの理解もグッと高まるはずです。
ポイント5：HTML・CSSだけで仕事は取れないことを知っておく
HTMLとCSSを習得すれば稼げると考えている人もいるかもしれませんが、HTMLとCSSだけで仕事が取れることは非常にまれです。
HTMLとCSSで作れるのは、以下のように最低限の見た目だけ備えたWebサイトだけです。
（引用：HTMLクイックリファレンス）
一方、仕事が取れるのは、以下のようなクオリティーのWebサイトを作るエンジニアです。
（参考例：京都大学のWEBサイト）
このようなサイトにはJavaScriptなどのフロンエンド言語が必要になり、ログインシステムなどを作るならPHPなどのバックエンド言語も必要になるのです。
継続的に仕事を獲得したいなら、HTMLとCSS以外にも知識を深める必要があります。
ポイント6：英語力が仕事獲得と学習のキモになる
エンジニアにとって英語力は非常に重要です。
プログラミング言語は英語圏生まれなので、レポートやリファレンスも英語で読むことが多いのです。
英語ができれば、エンジニアが苦労する2大要素
- 英語のレポートやリファレンスが理解できない
- エラーメッセージが英語なので理解できない
を避けることができ、英語ができると企業からポテンシャルが高いと評価してもらえるので、仕事獲得に非常に有利になります。
「いやいや英語も勉強するなんて無理だよ」と思うかもしれませんが、実は英語初心者ほど、プログラミングと英語を同時に学ぶことで、学習スピードを加速させることができます。
『Kredoオンラインキャンプ』を利用すれば、プログラミングの全授業を英語で学べて、3ヶ月後には確実にスキルを獲得できます。
英語を習得することで未経験から大手企業への就職も狙えるので、仕事獲得を考えているなら英語学習はマストな時代です。
そして忘れてはならないのが、エンジニアになれれば人より年間167万円多く稼げるという事実。
▼エンジニア（情報通信業）と全職種の平均年収の比較
| 情報通信業 | 599万円 |
| 全職種 | 432万円 |
| 差 | 167万円 |
（引用：平成29年度 民間給与実態統計調査）
年収167万円アップするわけなので投資の価値はあります。
さらに『Kredoオンラインキャンプ』はセブ島唯一の政府公認プログラミング×英語のカリキュラムを採用しているので、初心者でも３ヶ月後には英語が話せるエンジニアになれます。
コスパよく転職市場で無敵のエンジニアになれるのは、『Kredoオンラインキャンプ』だけです。
自分のレベルに合う本からHTML・CSSの勉強をスタートしよう！
ここまで6つのポイントを解説していきましたが、書籍学習を進めていくなら1ヶ月継続して基礎力を積み上げましょう。
注意点としては、書籍だけでは限界があるという点ですが、まずは自分にあったレベルの書籍を選んで手を動かしながら学んでいきましょう。
入門編：HTML・CSSの勉強におすすめの本４冊
プログラミングの知識が全くない方には、以下4冊がおすすめです。
- スラスラわかるHTML&CSSのきほん
- デザインの学校 これからはじめる HTML＆CSSの本
- いきなりできます！最新ホームページ作り&HTML超入門第3版
- いちばんやさしい HTML&CSS 入門教室
それでは順番に見ていきましょう。
入門本１：スラスラわかるHTML&CSSのきほん 第2版
白黒ではなくカラーで印刷がされているので解説が非常に分かりやすく、写真・絵本を見るように楽しみながら読める定番入門書です。
サンプルコードも多いので、直感的にHTML・CSSのイメージをつかみたい方にも適した1冊と言えるでしょう。
「楽しく読めた」という口コミも多いので、まずは「プログラミングは難しい」という感覚を払拭したい方はぜひ読んでみてはいかがでしょうか。
入門本２：デザインの学校 これからはじめる HTML＆CSSの本
プログラミング完全初心者の方はもちろん、「過去にHTML・CSSの勉強をしようとして挫折してしまった…」「ほかの本では難しくてついていけなかった…」という方にもおすすめの本です。
基礎知識からよく使用されるタグまで、基礎の基礎を丁寧に学ぶことができるので、スムーズなステップアップを踏むための基盤作りをしたいという方にぴったり。
ソフトをインストールする必要もなく、メモ帳だけでも実践できるように組まれているのも、この本ならではの魅力的なポイントです。
入門本３：いきなりできます！最新ホームページ作り&HTML超入門第3版
こちらの本では、HTMLの基礎はもちろん、サーバーの使い方や画像の扱いなど、ホームページの作り方の基礎を網羅的に学ぶことができます。
CSSについても取り上げられているので安心してくださいね。
本書に記載されている内容はWindows向けなので、Mac向けも勉強したいという方は、ほかの本も合わせてチェックするとよいでしょう。
入門本４：いちばんやさしい HTML&CSS 入門教室
Webエンジニアであり、UIデザイナーでもある岩田宇史さんが執筆されたのが、この『いちばんやさしい HTML&CSS 入門教室』という本です。
この本のポイントは、実際のWeb制作現場のトレンドを反映して制作されているというところです。
Webはもちろんスマホ向けサイトについても詳しく記載されているので、これからHTML・CSSのエンジニアとして企業で活躍していきたい方は、ぜひ読んでおきたい１冊です。
初級編：HTML・CSSの勉強におすすめの本５冊
HTML・CSS初級の方には、下記の５冊が特におすすめです。
- いちばんよくわかる HTML5＆CSS3 きちんと入門
- 1冊ですべて身につくHTML&CSSとWebデザイン入門講座
- HTML5＆CSS3 デザインブック
- 世界一わかりやすいHTML5&CSS3コーディングとサイト制作の教科書
- HTML＆CSSとWebデザインが1冊できちんと身につく本
初級本１：いちばんよくわかる HTML5＆CSS3 きちんと入門
項目ごとの詳しい解説や、図による読みやすさが魅力なのが、『いちばんよくわかる HTML5&CSS3 きちんと入門』です。
「初心者でも読みやすいようにと工夫が施されていることが読んでいても分かる」という口コミも多いこの本。
１つ１つ納得しながら勉強を進めたいという方には特におすすめです。
初級本２：1冊ですべて身につくHTML&CSSとWebデザイン入門講座
コーディングやデザインに関する記事サイト「Webクリエイターボックス」の管理人の方が執筆された、Amazonのベストセラー本です。
プロの現場で役立つテクニックだけでなく、使いやすく美しいデザインを作るコツも記載されているので、これからデザイナーとして活躍したいと考えている方にもぜひ読んで欲しい1冊です。
初級本３：HTML5＆CSS3 デザインブック
Webサイトを実際に作る流れで話が進んでいくので、ただHTML・CSSのコードを学ぶだけでなく、制作の流れにも慣れておきたいという方におすすめのHTML・CSSの定番本です。
超基礎的な内容については説明がないので、初心者の方は入門書を読んでから取り組むとよいでしょう。
中級・上級への橋渡しとしてよりスキルを磨きたい方は、一読してみてはいかがでしょうか。
初級本４：世界一わかりやすいHTML5&CSS3コーディングとサイト制作の教科書
Web制作会社に勤めるメンバーによって執筆された本で、全15レッスンでサイト制作の基礎知識から管理方法まで学ぶことができるように構成されいます。
読み終わる頃にはしっかりとWebの基礎が身についた状態になれます。
初級本５：HTML＆CSSとWebデザインが1冊できちんと身につく本
そのタイトル通り、HTML・CSSの知識と、Webデザインの両方の基礎を身につけることができる本です。
デザインのレイアウトについても勉強できるので、デザイナーとして活躍したいと考えている方にもおすすめ。
サンプルサイトは見栄えもこだわって制作されているので、「自分のプロフィールサイトが欲しい」という方は、この本に従って自分だけのサイトを作ってみるとよいでしょう。
サンプルデータをダウンロードできる点も、この本ならではの魅力的なポイントです。
中級編：HTML・CSSの勉強におすすめの本２冊
「過去に何らかの言語を勉強したことがある」「htmlのコードを少しは知っている」という中級者におすすめなのは、下記の２冊です。
- HTML5/CSS3 モダンコーディング
- HTML5&CSS3レッスンブック
中級本１：HTML5/CSS3 モダンコーディング
![[吉田真麻]のHTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方](https://images-fe.ssl-images-amazon.com/images/I/51dxCHwwS2L.jpg)
フロントエンジニアとして活躍する方が執筆された本で、3つのサイトを制作する流れでコーディングのテクニックを学ぶことができます。
サイトを作り上げることで達成感を感じやすく、モチベーションを下げずに最後まで読み切ることができるのが、この本ならではの魅力的なポイントです。
サイト制作の流れから、様々なWebデザインの作り方・テクニックを学びたい方におすすめの１冊です。
中級本２：HTML5&CSS3レッスンブック
Windows・Macに付属のソフトを使用し、手を動かしながら知識を身につけることができる１冊です。
応用テクニックがたくさん記載されているので、上級編の橋渡しとして読むのもおすすめ。
全320ページと今回紹介する本の中ではボリュームがありますが、解説が分かりやすいので、中級レベルであればサラッと読めるはずです。
上級編：HTML・CSSの勉強におすすめの本２冊
上級者向けにご紹介するのが、本を読んで知識を身につけるというよりも、参考書や辞典のような感覚で使える2冊です。
- Webデザイン 新スタンダードテクニック
- CSSシークレット
上級本１：現場のプロが教える WEBデザイン 新スタンダードテクニック37
近年のWebサイトでよくみられるテクニックを解説している本です。
幅広い細かなテクニックが掲載されているので、辞書的に使うことができます。
Webサイト制作の途中、詰まってしまったときにパラパラと読み返してみると、なにか新しいアイデアが生まれるかも？
ただし、この本にはJavaScript・jQueryなど、ほかの言語に関する内容も一部含まれているので注意してください。
上級本２：CSSシークレット -47のテクニックでCSSを自在に操る
珍しいCSSのコーディング方法がたくさん取り揃えられている本です。
こちらの本も上記と同様に１冊を読み切るというよりも、辞書的感覚で使用するのがおすすめ。
気の向いたときに読むようにすると、新たな知識を知ることができるでしょう。
Kredo オンラインキャンプなら
プログラミング×英語を身につけてグローバルに活躍しませんか？
当メディアを運営しているKredoでは、プログラミング × 英語が学べる人気オンラインサービス『Kredoオンラインキャンプ』を運営中です。コロナ禍でもオンラインで、プログラミング×英語を身につけた卒業生は海外企業、外資系企業、グローバル企業への就職を果たしています。コロナ禍の今だからこそ、スキルを身につけ転職の準備をしませんか？
