HTMLとCSSの極上テクニック！ヤフーの現役フロントエンドエンジニア陣が本気で解き明かすオススメの本

本書にはHTML、特にCSSに携わる人が学ぶべきものがたくさんあります。

最前線の現場でHTMLとCSSがどう書かれているのか、Sassは制作で実際にどのように取り入れているのか、Gulpの使い方やBEMをベースにした命名規則の策定など、CSSの設計や管理の仕方、考え方のプロセスや効率的に書く方法などが詳しく解説されています。

今の自分に、5年後の自分ために、絶対熟読しておきたいオススメの本を紹介します。

本書はヤフー株式会社の現役のフロントエンドエンジニア陣が惜しげもなく、実際に業務で使用されているHTML/CSSの記述ルールやテクニックをベースに、より多くの制作現場で利用できるよう解説されたものです。
大規模サイトはもちろん、小規模サイトやランディングページなど、一つのプロジェクトを制作する上でSassをつかった実践的なCSS設計について学ぶことができます。

Kindle版は、お値段が少しお得です。

• HTML/CSSデザイン講義（Kindle版）

紙面のキャプチャで、中身を少しだけご紹介。

レスポンシブ対応、柔軟なFlexboxのレイアウト、100%幅と固定幅の混在、画像のさまざまな使い方、といった最近のWebページで見かけるテクニックをはじめ、要素は同じだけどレイアウトが異なる再利用の方法、似ているけど少しだけ異なる要素の作り方など、実務で必要となるさまざまなテクニックが盛り込まれたページを作成しながら、学ぶことができます。

本書の大きな特長はSassベースであるということです。Sassの解説書なら当たり前のことですが、HTML/CSSの解説書、そしてサイト制作の解説書としては貴重な一冊になると思います。
Sassの使い方も導入から実務レベルまで詳しく解説されていますが、SassやCSSの現在の使い方だけでなく、解説されている視点や考え方は特定の技術に依存されるものではないので、PostCSSなど次世代のCSSになっても使えるテクニックです。

1章はSassを使うための開発環境を構築します。初心者の人でも丁寧に分かりやすく解説されているので、心配ありません。もちろん、WinでもMacでもOKです。

HTMLも一般的な解説書とは少し異なります。コーディング規約をベースに、HTMLをより効率的に記述するためのテクニック、再利用やメンテナンス性を考慮したTipsが満載です。
HTMLの基礎的な解説は、付録して巻末で解説されています。

超大型ポータルサイトのコーディングを僕も担当したことがあるのですが、例えばスペース一つ、インデントの付け方、入れ子の記述方法、命名規則など、ちょっとしたことに頭を非常に使いました。でもそれが結局一番の近道になるのですよね。

Sassを使用して作成するので、Sassの解説書としても非常に詳しく、そして分かりやすく説明されています。Sassを現在使用している人は、おさらいがてらにざっと読むだけでよいでしょう。

本書はページ作成のフローも通常の解説書とは異なり、実践ベースです。ページごとに作成していくのではなく、パーツやコンポーネントごとに作成し、それらを組み立ててページを作成します。

CSSの設計は、BEM, OOCSS, MCSS, SMACSSなどが有名ですが、本書ではBEMをベースにカスタマイズしていく課程、なぜそうするのか考え方も分かりやすく解説されています。
そのまま使うだけでなく、自分用の指針や考え方を取り入れてカスタマイズすることもできます。

HTMLではページにどのようなパーツやコンポーネントがあるのかを確認して、効率良く作成していきます。

スタイルもSassでコンポーネント単位で定義します。
Sassベースで実装をここまで詳しく解説されている書籍はない、と思います。

コンポーネントを作成したら、それらを組み合わせて、レイアウトしていきます。本書ではコンポーネント用のSassとレイアウト用のSassは別のファイルとして独立して構成させており、大規模・小規模に適したファイルの管理方法なども詳しく解説されています。

ページを単に作成していくだけの解説ではなく、よりデザインの幅が広がるテクニックやアイコンフォント・Webフォントや再利用や修正対応など、かなり実践的なテクニックも身につけることができます。

ページを作成していくと、新たに作らなくてはいけないものと再利用・応用できるものが分かるようになります。今までに作成したCSSをどのように利用しながら、新しいページを作成するのか、作業の効率化は必読です。

HTML/CSSデザイン講義の目次

1. Sassコンパイル環境の構築

   ダウンロードファイルについて

   開発環境を構築しよう

2. HTML/CSSとSassの基本

   HTML

   CSS

   Sass

3. よいCSSを書くためのHTMLマークアップ ～CSS設計～

   デザインカンプを確認し、CSS設計を理解しよう

   サイト制作の下準備をしよう

   Headerを作成しよう

4. Sassを使ったサイト制作 その1（ヘッダーなど）

   ヘッダーのスタイルを作成しよう

   レイアウトを作成しよう

5. Sassを使ったサイト制作 その2（メインコンテンツやフッターなど）

   メインイメージを作成しよう

   コンテンツ部分を作成しよう

   フッターを作成しよう

   フォルダを整理しよう

6. プロらしく「魅せる」テクニック ～トップページの総仕上げ～

   アイコンフォントを活用しよう

   WebFontを利用しよう

   突発的な修正に上手に対応しよう

   Webページをレスポンシブ化しよう

7. パーツの組み合わせによる「高速」Webページ制作

   キャンペーンページを作成しよう

   サイドバーのある画面を作ろう

付録

• HTMLの基礎
• HTMLとマークアップについて

本書のデータは特設サイトからダウンロードできます。著者が業務で使用されているコーディング規約も含まれており、HTMLとCSSのアイデアも盛り込まれています。
でも規約で本書の参照ページ数が準備用データになっているので、対応をお願いします。

コード自体やこういった規約をひとつ一つ読み解くと、その考え方も見えてきて、よりいっそうマークアップするのが楽しくなると思います。

献本の御礼

最後に、献本いただいたSBクリエイティブの担当者さまに御礼申し上げます。

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

• お問い合わせ｜コリス