「フレキシブルボックスで作るHTML5&CSS3レッスンブック」こそ真のHTML&CSS入門書だ

2019年3月にソシムより出版されたエビスコムの「フレキシブルボックスで作るHTML5&CSS3レッスンブック」(以下、フレキシブルボックスレッスンブック)を読んだので、紹介したいと思います。

これまでのフロートを使ったレイアウトから脱したい方や、これからHTML&CSSを勉強しようという方にもおすすめのレッスンブックになっています。

ふたつになったレッスンブック

2018年12月に「CSSグリッドで作るHTML5&CSS3レッスンブック」(以下、CSSグリッドレッスンブック)が発売されたばかりでしたが、なんと今度はフレキシブルボックス(Flexbox)に対応したレッスンブックが新たに登場。

まさかこう来るとは予想外でした。CSSグリッドのレッスンブックとかトガってんなぁ~と思っていたのですが、グリッドレイアウトとフレキシブルボックスの2パターンのレッスンブックだったんですね。

少し気になった点としては、これからHTMLやCSSを勉強しようという人も対象にしているレッスンブックなのに、フレキシブルボックスとかCSSグリッドとか専門用語をタイトルに用いて大丈夫なの?とは思いましたが……
選ぶ側からしたらわかりにくそう……

この本の特徴について

ここからはフレキシブルボックスレッスンブックの特徴について、紹介していこうと思います。

書籍の構成がすばらしい

エビスコム本を読むと毎回思うことなのですが、今回のこの書籍でもWebサイトを完成させていくまでの過程の構成がすばらしいと感じました。

ステップバイステップでWebサイトを実際につくりながら、HTMLやCSSの仕組みについても学んでいくことができます。
この書籍では、制作ステップとHTML&CSSの仕様について解説しているページが分かれた構成になっているので、すでにHTMLなどの基本は分かっているよという方は、制作ステップだけ読み進めていくことも可能です。

巷の一般的なHTML&CSS本だと、書いてあるHTMLやCSSの解説を読むのが億劫になるのですが、なぜかエビスコムの本だとコードを打ち込みながら制作していくうちにもっと学びたい、もっと知りたいという意欲が湧いてくるんですよねぇ。不思議なモノです。

新しくなったレッスンブックではモバイルファーストでの作成法になってますし、もう言うことなしというか、完成形に近いのではないでしょうか。

Firefoxの開発ツールがめっちゃ使える

今回のこのフレキシブルボックスレッスンブックでいちばん優れていると感じたのが、Firefoxの開発ツールで確認しながらWebサイトを制作していくところです。

他でもChromeのデベロッパーツールなどを紹介・説明している書籍もあったりしますが、ここまで開発ツールを活用している書籍はなかなかないと思います。

これによりマージンやパディングなどもより視覚的にわかりやすくなりますし、フレキシブルボックスについての構造も理解しやすくなりました。

flex-shrinkの縮小などいまいちわかりにくい処理も、開発ツールを確認することで理解しやすい

CSSグリッドレッスンブックのときもFirefoxをページの表示確認に使用していましたが、フレキシブルボックスだとよりFirefoxの開発ツールの便利さを体感することができます。

私は普段、Chromeのデベロッパーツールを使っているのですが、Firefoxの開発ツールも使ってみるとめちゃくちゃ有能で使いやすいですね。

さいごに

この記事のタイトルにも書いた「フレキシブルボックスレッスンブックこそ真のHTML&CSS入門書だ」というのは、

  • CSSグリッドレッスンブックよりも、普遍的で初心者に適した入門書である
  • 他のHTML&CSS本と比較しても優れた入門書で、自信をもっておすすめできる

ということを伝えたかったのであります。

フレキシブルボックスレッスンブック、CSSグリッドレッスンブックはどちらも中身の構成などは似ていますが、ふたつのレッスンブックを読むことでレイアウトの違いなど学ぶことができるので、両方ともに読んでみるのが良いかと思います。

エビスコム本は楽しく読みながら学ぶことができるので、やっぱり最高ですわ。

一歩先を進んだ入門書「CSSグリッドで作る HTML5&CSS3 レッスンブック」

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 レッスンブック」は意欲作であり、私にとってちょっと遅れてやってきたクリスマスプレゼントとなりました。
中身は面白いからぜひ一度手にとって読んでみてほしいです!

CSSグリッドでシンプルな文書構造を実現させる「CSSグリッドレイアウト デザインブック」

2018年6月に発売されたエビスコムの「CSSグリッドレイアウト デザインブック」を読んだので、紹介したいと思います。
もちろん、ちゃんと全体のコードを1度手打ちして試してみました。

