CSSの基本から徹底的に、実務で使えるテクニックやアイデアが充実した長く使えるオススメの本 -新CSSデザインの大原則

CSSを使いこなすためには文法の理解だけでなく、実際にどのように書かれているのかノウハウを蓄積することも重要です。CSSの基本となる文法をはじめ、プロパティの詳細、配置やレイアウトのテクニック、要素の作り込み、人気のインタラクションなど、CSSで必要な知識や情報を網羅した「新CSSデザインの大原則」を紹介します。

あれはどうやるの？ がすぐに分かるオススメの本です。

「新CSSデザインの大原則」は、その前身となる「スタイルシートの大原則 」のリニューアルというより一から完全に作り直されたものとのこと（編集部さんからの情報）。
旧版を愛用されてた人もきっと多くいるでしょう。

著者陣には大藤 幹氏のお名前もあり、個人的にそれだけで買いです。

Kindle版は、お値段がかなりお得です。

• プロとして恥ずかしくない 新CSSデザインの大原則（Kindle版）

では、そんな本書の中身を紙面のキャプチャで少しだけご紹介。

本書はCSSの総合的な知識が網羅されており、リファレンス本的な使い方をしてもいいし、テクニックやアイデアなど実務レベルの技術を学ぶこともできます。

ページは項目ごとに解説のテキストとコード、そして実装サンプルで構成されています。

分かりにくい箇所は、図やイラストによる説明も充実しています。

本書はCSSの単に技術的なものだけでなく、もう一歩踏み込んだ内容にも触れられています。

もちろん、実践的なTipsも盛り沢山です。

本書は6章構成で、1-3が基礎編、4-6が実践編です。1章ではCSSの基本、2章からは各プロパティについての詳細な解説です。
Webデザインで最も大切なテキストのプロパティ、読みやすさを実現するために理解しておくべき知識があります。

また、レイアウトも重要です。ボックスのプロパティではさまざまな実例を見ながら、実装方法とその特徴が学べます。

テーブル、リスト、そしてメディアクエリ、セレクタだけでなく、最近使う機会が増えてきたトランスフォームやアニメーションについても基本からしっかりと解説されています。

3章は基本編の最後、CSSによる配置です。フロートの仕組み、ポジションの仕組み、配置がくずれる場合のチェックポイント、CSSでさまざまなレイアウトを実現するための重要な知識です。

フロートした要素が意図した通りにならない、親要素からはみだしてしまう、高さが異なる要素を内包するとくずれてしまう、そんな時は慌てずに一つずつチェックしてみましょう。

4章からはいよいよ実践編。まずは最近採用されている代表的なページレイアウトの手法を学んでいきます。

カラムレイアウト、部分的な多カラムレイアウト、固定+リキッドレイアウト、グリッドレイアウトなど、そのレイアウトごとの特徴・実装だけでなく、注意点や活用方法など幅広く解説されています。

ウインドウサイズを超えた箇所だと背景が途切れてる、うっかり忘れがちな箇所もその対応方法も含めて確認しておきましょう。

もちろん、レスポンシブ、カード型、縦長ページなどの最近人気のレイアウトも揃っています。

レイアウトのさまざまなパターンや活用方法も充実しています。

5章はパーツの作り込み。ゴーストボタン、文字の装飾、ホバーエフェクト、ボックスデザイン、ナビゲーション、フォームのデザイン、画像のエフェクトなど、最近のWebデザインで見かけるテクニックをマスターできます。

ナビゲーションも最近は変化してきました。テキストを使ったもの、アイコンを使ったもの、画像を使ったもの、またアニメーションを使った面白いインタラクションが楽しめるものなど、CSSの進化は留まることがありませんね。

最近増えてきたのが、この背景を使ったテクニック。インパクトのある画像を背景に使い、サイトの雰囲気を演出しています。
他にもCSSだけで実装するパララックスやアニメーションなど、これがやりたかった！というのがたくさんあります。

新CSSデザインの大原則の目次

1. 基礎編1: CSSの基本

   CSSとは

   CSSの文法

   CSSのセレクタ

   CSSのプロパティ

   CSSによる色指定

   CSSのボックスモデル

   CSSとブラウザ&デバイス

   CSSとアクセシビリティ+ユーザビリティ

   CSSを書くときの注意点

   コラム: リセットCSSとノーマライズCSS

2. 基礎編2: CSSによる装飾

   テキストのプロパティ

   ボックスのプロパティ

   画像のプロパティ

   テーブルのプロパティ

   リストのプロパティ

   そのほかのプロパティ

   コラム: CSSを検証する

3. 基礎編3: CSSによる配置

   フロートの仕組み

   ポジションプロパティ

   配置がくずれる場合のチェックポイント

   コラム: CSS設計とは

4. 実践編1: CSSによるページレイアウト

   カラムレイアウト

   部分的な多カラムレイアウト

   固定+リキッド（フルイド）レイアウト

   グリッドレイアウト

   要素をタイル状に並べるMasonryレイアウト

   グリッドフリーなリキッドレイアウト

   スマートホンサイトのレイアウト

   レスポンシブレイアウト

   フロート以外のカラムレイアウト

   コラム: SassをはじめとするCSSプリプロセッサ

5. 実践編2: CSSによるパーツの作り込み

   Font Awesomeを使ったアイコン付きゴーストボタン

   文字の装飾

   ロールオーバーエフェクト

   Masonryで使えるボックスのデザイン3種

   ナビゲーションの構造

   プレースホルダの弱点を補ったフォームのデザイン

   背景の装飾

   画像の効果（シャドウ・角丸・ぼかしなど）

   コラム: CSSフレームワークとは

6. 実践編3: その他のテクニック

   CSSスプライト

   ページカールの透過PNG画像で視線を誘うレイアウト

   CSSだけで実装するパララックス（視差効果）のシングルページ

   サイトのテキストにWebフォントを使って表示する

   CSSによる3D効果・アニメーション

CSSのリファレンス本として、またはアイデア帳として、制作時の手元に備えておきたい絶対オススメの一冊です。

献本の御礼

最後に、献本いただいたMdNコーポレーションの担当者さまに御礼申し上げます。

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

• お問い合わせ｜コリス