HTML/CSSを費用をかけずに学べるおすすめの入門書5選!
HTML/CSS本
HTML/CSSを費用をかけずに学べるおすすめの入門書5選!
プログラミング言語
アンドエンジニア編集部
2021.11.09
この記事でわかること
HTMLとCSSは言語としての機能や目的は異なるがWeb作成において必須の言語で、セットで習得すべき
HTML/CSSの入門書を探すには、3つのポイントについて留意しておく必要がある
HTML/CSSの入門書でおすすめの5選と、それぞれの特徴について理解する

HTML関連記事

HTMLとCSSを本で効果的に学ぶ

HTMLとCSSを本で効果的に学ぶ

「プログラミング言語の他にHTMLやCSSを学ぶ意味があるのか?」という悩みを持つ初級エンジニアの方がいます。フロントエンドエンジニアなら、HTML/CSSは必須言語といえますが、バックエンドエンジニアやサーバーエンジニアにはあまり関係が無さそうに思えます。

しかし、プロジェクトリーダーやプロジェクトマネージャーを任された時に、HTML/CSSの知識やスキルがあると、その分メンバーからの尊敬や信頼を得られるでしょう。この記事では、HTML初心者の方を対象にHTML/CSSを学ぶ意味や、効果的な学び方について、入門ガイドとして解説をしていきます。

HTML/CSSとは?

HTMLを知らないエンジニアはいないと思いますが、「Hyper Text Markup Language」の略です。HTMLはプログラミング言語ではありませんが、Webページを作るときに必須となるマークアップ言語の1つです。 HTMLと一言で呼んでも、実際には「HTML4」「XHTML」「HTML5」の3種類があります。すべて覚える必要はなく、ここでは「HTML5」をHTMLとして扱っていきます。

CSSは「Cascading Style Sheets」の略で、文字サイズや文字の色、余白、装飾などのレイアウトでの見栄えを決めるスタイルシート言語です。HTMLだけでもWebページは作成できますが、殺風景な味気ないページになってしまうでしょう。 そこで、見栄えの良いページを作成するには、HTMLとCSSをセットで学ぶ必要があります。そのため、ここでは「HTML/CSS」と表記します。

HTML/CSSを学ぶ意味

HTML/CSSは易しい言語です。少しでも学べばすぐに結果が確認できるため、挫折しにくいのが特徴です。しかも、学習人口が圧倒的に多いため、壁にぶつかってもすぐに解決できます。また、あらかじめ特に準備するものが不要なので、すぐに始められます。

HTML/CSSはITエンジニアの初めの一歩、エンジニアの一般常識と考えて、できれば多くの人に学んでほしい言語です。

HTML/CSSは電子ブックよりはペーパーブックを

最近はスマホやタブレットにダウンロードして読むタイブの書籍(電子ブック)が増えてきましたが、勉強目的ならペーパーの方が良いでしょう。電子ブックの場合は、図が見にくい、書き込みができないなどの使い勝手の問題もありますが、勉強の達成感が得にくいでしょう。

マーカーを入れたり、メモ書きしたり、手垢を付けられる点ではペーパーが勝っています。また、自分に合わないと感じた時に、ペーパーブックはメルカリなどで販売ができますが、電子ブックは中古販売ができませんので、購入額分が完全に無駄になってしまいます。

HTML/CSSの入門本を選ぶポイント

選ぶポイント

HTML/CSSの学習本を購入するにあたり、注意すべきポイントを以下で説明していきます。スクールに通うより遥かに安い出費で済むとはいえ、せっかく購入するからには自分に合った本を選びましょう。

自分のレベルにあっていること

学習本の購入では、自分のレベルに合っているというのが最低限の条件です。どんなに外装が素晴らしく、どんなに人気があっても自分に合わなければ意味がありません。間違って上級者用の参考書を選んでしまうと、いきなり挫折します。

また初級や入門の表記がある本でも、実際にはレベルが高すぎて理解ができないといった事があります。 書店で手に取って見てみるのがベストですが、ネットで探す場合でも、電子書籍で一部試し読みができる本などもあるため、まずは中身を見て自分のレベルに合っているかを確認しましょう。

