まさに表紙のとおりかんたんで丁寧な「本当によくわかるHTML&CSSの教科書」

SBクリエイティブより2018年9月に出版された「本当によくわかるHTML&CSSの教科書」を読んだので、紹介したいと思います。

プログラミング学習サイト「Progate」の学習教材の制作を担当した方が書いた著書だということで、前から気になっていた一冊。
実際に読んでみて感じましたが、まさに表紙に書いてあるとおり丁寧でわかりやすいHTML&CSSの教科書になっていました。

「まさに表紙の通り」な内容

知識ゼロでもOK!と表紙に書かれてあるように、この書籍のターゲットはこれからHTML&CSSの勉強をはじめようという未経験者だと思います。

この本と比較対象になりそうなのは「スラスラわかるHTML&CSSのきほん」あたりでしょうか。
「スラスラわかるHTML&CSSのきほん」もわかりやすいですが、この「本当によくわかるHTML&CSSの教科書」も親切ていねいにわかりやすく書かれているため、初心者にオススメできる一冊です。もはや、どちらを選んでも問題ないレベルだと言えます。

この書籍の特徴

「本当によくわかるHTML&CSSの教科書」はどういう本かともし尋ねられたら、表紙に書いてあるとおりの本だと答えるでしょう。
それくらい丁寧に書かれてあってわかりやすい入門書だということです。

  • 教科書的な内容ながら、丁寧な説明でわかりやすい
  • シンプルでデザイン性のあるサイトがつくれる
  • シングルページ、グリッドレイアウトなどのレイアウトパターンを学べる

HTML&CSSの教科書となっているように、内容が教科書的になっているのも特徴的です。
文章のフォントが教科書で見かけるようなフォントになっていたり、大事な箇所が太字で書かれ、さらに黄色のマーカーも引かれてあります。
パッと見は教科書的ではありますが、文言はやわらかい印象でページの色づかいや図解、ポイントなどもやさしいテイストになっているため、難しい印象は与えさせません。

書籍の構成としては、まずはじめにHTML・CSSの説明から入り、ひととおりの知識を覚えたところでWebサイトの作成に入っていきます。
正直言って、未経験者の方だとはじめはちょっとわかりづらい、つまらないという印象を持つかもしれませんが、とりあえずサラッと流し読みしてみてChapter4のWebサイトの作成に進んでみるのが良いかと思います。
そして、Webサイトをつくりながらいまいち理解しづらいところが出てきたら、前のページに戻ってHTML&CSSの説明を確認すれば良いのです。

ここからは「本当によくわかるHTML&CSSの教科書」を読んで感じた良いところを何点か挙げてみたいと思います。

コードの行番号が書かれてある

この本を読んでいちばんありがたいと思ったのが、コードに行番号が書かれてあったことです。

この本だと基本的には上から順にコードを書いていくだけなのですが、はじめてHTML&CSSを勉強するという人だと、どこに追加して書けば良いのかわからなくなるといった小さな悩みが出たりすることもあるので、非常にありがたかったです。
使用するテキストエディタのBracketsにも行番号が表示されてあるため、本とエディタの行番号を見比べながら書き進められることができるのが便利で、意外とほかのHTML&CSS本にはない素敵なポイントでした。

ページごとにあわせた複数のCSSファイルで作成

一般的なHTML&CSS本だと、ひとつのCSSファイルにズラッと書き込むことが多い気がするのですが、この本では共通のスタイルをまとめたCSS、トップページのCSS、レスポンシブのCSSといったように、複数のCSSファイルをまとめて読み込むスタイルになっています。

単に次のページを作成していくだけでなく、Webサイトの効率的な作成方法などについて書かれてあったも、この本の印象的なところ。

ただCSSにコメント文の記述があったほうが、後になってメンテナンスする際により良いかなぁとは思いましたが……

ファビコンやOGPの設定についても記載

Chapter 6ではページのディスクリプションや、ファビコン、SNSでの表示設定など、Webサイトの集客についての内容が載ってあります。
metaタグやOGPの設定など、多くの人にWebサイトの内容を知ってもらうためのSEO対策についても、しっかりと丁寧にかかれてあるのも特徴的だなと感じました。

無料レンタルサーバーやファイルアップロードソフトをつかってのWebサイトの公開についても、きっちりと書かれてあります。

気になったところ

この本を読んで気になったところを挙げるとすれば、headerタグやfooterタグなどのHTML5についての説明がないところでしょうか。

あとはヘッダーのロゴとメニューを分けるためにfloatを使っていたのが気になった点。
サンプルのサイトをつくるながらHTMLやCSSについて説明していくスタイルになっているため仕方ないのでしょうが、その後でフレックスボックスについての説明もするのであれば、わざわざココでclearのdivを設けてやらなくても良いんじゃないかなぁと思いました。

初心者に間違いなくオススメできる良本

いろいろ長々と書いてしまいましたが、とにかく言いたいのはこれからHTML&CSSを勉強しようという方にオススメできる入門書であるということ。
こうしてちゃんと読んでみると、どうしてAmazonでの評価も高いのかうなずけます。

また、技術書なのに比較的価格がお安めになっているところもポイントでしょうか。この内容で2,000円を切っているのはリーズナブルではないでしょうか。

これからは初心者に向けたはじめの一冊として「スラスラわかるHTML&CSSのきほん」だけでなく、「本当によくわかるHTML&CSSの教科書」も挙げていきたいと思います。