CSSグリッドの可能性とWebデザインの自由が広がる

この本を読んだ印象としては、やはり「HTML5&CSS3ステップアップブック」の発展版といった感じでしょうか。
「HTML5&CSS3ステップアップブック」ではパーツの横並べとかはフレキシブルボックス(Flexbox)も利用していましたが、「CSSグリッドレイアウト デザインブック」ではそれさえも全てCSSグリッドで行っており、「こんなところまでやっちゃうのかよっ!?」と思っちゃうくらい、HTML/CSS本としてはトガっているかもしれません。

また、大したCSSグリッドに関する説明もなく、いきなりつくりはじめていくので(巻末にはちゃんとCSSグリッドのリファレンスは付いています)、「HTML5&CSS3ステップアップブック」や「HTML5&CSS3デザイン 現場の新標準ガイド」を読んで、ある程度CSSグリッドを理解しておいた状態から入っていったほうがより分かりやすくなるかとも思いました。

まぁそれでも、完成見本の図では難しそうに思えたレイアウトもCSSグリッドを用いれば、意外と簡単に実装できてしまうというのが、やはりCSSグリッドの優れたところなのではないでしょうか。
(他のエビスコム本と比べると)サンプルでつくるデザインもおしゃれでかっこよいため、つくる際のモチベーションにもつながり、実際に自分の手でコーディングして進めてみてほしいと思います。

実際につくってみたサンプルのスクリーンショット

ほんとうに伝えたいのはHTMLの文書構造を意識したWebデザイン

この本を読んでいってみると分かるかと思うのですが、「CSSグリッドレイアウト デザインブック」で伝えたいのは単純にCSSグリッドの使い方やテクニックだけでなく、いかにHTMLとCSSを分離させて文書構造を意識したサイトの組み立てられるかというところにあります。

この本を読んで感心したのが、レイアウトやレスポンシブのために<div>のコンテナを追加したり、パーツの並びを変えたりするのではなく、CSSグリッドを利用することでシンプルなHTML構成の実現が可能になるという点です。

サンプルをつくっていくときもまずはじめに完成見本を見て、パーツごとに分けてページの流れ(動線)を確認し、HTMLに落とし込むという作業手順になっています。

サイトをつくっていくときに始めはある程度HTMLの構造を意識はしているつもりなのですが、思ったレイアウトを実現するために<div>を追加したり、パーツの並びを意図的に変えたりと、いつのまにかHTMLの文書構造を軽視しがちになっていることに気づかされました。

ただ、サンプルを作成してレスポンシブでデザインを整えていく流れが、主にタブレット → パソコン → スマートフォンという順番だったのが、個人的にはいまいちというか、気になった部分ではあります。
CSSグリッドの魅力を伝える本であるため、仕方ないところはもちろんあるかと思いますが、最近の環境を考えるとスマートフォン→ タブレット → パソコンもしくは、その逆の流れのほうが仕上げていく際にはスムーズなような気がしています。

CSSグリッドの世界へようこそ

この本では主に3つのレイアウト(6種類のデザイン)と、おまけみたいなナビゲーションのサンプルがあり、ステップ・バイ・ステップでCSSグリッドを学ぶことができるエビスコム本らしい仕上がりになっていて、個人的には満足な内容の一冊でした。

このように、はじめからしっかりとデザインが決められているレイアウトをつくっていく場合には大いにCSSグリッドが役立つでしょうが、汎用的(大衆的?)なサイトをつくっていこうとすると、現段階ではまだまだ難しいところや弊害もあるかと思います。
後からコンテンツを追加するかもしれない場合のメンテナンス性や、他の人も利用するといったときにうまく表示することができないといったトラブルなんかも起こりそうな気もしますし、IE11に対応するために古い規格のプロパティを使用しなければならないなどといった制約もあったりするので、しっかりとつくるまえの計画を立てることが大事となりそうです。

もし、CSSグリッドを積極的に使っていくなら、ときには思い切った割り切りも必要かもしれません。最近あたらしくなったエビスコムのサイトにもCSSグリッドが活用されていますが、IE11で表示させるとかんたんな最小限のレイアウトになっており、他ブラウザの使用を推奨するメッセージがあらわれます。
最近はスマホでサイトを見る人が増え、パソコン自体から見る人も減ってきているため、こういう思い切った手法も案外悪くないのかなぁと感じました。スマホ専用サイトも増えましたし……

エビスコムのサイトをIE11で見たとき、このように表示されます

