『CSSグリッドで作る HTML5&CSS3レッスンブック』と『HTML5&CSS3ステップアップブック』の感想

今回読んだのは『CSSグリッドで作る HTML5&CSS3レッスンブック』『HTML5&CSS3ステップアップブック』(共にエビスコム著・ソシム)の2冊です。

エビスコムさんの本は何作も読んでいますが、エビスコムさんの本は、著者独自の考えを押し付けるわけではなく、総じて一般的な手法・普遍的な手法でホームページを作成しており、初心者でも安心して読めるところが良いですね。

実際にホームページを作りながらの演習なので、具体的なホームページの制作方法が分かります。
また重要な点は紙面を割き、かなりきちんした形で説明してくれるので助かります。

以前からフレキシブルボックスレイアウト(つまりdisplayの値をflexに設定する手法)に興味があったので『HTML5&CSS3ステップアップブック』を買おうかどうか迷っていたのですが、2018年末に『CSSグリッドで作る HTML5&CSS3レッスンブック』が出版されることを知り、この際なので2冊とも読むことにしました。

『CSSグリッドで作る HTML5&CSS3レッスンブック』の特徴

CSSグリッド初心者向けの本です。
この本の特徴は2つあります。

  • CSSグリッドを使うことと
  • モバイルファーストであること

です。

CSSグリッドについて

CSSグリッドというのはホームページを格子状に分割し、格子にパーツを当てはめてホームページを作っていく手法のことです。

最初に格子にパーツを当てはめる作業をするため、はじめからホームページ全体の構成を考えておく必要があります。
それとCSSグリッドを使うことで、レスポンシブホームページが作りやすくなっています。

モバイルファーストについて

以前はパソコンサイトを作ってからスマホ(携帯)サイトを作るのが主流でしたが、現在はモバイルファースト、つまりスマホサイトを作ってからパソコンサイトを作る方向になりつつあります。

この本ではモバイルファーストでホームページを制作しており、モバイルファーストの手法を知りたいという方には参考になります。

『HTML5&CSS3ステップアップブック』の特徴

既にCSSグリッドの基礎は知っているという人は、最初からステップアップブックに取り組まれてもいいと思います。

ステップアップブックはレッスンブックと比べ、より多くのプロパティが登場し、細かなデザインが作れるようになります。
flexについての説明もこの本に書かれています。

レッスンブックは基礎が学べるいい本なのですが、実際に仕事でホームページを作るとなると、ステップアップブックレベルの知識が必要になるでしょう。

総合評価

各本とも、評価は星4つとします。

★★★★☆

別に星5つでもよかったのですが、私自身が他にCSSグリッドの本を読んだことがないので、最高評価をつけるのにためらいがありました。
著者には申し訳ないのですが、M-1などのコンテストで最初の演者の点数が低く抑えられてしまうのと同じ理屈ですね。

『WordPressのツボとコツがゼッタイにわかる本』の感想

最初の評価は最低だった

評価の難しい本ですね。Amazonのレビューを見ても賛否が分かれています。

私がWordPressの勉強を始めたとき、最初に読んだのはエビスコムさんの『WordPressレッスンブック』『WordPressデザインブック』(共にソシム発行)でした。

そして次に読んだのがこの『WordPressのツボとコツがゼッタイにわかる本』(中田亨・秀和システム)だったのです。

なぜこの本を読もうと思ったのかというと、著者の前作『ホームページ作成のツボとコツがゼッタイにわかる本』(中田亨・秀和システム)が大変素晴らしいものだったからです。

そこで中田さんのWordPress本に期待し、読み進めて行ったのですが、読み進むにつれて「なんか思っていたのと違う」という戸惑いがありました。
「エビスコムの著作と全く構成が違うんだけど、なんで?」という思いがよぎりました。

我慢しながら読んでいたのですが、第4章に入ったあたりでとうとう本を投げ捨てたのでした。

