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

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

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

本のキャプチャ

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

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

本のキャプチャ

HTML5 & CSS3デザイン 現場の新標準ガイド
[Amazonでみる]
[楽天でみる]

著:
エビスコム
出版社:
マイナビ出版
発売日:
2017/8/28

発売日前に紹介したのは、早期ご購入キャンペーンが実施されているためです。Amazon・マイナビで紙版書籍を早期購入した方全員に、特典PDF『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は確実に進化しています。
自身の知識を整理し、新しい機能やテクニックをしっかり学べる一冊です。

本のキャプチャ

HTML5 & CSS3デザイン 現場の新標準ガイド
[Amazonでみる]
[楽天でみる]

著:
エビスコム
出版社:
マイナビ出版
発売日:
2017/8/28

献本の御礼

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

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

top of page

©2017 coliss