この「CSSグリッドレイアウト デザインブック」は、CSSグリッドの世界の入り口へあなたを連れ出していってくれることができるでしょう。自由なWebデザインがつくれるようになったことで、よりデザインの魅力や必要性が高まってくるでしょうし、その考えたデザインを実装、実現するためのテクニックがつくる側の人にも求められてきそうです。

「CSSグリッドレイアウト デザインブック」の発売が楽しみでならない

2018年6月に発売予定の「CSSグリッドレイアウト デザインブック」が今から楽しみでならない私です。

最近のエビスコムは冬にソシムから書籍を出して、夏にマイナビブックスから出るという流れになってますね。

マイナビブックスの紹介ページなどにサンプル画像が載ってありましたが、「HTML5&CSS3ステップアップブック」の発展版といった感じでしょうか。

私は「HTML5&CSS3ステップアップブック」でCSSグリッドレイアウトを覚えて以来、CSSグリッドを使いまくり、自身のWordPressテーマでもCSSグリッドでレイアウトしてしまいました。

IE11への対応が面倒ではありますが、レイアウトの幅が広がるので便利は便利です。

特にこの「CSSグリッドレイアウト デザインブック」が魅力的なところは、見本のデザインがかっこいいというところ。

こういっちゃ何ですが、最近のエビスコム本の見本はちょいダサ感があったので……

CSSグリッドだともっといろいろなことができる気がしているので、レイアウトソフトを使ってのデザインも勉強していきたいですね。

CSSグリッド&フレキシブルボックスが学べる「HTML5&CSS3ステップアップブック」

2018年1月にエビスコムより発売された「HTML5&CSS3ステップアップブック」をさっそく読んでみました。
この本ではCSSグリッドレイアウト(CSS Grid)、フレキシブルボックス(Flexbox)でwebページを制作していくやり方を学ぶことができます。

前作の姉妹書「HTML5&CSS3デザインブック」ではフロート(float)を使ってレイアウトしていましたが、「HTML5&CSS3ステップアップブック」は全てのサンプルをグリッドレイアウトを使ってレイアウトしています。
サンプルのなかには「HTML5&CSS3 デザインブック」内でfloatで作ったページをCSSグリッドで作り変えているものもあり、CSSグリッドでのレイアウトがいかに手軽で、これによりデザインのアイデアや幅もさらに広がるのではないでしょうか。

グリッドレイアウトに衝撃を受ける

私は大が付くほどのエビスコムファンで、近年発売されたエビスコム著の本はすべて購入して読んできましたが、久々におもしろい本だと感じました。

グリッドレイアウトは「HTML5&CSS3デザイン 現場の新標準ガイド」、フレキシブルボックスについては「6ステップでマスターする 「最新標準」HTML+CSSデザイン」である程度は理解していたつもりでしたが、この本を読んでグリッドレイアウトにはこのような使い方もあるのかと衝撃を受けるくらいの驚きもありましたし、フレキシブルボックスについてもより理解が深まりました。

それくらいこのグリッドレイアウトには可能性を感じます。これを使いこなせるようになれば、さらにサイトのデザインを練るのが楽しくなるでしょうし、webデザインについてももっと勉強したくなります。(Photoshop、Illustratorは未経験)

CSSグリッドレイアウトでつくったサンプル

グリッドレイアウトに魅力を感じる分、こやつの存在が……

グリッドレイアウトにはそれだけの魅力がある分、残念だと感じてしまうのがIEの存在です。
多くのブラウザはグリッドレイアウトに対応していますが、IE11は未対応となっており、IEで確認してみるとグリッドレイアウトがまったく反映されていません。
グリッドレイアウトの古い規格には対応しているようですが、IEのために対応を考えたりしなければいけないというのは非常に面倒です。
もちろん「HTML5&CSS3ステップアップブック」でも未対応なブラウザへの対策方法が載っており、グリッドレイアウトと同じレイアウトを再現する方法、1段組みでレイアウトを整える方法を紹介しています。
グリッドレイアウトと同じデザインを再現しようとすると、古い規格だと制限もあってイライラしそうなので、IEだけ別に体裁を整えた形にやるのが良いかなぁと今のところ思っています。

グリッドレイアウトで未来が広がる

グリッドレイアウトにどっぷりと浸かってみて、レイアウトの新たな未来を感じることができましたし、もっといろんな使い方もあるはずでしょうから、まだまだHTML/CSSも奥が深いんだなぁと改めて実感しました。
「HTML5&CSS3ステップアップブック」はweb制作のステップアップにピッタリな、間違いなくオススメの本です!

とりあえずは私がつくったWordPressのテーマをグリッドレイアウトで書きなおしてみようかなぁと考えているところです。(IEにうまく対応することができればですが……)