何とかがんばって第4章まで読んでみたものの、実際に理解できたのは第1章「WordPressでホームページを作るメリット」だけでした。第2章以降は何を言っているのかさっぱり理解できなかったのです。

実はこの本の特徴としては、WordPressの仕組みの説明に紙面を割いている点が挙げられます。第2章の部分ですね。
しかしWordPressの初心者本を読んだだけの人間がいきなり第2章を読みこなすのはなかなか難しいです。不可能とまでは言いませんが、結構大変でしょうね。

第3章についても同じです。
第3章は「ホームページをWordPressに乗せ換える準備をしよう」とのことですが、何のためにその準備が必要なのかが理解できません。

のちに分かったのですが、結局のところ、第2章・第3章を理解するためには最低限「WordPressのテンプレート階層」を理解している必要があったのです。

つまり

「WordPressを使うためには基本のテンプレート(index.php)を作成する必要がある。基本テンプレートだけでもWordPressは使えるけれど、特別のテンプレートを作った場合は特別テンプレートが優先的に使用される」

というWordPressの仕組みそのものの理解が必要だったのです。
その知識がないと2章・3章は読みこなせないでしょう。

本書は第3章までが理論の説明となり、第4章以降でホームページにWordPressを組み込む具体的な手順の説明にはいります。

けれど私はここで力尽きました。
第2章・第3章で苦しめられた者が4章以降を乗り切るのは容易なことではなかったのです。

この本を見限らなかった理由

しかしそのような状態でありながらも、私はこの本を見限りませんでした。この本が悪いのではなくて、私の理解力が不足していると考えていました。

なぜそう考えたかというと、著者の前作『ホームページ作成のツボとコツがゼッタイにわかる本』が大変素晴らしいものだったからです。

前作の、「全体を見渡したうえでホームページを作成していくという手法。共通部分を先に作り、その後、個別ページを作成していくという手法」が丁寧に説明されていたのが素晴らしかったのです。

この手法はホームページを制作する人であれば当然に行うものです。
けれど初心者向けの本でそれを意識的に伝えているものは意外と少ない気がします。

そのような著者の、しかも同じ『ツボとコツ』シリーズなので絶対に前作と同程度のレベルのはずだし、読者のことを考えた構成のはずだと思っていました(のちのち気づくのですが、レベルについては前作と同程度とは言えないと思います)。

とはいえ、全く理解できていない私がいつまでもこの本にしがみついても仕方がありません。
そこで残念ではありますが、一旦この本を離れ別の本で勉強することにしたのです。

この本の意図するところ

その後、何冊かのWordPressの本を読み、ようやくWordPressがテンプレート階層になっているらしいということを学びます。
それ以外にも、WordPressに関する知識も増えました。

そういった状態でこの本を再読したとき、ようやくこの本がそれほど悪い本ではないな、ということに気づきます。

前作と同様、全体を考えたうえで構成していることが分かります。ひとりで一から作成出来ることを目的としていることが分かります。

特に私がこの本で一番評価しているところは、第3章の最初の2ページです。

このページにはWordPress型のホームページを作るときの手順がはっきりと書いてあります。

この本の提示する作成手順は

  1. 最初に静的サイトを完成させる
  2. その後、WordPressを組み込んでいく

ですね。

多くのWordPress本は、この手順を明示していません。
手順自体は本書と同じであっても、はっきりと明示している本は少ないです。あるいは本書とは違う方法で、たとえば静的サイトを作りながら同時にWordPressを組み込んでいく本もありますね。

本書のように作成手順をはっきりと明示してくれることは初心者にとっては安心につながります。
また、本書に書かれている方法が唯一絶対の作成手順ではありませんが、それでもこの手順が最も失敗の少ない、手堅い手順だと言えます。

その他にもこの本では

  • 共通部分からテンプレートを作っていく、とか
  • 簡単なテンプレートから作っていく

などのように、作成手順の指針を示しており、一からWordPress型ホームページが作れるように配慮した記述が見受けられます。

