HTML5とCSS3の機能や役割や対応ブラウザなど、実装に必要な情報がすぐ分かるコーダー必読のリファレンス本
Post on:2018年8月24日
今持ってるリファレンス本は、最新のHTMLとCSSに対応していますか?
HTML5の要素とCSS3のプロパティについて、機能や役割や対応ブラウザなど実装に必要な情報がコンパクトにまとめられたリファレンス本を紹介します。
本書は2018年6月時点の最新情報が掲載されており、IE11, Edge42をはじめとする各ブラウザの対応状況も掲載されています。

リファレンス本の大切なポイントの一つが、使いやすいこと。
HTML5とCSS3の完全版だとそれなりに分厚いのが想像できると思います。本書は512ページとけっこうな分厚さなのですが、どのページでも見開きが簡単にできます。手で押さえておく必要はありません。
四六判なので、キーボードの横に置いても邪魔にならないでしょう。
Kindle版はお値段が、少しお得です。
紙面のキャプチャで、中身を少しだけご紹介。

本書の大きな特徴は、見やすいことです。
対応ブラウザは最上部にアイコンで、要素やプロパティの用途が簡潔にまとめられ、使用可能な属性とシンプルな使用例が掲載されています。

HTMLの要素とCSSのプロパティ、どちらも基本フォーマットは同じです。リファレンス本は、シンプルなのが一番ですね。

中身を少し見てましょう。
本書はHTMLとCSSの2パートで構成されており、それぞれの最初には基礎知識が解説されています。

HTMLの要素は、こんな感じです。

使用例はシンプルで分かりやすく、注意が必要なものには間違った使い方なども掲載されています。

続いて、CSS。
HTMLと同様に、最初は基礎知識です。

ここ数年で、CSSはできることが本当に広がりました。少し前まではJavaScriptでないと実装できなかったものがCSSだけで実装できる、というものも少なくありません。
その際に役立つのが、セレクタです。CSS3ではさまざまなセレクタが利用でき、これによりスタイルの幅が広がりました。

プロパティ関連では使用例の画像もあり、値による違いがひと目で分かると思います。

CSSアニメーションもここ数年で、緩急のついたイージングが主流になりました。こういのもぱっと文字とイラストで確認できるのが、便利です。

そして去年くらいからは、Flexboxでの実装が増えてきたのではないでしょうか。Flexboxの仕様やプロパティ、それらがどのようになるかもコンパクトにまとまっています。

今年あたりからは、Gridも増えてきました。Flexboxでは水平か垂直のどちらかの軸にしか配置できませんが、Gridでは両軸を利用して配置できます。

CSSの関数も非常に増えてきました。あまり使わない関数でも、実は便利なものがあるかもしれませんよ。
私が現役だった頃の愛読書は、こういったリファレンス本でした。
端から読んだり、ぺらぺらと眺め、その要素やプロパティを使って面白いことができないかとアイデアのベースとして活用していました。
献本の御礼
最後に、献本いただいた著者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors