HTMLとCSSの実務レベルの作業フローや思考プロセスがていねいに解説された、Web制作に真剣に取り組みたい人にお勧めの本 -教科書では教えてくれないHTML＆CSS

HTMLもCSSも一通り勉強した、でも実際にWebページを実装しようとするとどこから手をつければよいか悩んでしまう。そんな人にお勧めしたい、実装の作業フローと思考プロセスをくわしく解説した良書を紹介します。

本書は通常の解説書とは一線を画すもので、現場レベルの作業や考え方を基礎からていねいに解説したものです。実装のテクニックもたくさん解説されており、さまざまなプロジェクトで役立ちます。

本書は「HTML5&CSS3デザインレシピ集（紹介記事）」「WordPressデザインレシピ集（紹介記事）」などでお馴染み、狩野 祐東氏の新刊です。

「教科書では教えてくれない」とあるように、入門書や講座では学べない現場レベルの実装を基礎からていねいに解説しています。自分のブログをちょっとつくってみたいという人向きではなく、仕事としてWeb制作に携わりたい人向けの解説書です。

Kindle版も発売されています！

• 教科書では教えてくれないHTML&CSS Kindle版

版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。

本書は8章構成で、デザイナーが作成したデザイン画像を元に、ゼロからHTMLとCSSを書いてWebページを実装するフローとプロセスを解説していきます。定番のレイアウトをはじめ、さまざまなUIコンポーネントが含まれており、現場レベルの実装テクニックを学べます。

デザイン画像をもらった時に最初にすることは、デザインの分析です。トップページ・配下ページ・フォームページなど、サイトを構成するページの全体を分析し、コードが書けるようになるまでデザインをコンテナとモジュールに分割します。

第1章では、すべてのページに共通するテンプレートを作成します。その流れで、HTMLとCSSの中級者レベルの基礎知識も解説されています。

もちろん、実践的な解説も充実しています。共通で使用するレスポンシブの設定、画像の処理、フォントサイズの調整など、一つずつ進めていきます。

ゼロからWebページを実装する次のフローは、レイアウトの大枠を組むことです。デザイン画像で分割したコンテナを実装します。

コンテナに含まれている要素は、モジュールと呼びます。例えば、ヘッダのモジュールには、ロゴ・ナビゲーションなどがあります。これらをどのようにデザイン画像から分割するのか、余白の処理はどうするのか、要素の数は増減するのか、スマホとデスクトップでどう変化するのか、などを考慮して実装していきます。

本書では「こう実装しなさい」という教え方ではありません。もちろん、実装コードは解説されていますが、デベロッパーツールで確認しながら、そして修正方法、エラーが表示された時の対応方法などもくわしく解説されています。

大枠の実装が完了したら、第3章ではメインコンテナのモジュールを実装します。ここでもいきなりHTMLを書くようなことはしません。コンテナに分けたデザインをさらにモジュールに分割し、少しずつ実装していきます。

ここでのモジュールはシンプルなHTMLとCSSで実装できるものが多いですが、多彩なバリエーションも解説されています。テキストを強調するマーカー、Webフォントの使用、リストの装飾、テキストの先頭にアイコン、ボックスの囲み罫、チャット形式の会話コンテンツなど、実装テクニックがていねいに解説されています。

第4章から8章まで、ヘッダ・フッタ・トップページ・配下ページ・フォームページを実装していきます。

解説も非常にくわしく、実装のポイントや実践的な作業フローの中に隠されているプロの経験が言語化されています。

教科書では教えてくれないHTML&CSSの目次

教科書では教えてくれないHTML&CSSの目次

教科書では教えてくれないHTML&CSSの目次

教科書では教えてくれないHTML&CSSの目次

教科書では教えてくれないHTML&CSSの目次

教科書では教えてくれないHTML&CSSの目次

HTMLとCSSに真剣に取り組みたい人、初心者向けの解説書を卒業した人、現在仕事で従事していて自分のやり方を見直したい人などにお勧めします。
実装のテクニック的にも興味深いものがたくさんあるので、さまざまなプロジェクトで役立ちます。

献本の御礼

最後に、献本いただいた著者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス