Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

¥2,200+税

品種名
書籍
発売日
2014/7/24
ページ数
216
サイズ
B5変形判
著者
谷 拓樹 著
ISBN
978-4-8443-3635-8

コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、「ちゃんとCSSを書く」ためのプロの考え方を徹底解説!「セレクタが複雑になってしまう……」「オブジェクト指向CSSってなに?」「考え方はわかったけど、どう組めばいいの?」そんな人のバイブルになるのが、この本です。破綻しやすいCSS、セレクタのリファクタリングなどの基本から、OOCSS、SMACSS、BEMなどのコンポーネント設計のアイデア、実際によくあるパターンのコードの組み方までを丁寧に解説。また、注目されはじめた「Web Components」についても説明します。


ただいま 第1章「CSSにおける設計とは」お試し版 無料公開中

PDF形式:お手元にダウンロードしてお読みください。

「読者アンケートに答える」「読者プレゼントに応募」の場合もこちらをご利用ください。

アンケートに答える

書籍の内容に関するお問い合わせはこちら。お答えできるのは本書に記載の内容に関することに限ります。

詳細

■著者プロフィール

谷 拓樹(たに・ひろき)

株式会社サイバーエージェント フロントエンドエンジニア
中小企業向けのアプリケーション開発、スタートアップでのスマートフォンサイト制作などを経て、現在はコミュニティサービスの開発、UIデザイン、テクニカルディレクションを担当している。Frontrend、JS Girls、html5jなどのコミュニティ活動や講演活動、その他技術書の執筆もおこなう。著書に『HTML5+CSS3で作る 魅せるiPhoneサイト』(ラトルズ)など。

Twitter ●ブログ ●GitHub


■読者のみなさまへ

(本書「はじめに」より抜粋)
私がWeb業界での仕事をはじめて10年近くになりますが、もともとはエンジニアというよりは、デザイナーと呼ばれるレイヤーの出身です。規模の小さなITベンチャーで、UIデザイナー兼マークアップエンジニアを勤めるところからはじめ、これまで多くのデスクトップ向け、スマートフォン、タブレット向けのWebサイト、Webアプリケーションの開発に関わり、それぞれでHTML/CSSの設計と実装を主に担当してきました。その間、何万行にもおよぶCSSを書いてきたわけですが、それでも一度も100%壊れない、完璧なCSSを書けたという記憶はありません。それは10年の経験が生かせていないというわけではなく、CSSという言語の限界があり、多くの著名な開発者であっても同様です。しかし、CSS開発における多くの失敗は多くのアイデアを生み出します。本書で紹介するOOCSSやSMACSS、BEMなどのプラクティスは、それらの経験をもとにして生まれたものです。
また、それぞれのプラクティスは、すべての問題を解決できる唯一のベストプラクティスというわけではありません。本文でも各所で伝えていますが、みなさんのチーム、プロジェクトの問題に対し、解決につながるヒントが見つかったら、適材適所でその良い所を採用してください。そのためのアイデアは、本書にたくさん詰め込んだつもりです。“壊れない完璧な設計を求めるのではなく、壊れたときに勇気を持って修復できる設計を”これは僕にとってのCSS設計の師匠である斉藤祐也氏の言葉ですが、本書を手にとったみなさんにもこの言葉を捧げます。(谷 拓樹)


■ページイメージ

 

 

目次

第1章 CSSにおける設計とは
1-1 CSS設計の重要性
 フロントエンドとCSSの仕事
 開発に欠かせない設計
 より良いCSSのゴール
1-2 破綻しやすいCSS
 HTMLの構造に依存している
 スタイルを取り消している
 絶対値を多用している
 修正しやすいCSSへ
 モダンなサイト構築ワークフロー

第2章 CSSの基本を振り返る
2-1 CSSセレクタと詳細度
 カスケーディングの基本
 詳細度
 詳細度の計算
2-2 セレクタのリファクタリング
 セレクタをより安全でシンプルなものに
 要素セレクタを省略する
 セレクタを短くする
 セレクタを限定的にする
 クラスセレクタを活用する