この本の悪いところ

こうして現在ではこの本を高く評価している私ですが、この本にも欠点があります。
気になる点はいくつかありますが、特に問題と感じるのは次の2点です。

問題点1・初心者向けではない!

この本の最大の問題は、「初心者向けではないのに初心者向けの顔をしているところ」です。

私はこの本の感想として、最初に「本書はAmazonレビューの賛否が分かれている」と書きました。

Amazonのレビューを詳しく読むと、この本に高い評価を付けているのはほぼ全員、この本以前に他のWordPress本を読んだことのある人たちばかりであることに気づきます。
反対に、最初にこの本を読んだ人たちは酷評の嵐です。

なぜこうなるのでしょうか?

大雑把な分類であることを承知の上で書くと、WordPressの勉強レベルは2種類あります。

単にWordPressを使ったホームページ制作手順のみを勉強するレベル(手順レベル)と、WordPressそのものの理論構造まで突き詰めるレベル(理論レベル)です。

多くのWordPressの入門書は手順レベルの解説がメインです。

ところが本書は入門書向けの顔をしながら、理論レベルに踏み込んだ記載をしています。というよりも理論を先に提示してから手順レベルの説明に取り組んでいるといったほうがいいでしょう。

既に手順レベルの入門書を読んだ読者であれば、本書が提示する理論と個別具体的な手順を結びつけて考えることができます。

このような層は、具体的手順は分かるのだけれどなぜそうなるかが分からないという疑問を抱えており、その疑問が本書で解決するため、本書に納得するわけです。

ところが全くの初心者の場合、本書が提示する理論と具体的手順を結びつけて考えることができません。
具体的な事柄を何も知らない状態なのに、理論だけを延々と説明されるため、議論についていけなくなるのです。

Amazonのレビューの評価が分かれる理由がここにあります。

もちろん著者としては、全くの初心者であっても理論的にWordPressを使いこなしてほしいという思いから執筆に工夫を凝らされたのだと思います。
しかしながら結果論になりますが、その試みが成功しているとは言い難いですね。

本書は入門者向けシリーズの一環として出版されていますが、本書の内容を見るかぎり「脱初心者向け」「中級者を目指す人向け」の本とするのが適切であったように思います。

問題点2・ファイルはこまめにアップロードして!

本書では第4章以下で具体的な作業に入ります。
ですが作成したファイルをサーバーにアップロードするのは、第5章の最後、すべてのファイルを作成し終えて以降です。

このようなWordPressの組み込み手順は、理想的といえば理想的なのですが、初学者を対象とした本においては採るべき手法とは思えません。

なぜなら初学者はコードの記載をミスしているおそれが強く、最終段階で一気にファイルをアップロードしてもホームページが適切に表示されない可能性が高いからです。

この場合、ミスを修正できるのであれば問題はないと言えるのかもしれませんね。
しかし最終段階でまとめてミスを修正する手法は、修正個所の特定が難しくなるためお勧めできるものではありません。

やはり初学者にはこまめにファイルをアップロードさせ、不具合が発生すればその都度、ミスを修正していく手法を採らせたほうが良かったのではないでしょうか。

それにもかかわらず著者がこのような手法を採らなかった理由を私なりに推測してみます。

ファイルをこまめにアップロードする手法を採らせる場合、必ず最初にindex.phpとstyle.cssをアップロードしなければなりません。そうしないとWordPressが起動しないからです。

ですがそれをすると著者が理想とするWordPressの作成手順が崩れるため、その点を嫌がったのかな? と思ったのですがどうでしょうか。

総合評価

最後に私の評価を書きます。
私がこの本に下した総合評価は、星4つです。

★★★★☆

読者層のズレを根拠に星3つにとどめるか、あるいは著者の意気込みを評価して星4つにするかで迷ったのですが、最終的に星4つとしました。

この本が最初から「脱初心者向け」「中級者を目指す人向け」だと世の中に伝わっていたら、Amazonレビューの低評価は減少したのに、と思うと大変惜しい気持ちになります。

