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

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

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

本の表紙

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

本の表紙

今すぐ使える!CSSレシピブック
ISBN978-4-86354-262-4
[Amazonでみる]
[楽天でみる]

著者:
たかもそ
出版社:
C&R研究所
発売日:
2019/1/29

Amazonで品切れ間近ですが、既に版元様が手配済みですので、すぐ入荷される予定です。
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は新しい機能やテクニック、考え方がどんどん登場しています。
デザイナーやプログラマーに遅れを取らないよう、役立つ知識が身につくと思います。

本の表紙

今すぐ使える!CSSレシピブック
ISBN978-4-86354-262-4
[Amazonでみる]
[楽天でみる]

著者:
たかもそ
出版社:
C&R研究所
発売日:
2019/1/29

献本の御礼

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

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

sponsors

top of page

©2019 coliss