第3章 コンポーネント設計のアイデア
3-1 CSSにおけるコンポーネント設計
 コンポーネントとは
3-2 OOCSS
 OOCSSの原則
 構造と見た目の分離
 コンテナーとコンテンツを分離
3-3 SMACSS
 カテゴライズ
 命名規則
3-4 BEM
 MindBEMding
3-5 MCSS
 マルチレイヤーCSS
 MCSSのレイヤー
3-6 FLOCSS
 自分の設計手法を考える
 FLOCSSの構成
 基本原則
 Foundation
 Layout
 Object
 命名規則
 カスケーディング

第4章 コンポーネント設計の実践
4-1 コンポーネントをどのように作るか
 最適化を焦らない
 Rule of three
 SOLID CSS
4-2 よくあるコンポーネントの設計・実装パターン
 ボタン
 アイコン
 見出し
 メディア
 ナビゲーション
 リスト
 グリッド
 汎用クラス

第5章 CSSプリプロセッサを用いた設計と管理
5-1 コンポーネントを個別に管理する
 Sassを使った管理方法
 マルチクラスとシングルクラス
 セマンティックなクラス名
 Sassの注意点

第6章 コンポーネントの運用に必要なツール
6-1 コンポーネントの運用
 CSSのコメント
 ドキュメンテーション
 スタイルガイド、パターンライブラリ
6-2 スタイルガイドの作成方法
 スタイルガイドのテンプレート
 スタイルガイドジェネレータ
 ワークフローを見直す
 CSS開発・設計に役立つツール

第7章 Web Componentsの可能性
7-1 HTML/CSSのコンポーネント化
 現状のHTML/CSSにおける限界
 Web Componentsとは
 Web Componentsの仕様
7-2 独自のコンポーネントを作る
 モデルとなるコンポーネント
 my-alert要素を作る
 ライフサイクルコールバック
 TemplatesとShadow DOM
 機能追加とスタイリング
 コンポーネント開発の時代に備えて

関連書籍

好評発売中

いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方

好評発売中

ゲームで学ぶ JavaScript 入門 HTML5&CSS も身につく!

「JavaScriptでココまでできる!」ラクラク学べるゲームプログラミング入門書の決定版!

好評発売中

できるホームページ・ビルダー20

ホームページ・ビルダーSPの基礎をしっかりとマスター! SNSとの連携から過去サイトの運用まで丁寧に解説!

ダウンロード

  •  本データは『Web制作者のためのCSS設計の教科書』で解説しているコードの一部をサンプルデータとして用意したものです。

     
    本書はCSS設計における考え方とその実装例についてフォーカスし、コードを一部省略した記述をしています。そのため、書籍に記述されているコードをそのまま記述するだけでは、キャプチャ画像の通りの見た目にならないこともあります。
     
    本データでは、キャプチャを再現するための装飾スタイルを加えています。

お詫びと訂正

誤記のためにご迷惑をおかけし、誠に申し訳ございません。

  • 52ページ HTMLのコード
    • [誤]<h1 class="logo logo-small">
    • [正]<h1 class="logo small-logo">
  • 115ページ アイコンフォント実装例のCSSの3行目
    • [誤]@import url(http://weloveiconfonts.com/api/?family=fontawesome);
    • [正]削除
    • 備考:

       上記の一行はサンプルを実行する上では不要となります(後述している@font-faceで各フォントデータを読み込むようにしているため)。

       

  • 137ページ グリッド実装例のCSSの1行目〜9行目
    • [誤].grid__item {

       float: left;

       box-sizing: border-box; /* border-widthとpaddingをwidthに含める */

       width: 16.667%;

       > div {

        background-color: rgba(#489);

       }

      }
    • [正].grid__item {

       float: left;

       box-sizing: border-box; /* border-widthとpaddingをwidthに含める */

       width: 16.667%;

      }

      .grid__item > div {

       background-color: rgba(#489);

      }
    • 備考:

       上記はCSSのコードですが、本書上では一部がSass(SCSS)の記述となっていたため、訂正します。