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

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

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

本のキャプチャ

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

本のキャプチャ

プロとして恥ずかしくない 新CSSデザインの大原則
[Amazonでみる]
[楽天でみる]

著者:
大藤 幹、北川 貴清、きむら あつとし、境 祐司、高橋 としゆき、錦織 幸知、長谷川 広武
出版社:
MdNコーポレーション
発売日:
2015/7/2

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

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

本のキャプチャ

プロとして恥ずかしくない 新CSSデザインの大原則
[Amazonでみる]
[楽天でみる]

著者:
大藤 幹、北川 貴清、きむら あつとし、境 祐司、高橋 としゆき、錦織 幸知、長谷川 広武
出版社:
MdNコーポレーション
発売日:
2015/7/2

献本の御礼

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

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

sponsors

top of page

©2018 coliss