HTML5/CSS3モダンコーディング【感想/書評】3つのレイアウトが学べる本

book review



こんにちは! カブラギ (@T_W_H_R_C) です。


吉田 真麻著『HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方』(初版2015年11月2日) を読了したので、感想とポイントをご紹介していきます。


初版が 2015 年と結構古い本ですが、今でもいろんなブログなどで紹介されている本です。
本書ではサンプルコードのテキストを見ながら、3種類のレイアウトを実際に手を動かしながら学ぶことができます。


この記事が購入を迷っている方の参考になったら幸いです。

 

こんな方におすすめ

 

  • HTML/CSSに少し慣れてきた。
  • Progateやドットインストールにちょっと飽きた
  • 色んなデザインに触れてみたい

この本の購入経緯

2019 年からプログラミングの学習をしていまして、Progate やドットインストールも飽きてきたので、ネットの海を彷徨っていたところ、この本に出会いました。


結構色んなブログや WEB サイトで紹介されていて、いい評価を受けていたので、気になって購入しました。
Amazon でも高い評価を受けています。

著者情報

吉田 真麻(よしだ まあさ)

1991年生まれ。中学時代に個人のモバイルサイトを作ったことがきっかけでHTML/CSSコーディングの面白さを知り、高校・大学と学業のかたわら趣味仕事問わず複数のサイト制作を行う。19歳の頃から本格的にWeb制作業に就き。その後PHPとJavaScriptに出会ってプログラミングに目覚める。

現在の活動は主にフロントエンドエンジニアとして、HTML/CSS/JavaScriptでのシングルページアプリケーションの開発や個人のプロダクト制作、イベント登壇など。

コーディングやプログラミングは仕事としても趣味としても楽しんでおり、その楽しさを周りの人にも伝えていきたいと思っている。

(本書帯より)

ネットで検索すると、Schoo の講師などもされてるようですね。

HTML5/CSS3モダンコーディングの概要

HTML/CSSの初心者から中級者の入り口の本といったイメージです。
Progateやドットインストールなどで、ある程度基礎が身について、次の学習はどうしよう?というときにちょうど良いレベル感の本だと思いました。


本書では、3 つのレイアウトを学ぶことが出来ます。

・スタンダードレイアウト

・グリッドレイアウト

・シングルページレイアウト

どのデザインも色んなWEBサイトで今でも現役で使われているデザインです。

スタンダードレイアウト

book review5

今でもよく見るタイプのレイアウトですね。
ブログとかニュースサイトとかでよく使われているのを見かけます。

グリッドレイアウト

book review1
book review2

グリッドレイアウトでは「Mansohry」というライブラリを使ったデザインの作成します。
自動的にレスポンス対応になるので、ウィンドウを縮めるとパネルが再配置されます。


かっこいいですよね。
「Pinterest」などがこのグリッドデザインですね。

シングルページレイアウト

book review3
book review4

シングルページレイアウトでは、「ランディングページ」っぽいデザインが作れます。
1ページで作成するランディングページは HTML/CSS を学習し、アウトプットする方法としてちょうど良いので、とても参考になります。

本書の良かった点

本書を最後まで進めたなかで、良いと思ったところは大まかに以下のようなところでした。

HTML5/CSS3モダンコーディングで良かったところ

1. :after, :before を使う部分が多い

2. transform:rotate など、あまり使うことがなかったCSSに触れた

3. 「セルフコーディング」で自力が付く

ひとつずつ解説します。

:after, :before を使う部分が多い

いきなり個人的な事情になりますけど、ボクは「:after, :before」が苦手であまり触れてきてませんでした。


なんとなく理解してる程度でスルーしてきていたので、本書のなかで「:after, :before」に多く触れられて良かったです。

 

transform: rotate など、あまり使うことがなかった CSS に触れた

3つのデザインパターンの中で、多くの CSS を使うことになるのですが、「transform: rotate」などのここに至るまであまり使うことがなかったCSSまで使っているので、単純に知見が増えました。

 

「セルフコーディング」で自力が付く

この手の本は、サンプルのコードをひたすら写すだけになりがちですが、本書では「セルフコーディング」という項目があり、完成したデザインに対して、一工夫入れるというところがあります。


回答は本書の後半にありますが、基本的には自分で考えてコードを書く必要があるので、自力がつきやすいと感じました。

 

本書の悪かった点

正直あまり悪かった点はないんですが、古い本なので Flexbox とか比較的新しい技術には触れられていません。


あと、途中あまり画像が挿入されていないので、自分のコードがサンプルと一致して進んでいるかが確認しずらかった程度です。

感想のまとめ

いかがだったでしょうか。
難易度としても、学べる範囲としても良いレベルの本だと思います。


まだこの手の本を多く読めていないので、比較する対象が少ないですが、先日読んだ『HTML&CSSとWebデザインが 1冊できちんと身につく本』より、ワンランクレベルが高い本という感じです。

 

まとめ
・HTML/CSS初心者卒業のための本。

・定番のデザインパターンを学べる。

・自分のなかのTIPSが増える。

以上『HTML5/CSS3モダンコーディング【感想/書評】3つのレイアウトが学べる本』でした。
ここまで読んでいただいてありがとうございました。



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ABOUTこの記事をかいた人

北海道札幌住み、昭和生まれの30代独身。 職業はシステムエンジニア的な何か、多分同年代では低所得者。 『金持ち父さん・貧乏父さん』を読んで、人生をこのまま終えたくないと本気で思い、金融投資や自己投資に目覚める。 月10万-20万PVの小規模なブログメディアの運営に携わったことがあるため、その経験を活かし個人ブログを開設。