昨年末から進めてきたエビスコムのレッスンブックのリニューアルが一段落しました。これまでとはタイトルを大きく変更したものがあるため、Webページなどでご紹介いただいている情報とうまくリンクできていないケースもあるようです。そこで、改めてご案内させていただきたいと思います。5.xに対応したレッスンブックとしてリニューアルしました。0(ゼロ)からテーマを作成していくスタイルはそのままに、新たに標準エディタとなったGutenberg(グーテンベルク)にしっかりと対応したテーマを作成していきます。レイアウトはFlexbox(フレキシブルボックス)を採用するとともに、Gutenbergをじっくりと扱っているため、WordPressの本なのにCSSが多めというエビスコムらしい構成となっておりますので、書店で手にとって確認していただければと思います。5.x対応版」の書籍情報フレキシブルボックスで作るHTML5&CSS3レッスンブックご好評を頂いてきた「HTML5&CSS3レッスンブック」をFlexboxベースで全面的にリニューアルしたのが、「フレキシブルボックスで作るHTML5&CSS3レッスンブック」です。モバイルファーストな制作手順やレスポンシブの設定などもしっかり盛り込んであります。Gridを全面的に採用したレッスンブックです。フロートからFlexboxへとつながる従来のレイアウトスタイルとは、全く異なるレイアウトスタイルなため、新しいレッスンブックとして独立しています。Gridを使ったレイアウトの自由度を感じていただける構成となっています。Gridを扱った書籍はこちら「HTML5&CSS3ステップアップブック(2018)」の書籍情報3つのレッスンブックの共通点HTML&CSSを学ぶ方がつまずく大きな原因は、見えないことが多すぎることだと考えています。邪魔をしているのは誰?ボックスの構造はどうなってるの?マージンやパディングが機能してくれない。マージンの相殺?どこがFlexboxやGridになってるの?などなど...。ページの表示とコードを見るだけでは、ベテランでもなかなか難しいものばかりです。これらが見えるようになれば、理解は一気に深まりますし、自分で問題を発見して解決できるようにもなります。そんな用途で強力なのがWebブラウザーに用意されているデベロッパーツール(開発ツール)です。デベロッパーツールを使えば、どれもかんたんに確認できるようになります。見た目が難しそうで、とっつきにくい...。そこで、新しいレッスンブックでは、サンプルを制作する中で、デベロッパーツールを使うことを自然と身に着けていただけるように構成しています。Gridもしっかりとポジションができてきたようで、エビスコムの新しいレッスンブックも出番がやってきた感じでしょうか。書店で見かけたら、ぜひ手にとっていただければと思います。読んでからご利用ください。コーディング・プラクティスブックデザインカンプと指示書に従い、Webページをコーディングしてみる実践シリーズです。