同時にCSSも学べること

Webページ作成の基本はHTMLですが、CSSが使われているケースが大半です。HTMLとCSSはセットで学びたい言語ですので、両方を解説している本をおすすめします。

HTMLとCSSの両方に対応している本であれば、効果的に2つの言語をマスターできるような構成になっており、別々に本を買って勉強するよりは遥かに効率的です。

最新のバージョンに対応していること

よく中古の書籍を購入する人がいます。小説など、時代の変化に直接関係ないものであれば問題はありませんが、学習本の場合、時代の変化の影響を受けやすいIT系では、本は最新バージョンであることがポイントです。

HTMLの最新バージョンは「HTML5.2」、CSSは「CSS3」です。これらに対応している学習本や参考書を選ぶようにしましょう。

注意:HTML5は廃止され、HTML Living Standardが標準規格になったとのニュースがありますが、HTML5はそのまま利用できるため、HTML5準拠の教本で学んでも何ら問題はありません。)

辞典代わりになること

これは必須ポイントではありませんが、用語の解説が詳しく書かれている本や、インデックスがしっかりしている本は辞典代わりにもなるので、その辺もチェックしてみましょう。

【2021】HTML/CSS入門書おすすめ5選

入門書おすすめ5選

HTML/CSS関係の解説本、参考書は非常に豊富にありますが、入門者向けであること、HTMLとCSSを同時に学べること、最新バージュンに対応していることなどを条件に、書評や口コミも参考にしながら選んでみました。

ちなみに出版日が比較的古いものでも、最新のバーバョンに対応し、改訂している本は対象としています。

▪著者:狩野 祐東 ▪ページ数:296ページ ▪出版社:SBクリエイティブ ▪発売日:2018/04/14

【特徴】小規模なサンプルサイトの作成を通じて、HTML/CSSの基本が学べる入門書

2013年に初版が発刊されたロングセラーの人気本です。2018年に今回おすすめの第2版が発売されました。HTML/CSSの基本について、可能な限り分かり易く解説しています。図解が多く、誰もがミスしやすい箇所のサポートも親切です。ある程度、 HTML/CSS の知識がある方には物足りない内容かもしれませんが、入門者にはぜひおすすめしたい1冊です。

▪著者:千貫 りこ、ロクナナワークショップ(監修) ▪ページ数:192ページ ▪出版社:技術評論社 ▪発売日:2017/05/26

【特徴】Webデザインの基本を学ぶ初心者向けのHTML/CSS入門書

比較的ページ数が少なく、初心者に優しい丁寧な説明で、すらすら読み進められます。分かり易さを最優先して結果、取っ掛かりの入門書としては良いのですが、初心者でもこれ1冊で十分とは言えません

超入門という点ではおすすめの書です。分厚い本は苦手、飽きやすいという方はこの本でスタートを切るのも良いでしょう。

▪著者:たにぐちまこと ▪ページ数:320ページ ▪出版社:マイナビ出版 ▪発売日:2017/03/27

【特徴】HTML/ CSS、JavaScript などの入門書として網羅性に富み、これ1冊で基本を学べる

初心者に分かりやすく書かれている本で、HTML・CSS・JavaScriptについて幅広く学べますが、より詳しく学びたい人にはやや物足りなさを感じるかもしれません。Web開発の基本について広く浅く学びたい人におすすめです。

▪著者:赤間 公太郎、狩野 咲、鈴木 清敬 ▪ページ数:336ページ ▪出版社:技術評論社 ▪発売日:2019/03/01

【特徴】Webサイト作成に必要な知識を凝縮した教科書

全15章から構成され、レッスン1の基礎知識から始まり、 HTML/CSSの使い方を中心としたレッスンが続き、後半のレッスン14と15ではWebサイトの公開方法が記載されています。タイトル通り、教科書のイメージが強いですが、しっかり基礎を学びたい初心者の方におすすめしたい本です。

▪著者:岩田宇史・平内裕子 ▪ページ数:304ページ ▪出版社:株式会社ソーテック社 ▪発売日:2018/10/19

