HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方

「モダン」なんて単語がついてるから、さぞかし見たことのないコーディングが学べるのだろう、なんて思っていました。しかし、実際にページを読んでいくと、そんな予想をいい意味で裏切ってくれる一冊だとすぐにわかりました。

本書では以下の3つのパターンのデザインのコーディングを完成させていく方法でコーディングが学べます。

・スタンダードレイアウト
・グリッドレイアウト
・シングルページレイアウト

この3つのレイアウトって実際に運用されているWebサイトの定番レイアウトなんですよね。これがすごくよかったですね。

HTMLの入門書ってほとんどがタグの使い方を解説しているものばかりだから、本を読んで勉強しても、

「こんなページ、実際にはつくらねえだろ・・・」

っていうデザインばっかりなんですよね。

しかし、このモダンコーディングの本は、そういった入門書を一通りこなした人が、実際のWEB制作の現場で使えるコーディングを学ぶことができる一冊に仕上がっています。私のようにすでにWEB業界でマークアップエンジニアとして働いている人にとっても、「あるある！」っていう感じのコーディングや、「へー、こういうやり方もあるんだなぁ」といったコーディングまで幅広く取り扱っていて、結構楽しく読むことができました。

本書で出てくる話題は、HTML5とCSS3に絞られています。PHPやJavaScriptの話題はほとんどありません。また、コーディングの解説の中で登場したHTMLやCSSのネタは「ONE POINT」としてコラム的に別箇取り上げられ解説されています。とても丁寧でわかりやすいと思いました。

さて、本書で取り上げられているコードですが、現役のマークアップエンジニアの私からみても、ほとんど無駄がなく洗練されているコードだと感じました。after疑似要素やbefore疑似要素の使い方もすばらしく、一番最後に取り上げられているシングルページレイアウトの完成されたコードなどは、本当によく考えられたコードだなぁと思いました。ちなみに、この最後のシングルページレイアウトに関しては、最終的にレスポンシブのコードとしてスマートフォン対応までされています。本書はレスポンシブがメインの書籍ではないので、そんなにガツガツとメディアクエリーを書くわけではないのですが、PC向けに作ったサイトをレスポンシブ対応したコードにするのに最低限必要な考え方も学習できます。

とまぁ、ここまで褒めまくりましたが、あえて難点を言うと、まったくの初心者が読むにはちょっと内容が難しいかなぁという点ですね。ある程度、コーディングができる人が対象の本だと感じました。だからこそ、250ページという薄さでこの内容が実現できているんでしょうね。私も1週間という期間で本書を2周することができました。本書を読んで私も新しく覚えたこともあったことだし、コーディングの実力を伸ばしたいすべてのWEBクリエイターにとって、お勧めできる一冊です。