Web制作者が持っておいて間違いない一冊！HTMLとCSSの必要な知識と最新テクニックをまとめて吸収できる良書

HTMLとCSSを真剣に学びたい人にお勧めの本を紹介します。
HTML5とCSS3の仕様書に基づいて、知識をしっかり身につけ、実践的なテクニックを本格的に学べます。Web制作者が持っておいて間違いのない一冊です。

実装の現場で必要とされる、リソースの先読みや画像の遅延読み込みなどの高速化テクニック、float時代のクリアフィックスを簡単に実現できるフロールートなど、必要な知識をまとめて吸収できます。

本書はコーダーの定番書である前書の第2版。
現在の最新仕様、HTMLは標準仕様はW3CからWHATWGに一本化され、CSSは各種機能の追加や主要ブラウザでの対応が進んでいます。ブラウザもChromiumベースのEdgeがリリースされ、使える便利な機能が増えています。

第2版はそれらに対応した解説書で、先日当ブログで紹介した:is()疑似クラス関数、min(), max(), clamp()比較関数、スクロールスナップなど、これからのWeb制作に必要となるテクニックも追加されています。

Kindle版も、同時発売！

• HTML5&CSS3デザイン 現場の新標準ガイド Kindle版

さらに、特典もあります！
サポートサイトからのダウンロードになりますが、特典PDFとして「HTMLとCSSのブラウザ対応一覧」「アニメーション補足解説」が収録されています。
IE対応の必要がなければ使用できるってのも一目瞭然！

そんな紙面をキャプチャで少しだけ紹介します。

本書の大きな特徴は解説がかなり詳しいことです。現在の最新仕様に基づいたHTMLとCSSの知識とテクニックをしっかり身につけることができます。

解説はテキストだけでなく、コードや画像も数多く掲載されており、非常に分かりやすいと思います。

最近のテクニックについても詳しく解説されています。
「あれは、どうすればいいんだっけ？」という時に、本書が必ず役立ちます。

実際に使わないようなデモが多くて残念ってことはありません。本書では実践的なデモをベースに解説されているのも大きな特徴です。

本書ではCSSとHTMLについてしっかりとした知識を身につけることができます。基礎知識だけでなく、デスクトップ・スマホでどのようにするかなど、実務に役立つテクニックに繋がります。

マージンを上と下のどちらに定義するか。マージンの相殺がいつ発生するのかを正しく理解していないと、思い通りのレイアウトができないで困ることがあります。
参考: marginの相殺を正しく理解しておこう！相殺はいつ起こるのか、相殺を回避するテクニック

レイアウトの現在の主流テクニックは、Flexboxです。基礎知識から、実践的なテクニックまで、詳しく解説されています。

Flexboxの唯一の弱点は、アイテム間のスペースでした。Chrome 84からサポートされたgapプロパティについても、取り上げられています。

CSS Gridを採用するプロジェクトも増えてくるでしょう。Flexboxに加えて、CSS Gridを使用することで、さらに柔軟に高性能なレイアウトを実装できます。

ヘッダのスティッキー配置や背景画像の配置など、最近のWebサイトで見かけるさまざまなテクニックもその仕組みから実装まで詳しく解説されています。

object-fitプロパティを使用すると、画像や動画を表示エリアのサイズに合わせてどうフィットさせるか決めることができます。CMSなど、サイズが不明な場合に非常に便利です。

フォームを実装するのが苦手だ、という人も少なくないと思います。フォームも実務レベルのテクニックまで詳しく解説されています。

CSSアニメーションも最近では欠かせません。正しい基礎知識とちょっとしたテクニックを身につけるだけで、気持ちいい動きを提供できます。

HTML5 & CSS3デザイン 現場の新標準ガイドの目次

1. HTML

   HTML5とセマンティクス

   コンテンツモデル

   HTML5の構文規則

2. Webページの作成とメタデータ

   Webページの基本設定

   メタデータ

   ボキャブラリーを使ったメタデータの記述

3. コンテンツのマークアップ

   コンテンツのマークアップ

   セクション

   セクションに関する情報

   グルーピング・コンテンツ

   テキストレベル・セマンティクス

   エディット（編集）

   インタラクティブ

   スクリプト

   グローバル属性

4. CSSの適用

   HTMLドキュメントのプレゼンテーション

   ボックスとボックスモデル

   プロパティ

   セレクタ

   メディアクエリ

5. ボックスのレイアウト

   ボックスモデル

   ボックスのレイアウト

   特殊なボックス

   ボックスに関する付帯事項

6. フレキシブルボックスレイアウト

   フレキシブルボックスレイアウト

   フレックスアイテムの横幅

   フレックスアイテムの並び順と並べる方向

   フレックスアイテムの位置揃え

7. グリッドレイアウト

   グリッドレイアウト

   グリッドの作成

   ラインの指定によるグリッドアイテムの配置

   エリアの指定によるグリッドアイテムの配置

   グリッドアイテムの間隔

   グリッドの位置揃え

   グリッドアイテムの位置揃え

8. テーブル

   テーブルレイアウト

   テーブルのグループ

   テーブルに関する付帯事項

9. テキスト

   書式設定

   行内のコンテンツの位置揃え

   改行・タブ・スペースのコントロール

   テキストの装飾

   テキストのレイアウト

10. エンベディッド・コンテンツ

    エンベディッド・コンテンツ

    画像・ビデオの表示エリアへのフィッティング

    CSSによる画像の表示

11. フォーム

    フォーム

    フォームコントロール

    フォームコントロールの属性

12. 特殊効果

    トランスフォーム

    アニメーション

    エフェクト

HTMLとCSSも現在のWeb制作に合わせて、進化が続いています。
最新の仕様と使い方、新しい機能やテクニックをしっかり学べる一冊です。

献本の御礼

最後に、献本いただいたマイナビ出版の担当者さまに御礼申し上げます。

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

• お問い合わせ｜コリス