CSSの実践的なテクニックが参考になる！最近のCSSに追いつけていない人にお勧めの良書 -CSSレシピブック

Web制作の進化は本当にスピードが速く、中でもCSSの進化は非常に速く感じます。とは言え、CSSの場合はサポートブラウザのこともあり、最新のものだけを使用すればよいというものではありません。

CSSの最近の情報やテクニックを解説し、古いブラウザから新しいブラウザまで対応したさまざまな実装方法を詳しく解説した制作者必携の一冊を紹介します。

本書はCSSの中級者向けです。CSSの入門的な解説は一切ありません。
CSSを使った実用的なテクニック、そのテクニックのメリットとデメリットなど、実務レベルの知識を学ぶことができます。
また、掲載されているサンプルはサポートサイトからダウンロードできます。

Amazonで品切れ間近ですが、既に版元様が手配済みですので、すぐ入荷される予定です。
Kindle版はお値段が、少しお得です。

• 今すぐ使える！CSSレシピブック Kindle版

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

目次をざっと見るだけでも、内容が充実しているのが分かると思います。
そして、438ページの大ボリュームです！

セレクタ、タイポグラフィをはじめ、レイアウト、シェイプ、ユーザーエクスペリエンス、コンポーネント、アニメーションなど、実務で使えるCSSのテクニックが満載です。

セレクタだと、:nth-child()などの疑似クラスを使用する機会が多いと思います。分かりやすい解説、コード、プレビューが掲載されており、一目で実際にどのように実装するのかが理解できます。

コラムも非常に充実しており、さらに実践的なテクニックを学ぶことができます。

デスクトップやスマホなどのデバイスや環境を判定するために、メディアクエリの便利な使い方がいろいろあります。スクリーンのサイズだけでなく、スクリーンの向き、解像度、ホバーが利用できるかどうかなど、効果的に定義できます。

レスポンシブ対応のレイアウトを実装するために、メディアクエリのみに頼る時代は終わりです。min-widthとmax-widthそしてwidthとcalc()関数を使用したテクニック、flex-wrapやflex-growを使ったテクニックなども見かけます。

レスポンシブ対応の際、文字サイズをどうするか悩む人も少なくないと思います。スクリーンサイズによって変化させたり、ブラウザの差異を吸収する定義など、かなり参考になると思います。

CSSの初心者が悩みがちな問題を解消するテクニックも詳しく解説されています。「インラインブロックの隙間」とはインライン要素を隙間なく並べたつもりでも、隙間ができてしまうアレです。

定番のテクニックも漏れなく、新旧ブラウザに対応して解説されています。

1つは可変幅、1つは固定幅、という2カラムのレイアウトもよく使用するテクニックでしょう。本書では、floatとネガティブマージンを使ったテクニック、floatとcalc()を使ったテクニック、display: table; を使ったテクニック、Flexboxを使ったテクニック、Gridを使ったテクニックと、それぞれの解説と利点・欠点なども分かります。

最近のテクニックも数多く掲載されています。例えば、画像のトリミングでは、background-sizeを使ったテクニックから、object-fitやSVGを使ったテクニックまで、使用する環境似合わせて実装できます。

数年前から、画像は幅いっぱいで、テキストは中央配置というレイアウトも数多く見かけるようになりましたね。

シェイプの章では、曇りガラスのような最近のWebサイトやスマホアプリでよく目にするテクニックなども詳しく解説されています。

本書は見た目的のテクニックだけではありません。ユーザーエクスペリンスの章では、クリック範囲の拡大、テーブルのハイライト、バウンススクロールの無効化、Webフォントの読み込み制御など、使い勝手に関するテクニックも満載です。

コンポーネントの章では、タブ、アコーディオン、ツリー構造、フォーム、パンくずリストなど、UIにそのまま利用できます。

最後のアニメーションの章では、蛍光マーカー、波紋、スライドなど、使ってみたくなるようなテクニックが詳しく解説されています。

CSSレシピブックの目次

1. セレクタ

   接頭辞と接尾辞

   兄弟要素の個数

   「以外」の指定

   メディア特性

   「未満」のメディアクエリ

   メディアクエリなしのレスポンシブ

   イベントハンドラ

2. タイポグラフィ

   ぶら下がりインデント

   囲み文字

   90度回転文字

   文字の省略

   合成フォント

   文字の左右に水平線

   境界で色が変わる文字

   レスポンシブな文字サイズ

3. レイアウト

   インラインブロックの隙間

   左右中央揃え

   上下中央揃え

   上下左右中央揃え

   Flexboxによるグリッドシステム

   段組

   可変幅と固定幅

   アスペクト比の固定

   画像のトリミング

   コンテナからの解放

   下部に固定されるフッタ

4. シェイプ

   三角形

   平行四辺形

   台形

   複数のボーダー

   半透明のボーダー

   画像のボーダー

   角の切り落とし

   背景の位置

   ストライプ

   ジグザグ

   斜めの区切り

   円グラフ

   曇りガラス

5. ユーザーエクスペリエンス

   マウスカーソル

   テーブルのハイライト

   レスポンシブテーブル

   リンク切れ画像の代替表示

   クリック範囲の拡大

   バウンススクロールの無効化

   Webフォントの制御

   ホバー以外の指定

   スクロール可能を示す影

6. コンポーネント

   チェックボックス

   セレクトボックス

   タブ

   アコーディオン

   ファイル選択ボタン

   星の5段階評価

   ツリー構造

   パンくずリスト

   横スクロールナビ

7. アニメーション

   点滅

   マーキー

   波紋

   パラパラアニメ

   蛍光マーカー

   スライド

8. その他

   文字色の継承

   カウンター

   カスタムプロパティ

CSSは新しい機能やテクニック、考え方がどんどん登場しています。
デザイナーやプログラマーに遅れを取らないよう、役立つ知識が身につくと思います。

献本の御礼

最後に、献本いただいた著者さま・C&R研究所の担当者さまに御礼申し上げます。

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

• お問い合わせ｜コリス