Sassはちょっと早いかも…

お正月休みの間に勉強したことは、CSSグリッド以外にもう一つあります。

それはSassです。
CSSにちょっとしためんどくささを感じていた私は、便利と評判のSassを使ってみることにしました。

勉強方法としては、本屋さんで『Web制作者のためのSassの教科書』(平澤隆、森田壮)を買って読んでいました。
コマンドプロンプトの使用に戸惑ったうえ、Preprosの無料版が何度も有料版への案内を表示するのにイラッとしましたけどね。

さて、Sassを使った感想ですが、現時点ではそれほど有用性を感じませんでした。
確かにネストができたり、変数が使えたり、mixinでスタイルの固まりを定義できたりと便利な面があることは否定しません。

ですが「そこまで必要かな?」というのが現時点での偽らざる感想です。
これなら通常のCSSの使用とその応用で十分対応できるのでは? と感じています。

まあ、おそらくこれは私のCSSの記述量が少ないことも原因でしょうね。

私が作っているCSSの分量は、おおくても数百行程度です。
これが数千行とか、おなじCSSを延々と繰り返すようになればSassの必要性も増すんでしょうね。

そのようになれば「Sass、便利!」と叫んでいるかもしれません。

現時点での必要性はあまり感じませんが、将来を見越して、少しずつ使っていこうとは思っています。

CSSグリッドを覚えた話

意外に難しい「横並び」

ホームページ制作を始めたばかりのころ、意外に難しかったのが「横並び」です。

きれいに横に並ばなかったり、仮に横並びになったとしても不要な隙間ができたり…。
単純なはずの「横並び」がこんなに難しいとは思いませんでした。

横並びの問題はその後、clearfix(クリアフィックス)を覚えたことにより解決します。
参考にした書籍は『HTML5&CSS3デザインブック』(エビスコム著)です。

この本は第1章でクリアフィックスを使った横並べの手法が丁寧に書かれており、これによりきれいな横並びの手法を学ぶことが出来ました。

flexを知る

こうして「横並びにはクリアフィックス」することを学んだのですが、その後、display:flexで横並びにできるらしいと知りました。

けれど、ホームページを制作するにはHTMLやCSS以外にも覚えなければならないことがあるため、flexの勉強は後回しにしていました。

ですがいつまでもflexを勉強しないというわけにはいかないので、2019年の正月はflexの勉強をしていました。

参考にしたのは例によってエビスコムさんの『CSSグリッドで作る HTML5&CSS3』『HTML5&CSS3ステップアップブック』です。
どちらの本もCSSグリッドでホームページを作る方法が書かれています。

『CSSグリッドで作る HTML5&CSS3』は2018年の年末に発売された本です。この本が発売されたので、本腰を入れてCSSグリッドの勉強をする気になりました。
『HTML5&CSS3ステップアップブック』のほうにはflexの説明があります。

余談ですが、私はエビスコムさんの著作を気に入っています。
WordPressについてもエビスコムさんの著作で勉強させてもらいました。

もちろんエビスコムさんの本よりも優れた書物はたくさんあるのですが、安定的なクオリティで執筆されているのがエビスコムさんの本の特徴ですね。

CSSグリッドの感想

CSSグリッドを使ってみた感想ですが、確かにホームページ制作が楽になる気がします。
「なんでホームページ制作が楽になるの?」と突っ込まれると返事に困るのですが、なんとなく楽になります(笑)。

  • HTMLの記述をパーツ化できるから楽と感じるのか…
  • プロパティの利用範囲が広がるから楽と感じるのか…
  • あるいは最初に大枠を作ることで全体像が見やすくなるから楽と感じるのか…

う~ん、上手く説明できません。

上手くは説明できませんが、今後私はCSSグリッドでホームページを作るでしょうね。
数多くのホームページを作り続ければ、CSSグリッドの本質が見えてくるかもしれません。