■著者プロフィール

谷 拓樹（たに・ひろき）

株式会社サイバーエージェント フロントエンドエンジニア
中小企業向けのアプリケーション開発、スタートアップでのスマートフォンサイト制作などを経て、現在はコミュニティサービスの開発、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設計の師匠である斉藤祐也氏の言葉ですが、本書を手にとったみなさんにもこの言葉を捧げます。（谷 拓樹）

クリックすると大きい画像でご覧いただけます

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

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

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

• 52ページ CSSのコード（6行目）
  • [誤]
    .small-logo {
  • [正]
    .logo-small {
  • 備考：

    ※当初正誤表にて、52ページのHTMLの方を<h1 class="logo small-logo">とする訂正を掲載しておりましたが、読者様から「文書本文の意味的な流れと一致しないのではないか」（命名規則：構造をベースとした拡張（65ページ））とのご指摘を受け、再度著者の谷氏に確認をしました。結果、ご指摘のとおり、命名規則上CSSの方をlogo-smallとする方が適切と回答をいただきましたので、お詫びして再度訂正いたします。

• 100ページ 本文4～5行目
  • [誤]
    ・Interface Segregation Principle（依存関係逆転の原則）
    ・Dependency Inversion Principle（インターフェイス分離の原則）
  • [正]
    ・Interface Segregation Principle（インターフェイス分離の原則）
    ・Dependency Inversion Principle（依存関係逆転の原則）
  • 【 第2刷にて修正 】
• 111ページ 111ページのCSSの1行目
  • [誤]
    .form__footer {
  • [正]
    .form__button {
  • 【 第2刷にて修正 】
• 115ページ アイコンフォント実装例のCSSの3行目
  • [誤]
    @import url(http://weloveiconfonts.com/api/?family=fontawesome);
  • [正]
    削除
  • 【 第2刷にて修正 】
• 137ページ ガターのCSSの6行目
  • [誤]
    background-color: rgba(#489);
  • [正]
    background-color: rgba(68, 136, 153, 1)
    あるいは
    background-color: #489
• 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);
    }
  • 【 第2刷にて修正 】

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

お問い合わせフォーム