2018年12月にソシムより出版されたエビスコムの「CSSグリッドで作る HTML5&CSS3 レッスンブック」を購入して読んだので、さっそく紹介したいと思います。
今回もちゃんとしっかりとソースコードを打ちながらサイト制作していきました。
他とは一味違う入門書
CSSグリッドで作る HTML5&CSS3 レッスンブックを読んで私は、他のHTML/CSSの入門書とは一味違う、他の入門書よりも一歩先を進んだレッスンブックだと感じました。
レッスンブックの「はじめに」のページで著者は『CSSグリッドをベースにしたWebページ制作を行う新しい時代のレッスンブック』と呼んでいますが、私はそれを一歩先を進んだレッスンブックと表現したいと思います。
「一歩先」の3つの要素
私が一歩先を進んだレッスンブックと表現したいという、その「一歩先」を感じた点を3つほど紹介していきます。
CSSグリッドに特化しモダンに
最近刊行された入門書ではCSSグリッドについて取り上げているHTML/CSS本も出てきましたが、ここまでCSSグリッドに特化しているのは私が見た限りではまだエビスコム本くらいしかありません。
2018年はエビスコムから書籍が3冊出ているのですが、そのいずれもCSSグリッドを取り上げており、CSSグリッド推しがハンパないです。
このレッスンブックでももちろんレイアウトはCSSグリッドのみで行っており、フレキシブルボックスですら使っていません。（フレキシブルボックスについての説明はちょっとだけ書いてありますが）
ここ最近になってフレキシブルボックスを使ったHTML/CSS本もようやく普及してきたというのに、いち早くCSSグリッドをレッスンブックで出してくるとは驚きでした。ましてや一年にCSSグリッド本が3冊も登場するなんて……
CSSグリッドを使っているということもあり、このレッスンブックではIE（Internet Explorer）は対象外となっています。ですが、その分CSSグリッドやobject-fitなど便利な機能の恩恵も受けられます。
IEで表示したサンプルサイト。レイアウトが崩れています。
レッスンブックで紹介されていたIE Busterもお試し私は一歩先を進んだレッスンブックと表現しましたが、モダンになったレッスンブックとも言えそうです。レイアウトもモバイルファーストで作成するようになり、今年の夏に出た「CSSグリッドレイアウト デザインブック」で私が気になっていた点も改善されています。
CSSグリッドでシンプルな文書構造を実現させる「CSSグリッドレイアウト デザインブック」
シンプルで割り切った構成
この本はCSSグリッドに特化しているということもあって、内容もものすごくシンプルでスッキリしたものになっています。
エビスコム本といったらステップバイステップが特長なのですが、それはこのレッスンブックでも健在です。
他のよくある入門書では、まずはじめにWebの世界についてや、HTMLタグやCSSの説明など長い前置きがあったりしますが、このレッスンブックでは習うより慣れろといった感じで、いきなりサイト制作にとりかかります。
もちろんレッスンブックというだけあって、基本的なHTMLやCSSについての説明はありますが、とにかくまずはページをつくるというのが優先になっています。
また、サイトを制作するためのツールも機能性のあるテキストエディタをダウンロードせず、標準で用意されているメモ帳などを使っているので、環境を設定することなく読み進むことができます。
サンプルでつくるソースコードについても、とてもシンプルなモノになっています。サンプルでつくるサイトはWordPressのテンプレートでありそうなレイアウトですが、クラス名なども使わずサクサク進んでいくので、ある程度HTMLについて理解している私からすると「大丈夫なのか!?」と心配になってしまうくらいなのですが、そこはご安心を。
ちゃんと後半部分で伏線を回収するかのごとく、クラスを設定する箇所もでてきますし、CSSの仕組みについて説明するためにこのような構成になっているのだなとも感じられました。
ですが、もうちょっとクラス名を設定しておいたほうが設計的にも良いんじゃないかと思うのですが、構成の流れを考えると難しいのかもしれませんね。
今年刊行されたエビスコムのCSSグリッド本ではセマンティクスについてもかなり意識されていて、このレッスンブックでもしっかりと説明されており、マークアップはミニマリストの部屋かと思うくらいスッキリとしたモノになっています。
サイトの公開手段
他の入門書ではサイトを公開するための方法として、レンタルサーバーを契約してFTPソフトを使って公開するというやり方を教えていたりすることが多いですが、このレッスンブックではNetlifyを使って無料でサイトを公開するやり方を紹介しています。
これまでのHTML/CSS本ではせっかくフォームを作成してもそのままでは使うことができないといったことが多かったので、Netlifyだとフォームにnetlify属性を加えるだけで実際にデータを送ることができて、とても便利に感じたポイントでした。それに、お手軽なのに無料というのもありがたいですね。
サンプルサイトのフォームから送ってみたデータ「いちばんやさしく」のいちばんやさしい部分とは
このレッスンブックの表紙には「いちばんやさしく」と書かれていますが、パソコンの使い方すら初心者の方を対象としたようなメチャクチャ親切丁寧に教えてくれているわけではありません。
ではどこがこの本の「いちばんやさしい」部分なのか、実際に読んでみるとやさしさを感じる部分にもちゃんと出会えたので、いくつか挙げてみます。
ちょうど良い合いの手の解説
このレッスンブックではWebページをすることを優先した構成になっており、初心者の方だとサンプルページ制作で書いているコードの意味がわからず読み進めていく場面もあったりするかと思うのですが、ところどころに何ページを参照してくださいと書いており、参照先の説明を読むことで理解を深めていくことができます。
しかもその参照もちょうど良く、多すぎず少なからずで、これまた絶妙な配置になっています。
凝ったサンプルのデータ
私は気になったHTML/CSS本があったら、購入する前にサイトからダウンロードできるサンプルデータを見てチェックすることが多いのですが、エビスコムはサンプルのデータもしっかりしています。
他の入門書でも章ごとの作成データがフォルダ分けされてあったりしますが、エビスコムは各章で作成するサンプルへのリンクをまとめた目次までつくられてあります。
しかもこれはHTMLでつくられているため、わざわざフォルダから開くことなくチェックすることができるので、書籍上の画像だけでなくサンプルデータを確認しながら読み進めたいという方にはとてもありがたいのではないでしょうか。
HTMLでつくられた目次のページ。ここでもCSSグリッドが使われていますつまずきにくい
たまに他のHTML/CSS本でコードを書きながら読み進めていくと、書いてあるコードどおりに表示できなかったりとかしてつまずいてしまう場面があったりするのですが、このレッスンブックではほぼそんなことはなく読み終えることができました。（初版だと私は一箇所だけあれっ？となった部分はありましたが、文章をよく読みサンプルコードをチェックすれば問題なく進められます）
これって入門書では意外と大事な部分だと思っていて、読んでいる多くの方は初心者が多いでしょうから、誤字・脱字や間違いがあったりして結果どおりにならずに困ったりすることもあったりするんですよね。
ですけど、このエビスコムのレッスンブックだと書いてあるソースコードと完成イメージのレイアウトのバランスが良く、デザイン的にも読みやすいので戸惑うことなく読み進められるかと思います。
私はいろんなHTML/CSS本をチェックして読んだりしていますけど、未だにエビスコム本を超える読みやすさの本にはまだ出逢えていません。
CSSグリッドのレッスンブックとしても使える
このレッスンブックはこれからWeb制作の勉強をはじめる方向けかと思いますが、構成が制作フローとHTML/CSSの説明に分かれているので、制作フローだけを読み進めていくことで、これからCSSグリッドを学びたいと思っている方にも十分オススメできる本になっています。
もちろんCSSグリッドについてだけでなく、その他も有益な情報が掲載されているので、レッスンブックという名前の皮をかぶった本格的なHTML/CSS本にも感じました。
もし、この本を読んでCSSグリッドにさらに興味がわいたら、よりいろいろなデザインのパターンが学べる「CSSグリッドレイアウト デザインブック」がオススメです。また、CSSグリッドを使ったモダンなWebページ制作だけでなく、フレキシブルボックスを使ったベーシックなつくりかたなども知りたいという方は「HTML5&CSS3ステップアップブック」や「6ステップでマスターする 「最新標準」HTML+CSSデザイン」あたりを読んでみるのが良いでしょう。
初学者の最初の一冊にオススメできるか
「CSSグリッドで作る HTML5&CSS3 レッスンブック」を一歩先を進んだモダンな入門書と紹介しましたが、これをいきなり初心者の方にオススメするかと言われたら微妙かもしれません。
別段このレッスンブックを一冊目として読むのが悪いというわけでなく、本の内容としては大変面白いですし、今年出た3冊のCSSグリッド本のなかでもベストな出来だと思います。
ですが、この最新の制作方法を用いたこのレッスンブックが最初の一冊目としてはどうなのかということです。
というのも、CSSグリッドを使ったレイアウトはこれまでの手法とは大きく違っているため、私としての考え方に影響しているのかもしれません。
ド初心者の方にオススメしたい手順としては、より丁寧で親切に教えてくれる「スラスラわかるHTML&CSSのきほん 第2版」とかを先に読んでから、その次の一冊として活用するが良いでしょう。
また、「本当によくわかるHTML&CSSの教科書」や「HTML5&CSS3しっかり入門教室」などでHTMLやCSSの基礎を学んでから、このレッスンブックを読んでみると、いかにこのレッスンブックがシンプルで、CSSグリッドが効果的なモノであるかを実感できるかと思います。
いろいろと伝えたい想いがありすぎて上手く書き表すことができなかったですが、一歩先を進んだ入門書「CSSグリッドで作る HTML5&CSS3 レッスンブック」は意欲作であり、私にとってちょっと遅れてやってきたクリスマスプレゼントとなりました。
中身は面白いからぜひ一度手にとって読んでみてほしいです！
