flexboxもこれで完璧にマスター！HTMLとCSSの最新の知識とテクニックが詳しくまとめられたオススメの本

レイアウトはflexboxが標準になり、HTML5.1でsection要素や見出しの使い方が変更され、Web制作の現場で新しい知識の必要性が求められています。多様化するWebページを実装する最新の知識とテクニックが詳しくまとめられたオススメの本を紹介します。

モバイルファースト・オンリーでデスクトップからスマホが主流になり、ブラウザのシェアはChromeが頭一つ抜け、IE9などの古いブラウザはサポートが終了し、Web制作の環境が大きく変化していく中、HTMLもCSSも現状により適した実装に進化しています。

2016年末から2017年にかけて、HTMLとCSSでは大きな動きがありました。

• HTML5.1の勧告
  参考: HTML 5.1で変更されたsection要素の使い方、header要素とfooter要素のネストについて解説
• レイアウトはfloatからflexboxに、そしてCSS Gridも主要ブラウザがサポート
  参考: CSS3 Flexbox の各プロパティの使い方を詳しく解説
  参考: CSS Grid Layoutの実装で必要な基礎知識、主要なプロパティと用語を解説
• displayプロパティのアップデート
  要素がどのようなボックスを生成するかdisplay-outsideとdisplay-inside。

本書はW3CのHTML5.1、およびCSS3の仕様書に基づいて、知識をしっかり身につけ、実践的なテクニックを本格的に学べる一冊です。
コーディングのスキルを磨きたいと考えている人にぴったりだと思います。

発売日前に紹介したのは、早期ご購入キャンペーンが実施されているためです。Amazon・マイナビで紙版書籍を早期購入した方全員に、特典PDF『HTML5&CSS3デザイン 現場の新標準ガイド​』要素/プロパティ&ブラウザ対応一覧がプレゼントされます。

• キャンペーンの申込み
• キャンペーンの詳細

Kindle版は、キャンペーンの対象外です。

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

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

このページに掲載している画像は、版元様より特別に許可をいただいた他では見ることができない中身を紹介します。

本書は解説がかなり詳しく、W3Cの仕様書に基づいたHTMLとCSSの知識をしっかり学ぶことができます。

コードや図も数多く掲載されており、非常に分かりやすいと思います。

例えば、Metaに記述するFacebookのOGPやMicrodataなど、暗記してないようなものも詳しく解説されてあるので、「あれ？なんだっけ」という時にもさっと取り出せます。

リファレンス本でがっかりするのは、実際に使わないようなデモが多い、ですが、本書では実践的なデモをベースに解説されているのも特徴です。

また大きな特徴として、実装の考え方についても解説されており、応用が効く知識を身につけることもできます。

疑似要素や疑似クラスを使った実装も最近ではより増えてきました。それぞれの機能だけでなく、デスクトップ・スマホ（タッチデバイス）でどのようにするかなど、実務に役立つテクニックに繋がります。

これから新しく制作するサイトはfloatではなく、flexboxを採用するプロジェクトが増えています。

flexboxも基礎となる知識から、実践的なテクニックまで、詳しく解説されています。

ひょっとしたら、gridを採用するプロジェクトもあるかもしれません。CSS HackやJavaScriptを使用しないと出来なかったレイアウトが、gridで簡単に実装できます。

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

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

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は確実に進化しています。
自身の知識を整理し、新しい機能やテクニックをしっかり学べる一冊です。

献本の御礼

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

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

• お問い合わせ｜コリス