【特徴】スマホ対応のサイト作りを題材とした新しいタイプのHTML/CSS入門書

「いちばんやさしい」のタイトル通り、HTML/CSSに特化した入門書です。特徴はスマホ向けサイトを題材としている点で、他の教本とは一線を画しています。

題材はスマホサイト作成ですが、モバイル対応サイトを作りながら、パソコン表示の対応方法なども解説されており、閲覧するユーザーのデバイスに合わせて自動的に表示が最適化される「レスポンシブデザイン」の制作を学べるような作りになっています。 入門でありながら、実践力を高めたい初心者におすすめの1冊です。

HTML/CSSを学んだ後は?

以上のおすすめの入門書、いずれか1冊を読破した頃には、ちょっとしたWebサイトの構築ぐらいは出来ていることでしょう。せっかくWebサイトを作れるようになったのなら、その先の目標も持っておきましょう

余談ですが、人気ブロガーであり、アフィリエイターの坂内学氏のマナブログの影響を受け、プログラミングで一獲千金を狙ってみようという方もいるかと思います。世の中に美味しい話はありませんので、地道にスキルを身に付けることをおすすめします。しっかり実力が身に付けば、自ずと活躍の機会は増えていきます

JavaScriptやPHPも習得しよう

image

JavaScriptはWebブラウザ上で利用するプログラミング言語の1つです。JavaScriptを用いることで、HTMLではできないようなブラウザ上での画像の拡大・縮小、動画の再生、ユーザー操作に対応した動的コンテンツなどを実現できます。

また、JavaScriptはどのようなWebアプリにも対応が可能なため、主にフロントエンド開発では必須のプログラム言語です。その他にも、ユーザーが入力した問合せフォームの内容や、購入した商品に対する応答などはプログラミング言語のPHPで書きます。皆さんがよく利用するWordPressも、PHPで作成されています。

このように、HTML/CSSとJavaScriptに加えてPHPを習得すると、あらゆるWebサイトの開発が行えるようになります。PHPの習得も是非視野に入れておきましょう。

認定資格を取得しよう

HTML/CSSを勉強するからには、自身のスキル確認が必要です。とりあえず、簡単なサイトを作れればそれで満足という方以外は、活躍機会を得るためにも認定資格の取得を目指すとよいでしょう。

HTML5プロフェッショナル認定試験

特定非営利活動法人、エルピーアイジャパン(LPI-Japan)の認定資格です。HTML5以外にCSSやJavaScriptなどに関する技術や知識が求められる試験で、初級に相当するレベル1と、中級相当のレベル2があります。認定資格を取っていると就職や転職に有利ですので、ぜひ挑戦してみましょう

将来のエンジニア像をイメージして目標を立てよう

HTML/CSSに加えてJavaScriptを習得すれば、フロントエンドエンジニアとして活躍の機会が広がるでしょう。しかし、それはあくまでもITエンジニアとして通過点です。ITエンジニアとして、将来にどのような職種に就くのか明確な目標を持ちましょう。

その目標に向かって、どのようなキャリアパスを描き、どのようなスキルを身に付けるのか、しっかり青写真を描いておくと、勉強に向かう姿勢も大きく異なります

いずれにせよ、皆さんが起業する際には、学んだHTML/CSSやJavaScriptの知識を生かし、自らの会社や事業のWebサイトを自身で構築してみるという夢を持つと良いでしょう。

気になる人のTwitterをフォローしよう!
アンドエンジニア公式LINEでは
新着記事やエンジニアに役立つ情報をお届け!
日々のキャッチアップをお手伝いします!
マイナビITエージェント

編集部オススメコンテンツ

eyecatch_visual_coder
Adobe製品を使わない"デザイナー"?「ビジュアルコーダー」が考える、自己満足で終わらないWebデザインとは
三角
2020.06.16

アンドエンジニアへの取材依頼、情報提供などはこちらから

お問い合わせ・情報提供
この記事をシェア
Twitter
Facebook
LINE
Hatena

編集部おすすめコンテンツ

アンドエンジニアへの取材依頼、情報提供などはこちらから

Powered by マイナビ AGENT